Flutterコンポーネントの基礎-Image

Flutter コンポーネントの基礎 - Image#

Image は Flutter の画像コンポーネントで、iOS の UIImageView に似ています。リソース画像、ネットワーク画像、ローカル画像などを読み込むことができ、ストレッチモードやリピートモードなどを設定することができます。

Image の読み込み方法#

Image の読み込み方法は以下の通りです：

Image.asset：プロジェクトにパッケージ化されたローカル画像を読み込みます
Image.file：デバイス内の画像を読み込みます
Image.memory：メモリ内の画像を読み込みます
Image.network：ネットワーク上の画像を読み込みます

それぞれの使用方法は以下の通りです：

Image.asset(name)はImage(image: AssetImage(name))です
Image.file(path)はImage(image: FileImage(File(path)))です
Image.network(url)はImage(image: NetworkImage(url))です
Image.memory(list)はImage(image: MemoryImage(list))です

また：

asset images を使用する場合、画像が apk または ipa にパッケージ化されるため、パッケージサイズが大きくなります
読み込み時間の比較：NetworkImage > FileImage > AssetImage > MemoryImage

Image.asset#

Flutter でローカル画像を読み込むには、リソースと画像の追加を参照してください。手順は以下の通りです：

pubspec.yamlファイルを見つけ、ここで# To add assets to your application, add an assets section, like this:を見つけ、以下のコメントを解除します。ただし、yaml ファイルのフォーマットの整列に注意してください。
pubspec.yamlと同じ階層にassetsフォルダを作成し、そこに画像を配置します。
最初の手順で解除したコメントファイルを編集し、画像のパスを記述しますが、パスには最も外側の assets が含まれている必要があります。以下は例です：

追加が成功したら、使用する際にもパスが assets から始まることに注意する必要があります。以下はコードの例です：


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Widget',
      home: Scaffold(
        body: Center(
          child: Container(
            child: new Image.asset('assets/images/jietu.png'),
            // child: new Image(
            //   image: AssetImage('assets/images/jietu.png'),
            // ),
            width: 300.0,
            height: 200.0,
            color: Colors.lightBlue,
          ),
        ),
      ),
    );
  }
}

Image.network#

ネットワーク上の画像を読み込むには、以下のコードを使用します：


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Widget',
      home: Scaffold(
        body: Center(
          child: Container(
            child: new Image.network(
              'https://inews.gtimg.com/newsapp_ls/0/13792660143/0.jpeg',
            ),
            width: 300.0,
            height: 200.0,
            color: Colors.lightBlue,
          ),
        ),
      ),
    );
  }
}

Image の属性#

Image の一般的な属性は以下の通りです：

alignment：親ビューに対する画像の配置方法。画像のサイズが親ビューのサイズより小さい場合に効果がわかります
- topLeft：左上に配置
- topCenter：上部中央に配置
- topRight：右上に配置
- centerLeft：中央左に配置
- center：中央に配置
- centerRight：中央右に配置
- bottomLeft：左下に配置
- bottomCenter：下部中央に配置
- bottomRight：右下に配置
color：null でない場合、colorBlendMode に基づいて各ピクセルを画像に混合します
colorBlendMode：画像の混合モード
filterQuality：画像のレンダリング品質
fit：画像の表示モード
- BoxFit.fill：親ビュー領域全体を画像で埋め、引き伸ばされる可能性があります
- BoxFit.contain：元の比率で画像を表示し、余白が残る可能性があります
- BoxFit.cover：親ビュー全体を画像で埋め、元の比率を保ち、切り取られる可能性があります
- BoxFit.fitwidth：幅に合わせて親ビューを埋め、比率を保ちます
- BoxFit.fitHeight：高さに合わせて親ビューを埋め、比率を保ちます
- BoxFit.scaleDown
height：画像の幅
width：画像の高さ
repeat：画像の繰り返しモード
- ImageRepeat.repeat：すべての方向で繰り返し、親ビューを埋めます
- ImageRepeat.repeatX：横方向に繰り返し、親ビューを埋めます
- ImageRepeat.repeatY：縦方向に繰り返し、親ビューを埋めます

以下はコードの例です：



class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Widget',
      home: Scaffold(
        body: Center(
          child: Container(
            child: new Image.network(
              'https://inews.gtimg.com/newsapp_ls/0/13792660143/0.jpeg',
              alignment: Alignment.center,
              filterQuality: FilterQuality.low,
              // scale: 1.0,
              // fit: BoxFit.scaleDown,
              // repeat: ImageRepeat.repeatY,
              // color: Colors.greenAccent,
              // colorBlendMode: BlendMode.colorDodge,
            ),
            width: 300.0,
            height: 200.0,
            color: Colors.lightBlue,
          ),
        ),
      ),
    );
  }
}

参考#

Image dev doc
リソースと画像の追加
 Flutter 無料ビデオシーズン 2 - 一般的なコンポーネント
 How to load images with image.file