#ローカルに画像を用意
Flutter プロジェクトの中に、assets
フォルダを作りその中にimages
フォルダを作ります。
assets/images/unnamed.png
というパスになります。
この画像を表示させます。
#pubspec.yamlに画像の置き場所を設定する
デフォルトでは下記のようにコメントアウトされているかと思います。
pubspec.yaml
flutter:
...(省略)...
# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
assets:
から下の部分をコメントから以下のように編集します。
pubspec.yaml
flutter:
...(省略)...
# To add assets to your application, add an assets section, like this:
assets:
- assets/images/unnamed.png
ここでのassets/images/unnamed.png
は最初に画像を設置したパスのことですね。
※インデントの問題でエラーが発生しやすいので要注意です!元のインデントを崩さないように編集しましょう!
#サイズを指定して画像を表示
Container(
width: 154,
height: 230,
child: Image.asset(
'assets/images/unnamed.png',
fit: BoxFit.contain,
),
),
サイズを指定して表示するためにContainer
のchildにImage
を設置