【Flutter初心者用】画像を表示させる方法をシンプルにわかりやすく解説

こんにちは！文系プログラマーのいおです！

今回はFlutterのアプリ内に画像を表示させる方法についてわかりやすく記事にまとめてみようと思います。

画像表示手順
おわりに

画像表示手順

Flutterの画像表示は下記手順でできます。

①画像ファイルを置くためのフォルダ作成
②①に画像ファイルを置く
③pubspec.yamlの編集
④「Image」ウィジェットで画像の表示

詳しく説明していきます。

①画像ファイルを置くためのフォルダ作成

プロジェクト名を右クリックして「新規」→「ディレクトリ」を選択する。

任意のフォルダ名（ここではimagesとします）を入力し、エンターを押す。

これでプロジェクト直下にフォルダが作成されます。

②①に画像ファイルを置く

次に、①で作成したフォルダ内にアプリに表示させる画像を配置します。
Android Studio上で作成したフォルダにドラッグ＆ドロップでできます。

③pubspec.yamlの編集

pubspec.yamlとは？

Flutterプロジェクトの設定ファイルのことです。画像ファイルの保存場所やフォント情報の指定、外部ライブラリの依存関係の設定等、Flutterでアプリ開発をする際に非常に重要になってくるファイルです。

編集内容

下記のように、pubspec.yamlの中にある「flutter:」の「assets:」に先ほど作成したフォルダを指定する。

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  
  # ↓↓↓↓↓この部分を追加する↓↓↓↓↓
  assets:
     - images/
  # ↑↑↑↑↑この部分を追加する↑↑↑↑↑

これでフォルダ内の画像を表示する準備が整いました。

④「Image」ウィジェットで画像の表示

ここで画像を表示させてみます。下記のように、「Image」ウィジェットを置き、「asset」メソッドの引数に表示させたい画像のパスを指定します。

class _MyHomePageState extends State {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Image.asset('images/sample.jpg'),
      ),
    );
  }
}

これでアプリを実行すると画像がアプリの画面に表示されているはずです！