Flutterコンポーネントの基本——画像

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: 空でない場合、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