その１、アプリ内に画像を入れる
プロジェクト直下に画像フォルダ(名前はなんでもいい)を作り、
その中に表示させたい画像を入れる。
今回は例として『images』にする。
その２、pubspec.yamlを編集する。
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/sample.jpg
(先ほど作った『images』の中にある『sample.jpg』という意味)
ファイル一つを表示させたいならこれでいいが、
実際は複数のファイルを表示させたいことが殆どだと思う。
しかし一つ一つ記述するのはあまりにもめんどくさい。
imagesに入っている画像を全て表示させる書き方
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/
(その１で作ったフォルダの名前)
これでimages内にある画像ファイルを全て表示させることが出来るようになったが、
更に実用的に書くならば、
images内に更に、何用の画像かでフォルダ分けがしたいはずだ。
images内に、用途別フォルダ分けした画像を表示させたい場合
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/my_page/
- images/category/
(images内にmy_pageフォルダとcategoryフォルダを作って区分してる想定)
その３、image widgetを使って表示させる。
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
// ############### 下記を追加する ##################
child: Image.asset('images/sample.jpg'),
// ############### 区分した場合 ##################
child: Image.asset('images/my_page/sample.jpg'),
),
);
}
}
これで完了。
解説すると、
image.asset
これでローカル内の画像を参照し、
('images/my_page/sample.jpg')
ローカル内にある画像のパスを指定すれば表示出来るという流れ。
その１で作ったフォルダ/その２で作ったフォルダ/その２に入ってる画像データの名前
ということである。