【Flutter】GridViewでassetから画像を表示する（Image.asset）


開発環境
⭐️Flutter
（flutter_macos_v1.9.1+hotfix.5-stable）

⭐️Android Studio 3.5.1

GridViewでassetから画像を表示する方法

↓↓実際に動かした動画
https://twitter.com/nonnonkapibara/status/1225433572409929729
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">📲Flutter（フラッター）👯‍♀️<br>GridViewで画像を表示してみたよぉ😊<a href="https://twitter.com/hashtag/Flutter?src=hash&amp;ref_src=twsrc%5Etfw">#Flutter</a> <a href="https://t.co/0PpSei7YgU">https://t.co/0PpSei7YgU</a> <a href="https://t.co/rWGCLJmqwD">pic.twitter.com/rWGCLJmqwD</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1225433572409929729?ref_src=twsrc%5Etfw">February 6, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

1.imagesフォルダを作って画像を入れる
<img width="302" alt="スクリーンショット 2020-02-06 21.36.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/a6a6d048-faa2-d563-e18f-2c4cb6e020d6.png">

2.imagesフォルダをAndroid Studioの中に入れる
<img width="629" alt="スクリーンショット 2020-02-06 21.37.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/28ca625d-8358-25e7-b92e-07186c29d4e6.png">

3.imagesフォルダを移動しますか？のダイアログが表示されるので、OKボタンを選択する
<img width="626" alt="スクリーンショット 2020-02-06 21.38.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/ec75a480-a528-db0a-5e5b-5d176e80f8cd.png">

4.imagesフォルダが入った。
<img width="447" alt="スクリーンショット 2020-02-06 21.39.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/5429c4a2-2cf8-9312-02d5-6a3d8d578361.png">

5.「pubspec.yaml」を開く
<img width="484" alt="スクリーンショット 2020-02-06 21.42.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/d888abb0-d867-02da-5de0-6310fe5fc4e9.png">

6.images配下の全ての画像を取り込む
<img width="1099" alt="スクリーンショット 2020-02-06 22.55.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/52abe0a7-ddd3-2eb3-ec70-eed7d3bc969d.png">

```
  assets:
    - images/

```

※画像を個別に取り込む場合は、フルパスを指定する。

<img width="974" alt="スクリーンショット 2020-02-06 23.44.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/ff7d7d1d-5c69-6b8c-f873-bfc444b8e6a4.png">

```

  assets:
    - images/bell.png
    - images/calculator.png

```

こんな感じで２つ指定すると、２つだけ取り込む
<img width="394" alt="スクリーンショット 2020-02-06 23.43.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/9ae04205-06e9-7ffd-dc70-72e141c1d5b6.png">


７.「main.dart」にGridViewを実装する

```dart:main.dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var imageList =[
      _imageItem("bell"),
      _imageItem("calculator"),
      _imageItem("castle"),
      _imageItem("cat"),
      _imageItem("coffee"),
      _imageItem("data"),
      _imageItem("deer"),
      _imageItem("duck"),
      _imageItem("football"),
      _imageItem("fox"),
      _imageItem("goldfish"),
      _imageItem("home"),
      _imageItem("horse"),
      _imageItem("island"),
      _imageItem("ladybug"),
      _imageItem("meat"),
      _imageItem("mono"),
      _imageItem("mountain"),
      _imageItem("notebook"),
      _imageItem("panda"),
      _imageItem("penguin"),
      _imageItem("pig"),
      _imageItem("popcorn"),
      _imageItem("post"),
      _imageItem("santa"),
      _imageItem("space_shuttle"),
      _imageItem("tako"),
      _imageItem("trash_can"),
      _imageItem("tree"),
      _imageItem("ufo"),
    ];
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              title: Text('non GridView Sample'),
            ),
            body: GridView.count(
                crossAxisCount: 3,
                children: imageList
            )
        )
    );
  }

  Widget _imageItem(String name) {
    var image = "images/" + name + ".png";
    return Container(
      child: Image.asset(image, fit: BoxFit.cover,),
    );
  }
}
```
完成
![gridView.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/495dd614-ae3b-ad2b-8269-043c0a20527a.gif)