フラッター写真アセンブリ

フラッターの画像成分は一般的に使用される、コンストラクタがたくさんあるにImage.asset（ローカル画像）とImage.network（遠隔画像）が挙げられます。

共通のプロパティ

ローカルまたはリモートの画像ピクチャを表示するかどうか、画像の成分は、以下の共通の属性を含んでいます。

アライメント：画像の位置合わせ
色とcolorBlendMode：画像の背景色を設定し、画像の色と背景色を混合することができるように、しばしば、colorBlendModeと一緒に使用されます。
フィット：親コンテナに基づいて画像の描画と押し出しをコントロールフィットプロパティを、。
リピート：リピートモードタイル張りの写真を
幅：幅は、一般的に結果を確認するにはClipOvalと組み合わされ
高さ：高さは、一般的に結果を確認するにはClipOvalと組み合わされ

フィットが含まれ：

BoxFit.fill：フルマップ表示、画像が延伸し、親コンテナのフルされます。
BoxFit.contain：フルマップ表示、元の割合を示したが、ギャップがあってもよいです。
BoxFit.cover：ディスプレイは、伸張することができる（コンテナ全体ではなく、変形を充填するために絵）、フルカットすることができます。
BoxFit.fitWidth：全幅（フル横方向）、表示することができる延伸、切断されてもよいです。
BoxFit.fitHeight：全高（フル垂直）、ディスプレイは、伸張することができる切断してもよいです。
BoxFit.scaleDown：効果とは大小ではないかもしれないが、ほぼ同じ含まれていますが、このプロパティは元画像サイズ以上のものを表示することはできません。

リモート表示画像

遠隔画像表示は比較的簡単です、ちょうどその上に画像のアドレスを記入します

インポート'パッケージ：フラッター/ material.dart' ; 

ボイドメイン（）=> runApp（MyAppを（））。

クラスのMyAppはStatelessWidget {拡張
  @Overrideの
  ウィジェットのビルド（BuildContextコンテキスト）{ 
    返すMaterialApp（：
        足場（ホーム
          アプリケーションバー：アプリケーションバー（タイトル：テキスト（ 'FlutterDemo' ））、
          ボディ：HomeContent（）を、
     ））; 
  } 
} 
クラスHomeContentはStatelessWidget {拡張
  @Override 
  ウィジェットのビルド（BuildContextコンテキストが）{ 
    返す（センターを
      コンテナ（：子供の子供：Image.network（
          
         "https://www.baidu.com/img/bd_logo1.png?where=super"、
          アラインメント：Alignment.bottomRight、
          色：Colors.blue、
          colorBlendMode：BlendMode.screen、
          フィット：BoxFit.cover、
          繰り返し：ImageRepeat.repeatに
        ）、 
        幅： 300、
        高さ： 800、
        装飾：BoxDecoration（
          色：Colors.yellow 
        ） 、
      ）
    ）; 
  } 
}

ローカルの画像を表示

ローカル画像を表示するには、まず最初に新しいイメージが画像を保存するためのフォルダ、プロジェクトのルートディレクトリに、地域資源の絵を持っている必要があります：

次に、プロジェクトファイルのルートディレクトリに、内側に使用したい画像の導入をpubspec.yaml。

最後に、上の画像の使用

クラスHomeContentがStatelessWidget {拡張
  @Override 
  ウィジェットのビルド（BuildContextコンテキスト）{ 
    返すセンター（
      子：コンテナ（        
        子：Image.assetを（ '画像/ a.jpeg' 、
          フィット：BoxFit.cover、 
        ）、
        高さ： 300 、
        幅： 300 、
      ）
    ）; 
  } 
}

丸みを帯びた画像を表示

内部の前方に、および装飾部品の幅と高さを設定することにより、容器アセンブリは、容器の内部に、borderRadiusに円形の容器を実現してもよいし、次いで円形の画像を追加して、画像が丸みを達成することができます。

インポート'パッケージ：フラッター/ material.dart' ; 

ボイドメイン（）=> runApp（MyAppを（））。

クラスのMyAppはStatelessWidget {拡張
  @Overrideの
  ウィジェットのビルド（BuildContextコンテキスト）{ 
    返すMaterialApp（：
        足場（ホーム
          アプリケーションバー：アプリケーションバー（タイトル：テキスト（ 'FlutterDemo' ））、
          ボディ：HomeContent（）を、
     ））; 
  } 
} 
クラスHomeContentがStatelessWidget {延び
  @Overrideの
  ウィジェットビルド（BuildContextコンテキスト）{ 
    返すセンター（
      コンテナ（：子        
        幅： 300 、
        高さ： 300を、
        装飾：BoxDecoration（
          色：Colors.yellow、
          borderRadius：BorderRadius.circular（ 150 ）、
          画像：DecorationImage（
            画像：NetworkImage（ "https://www.itying.com/images/201905/thumb_img/1101_thumb_G_1557845381862.jpg" ）、
            フィット：BoxFit.cover 
          ）
        ）、 
      ）
    ）; 
  } 
}

円形画像を実現

上記では、円形の画像は、外側容器の画像の形状を制御することによって達成される、次の画像ではなく、アセンブリ円形画像を実現ClipOval

インポート'パッケージ：フラッター/ material.dart' ; 

ボイドメイン（）=> runApp（MyAppを（））。

クラスのMyAppはStatelessWidget {拡張
  @Overrideの
  ウィジェットのビルド（BuildContextコンテキスト）{ 
    返すMaterialApp（：
        足場（ホーム
          アプリケーションバー：アプリケーションバー（タイトル：テキスト（ 'FlutterDemo' ））、
          ボディ：HomeContent（）を、
     ））; 
  } 
} 
クラスHomeContentがStatelessWidget {延び
  @Overrideの
  ウィジェットビルド（BuildContextコンテキスト）{ 
    返すセンター（
      コンテナ（：子        

        子：ClipOval（
            子：Image.networkを（              
              'http://www.ionic.wang/statics/index/images/ionic4.png' 、
              高さ： 100 、
              幅： 100 、
              フィット：BoxFit.cover、 ）、
            ）、
        
      ）
    ）; 
  } 
}

ClipOval画像が正方形である場合、円形のデフォルトが表示され、円形の画像を使用して実装、画像自体が矩形である場合に、楕円形状は、デフォルトで表示されます。あなたは、ディスプレイの形状を変更したい場合は、そのように容器は、それによって、デフォルトの表示形式を変更する、上記の幅と高さ（画像よりも幅および高さ）に添加してもよいです。