Image Widget

Image Widgetを使用すると、画像を配置することができる。
Flutterで画像を表示するためには以下の２種類の方法がある。

  • ネットにある画像を表示する
  • デバイスに入ってる画像を表示する

ネット上の画像を表示する

以下のコードをColumn（Row）などに記載すればよい。

Image.network('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg')

デバイスに入ってる画像を表示する

  • プロジェクトのルート(pubspec.yamlが入ったフォルダ)にassets/imagesフォルダを作成し、その中に画像ファイルを入れる。
  • pubspec.yaml ファイルを設定する。
    1. プロジェクトのルートにある pubspec.yamlファイルをエディタで開く
    2. 以下の設定を追加する
flutter:
  uses-material-design: true
  assets:
    - assets/images/

注意）YAMLファイルはインデントが重要！スペースが正しく設定されているか確認
上記の例だと、uses-material-design: trueの下にスペース2つでインデントしている。

最後に、画像を表示するコードを表示したいdartに追加して保存すれば完了。

void main() {
  final img = Image.asset(
    'assets/images/sushi.jpeg',
  );

  // ロー
  final row = Row(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [img, img, img],
  );

  // アプリ
  final a = MaterialApp(
    home: Scaffold(
      body: Center(
        child: row,
      ),
    ),
  );

  runApp(a);
}
inserted by FC2 system