【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

📲Flutter（フラッター）👯‍♀️
GridViewで画像を表示してみたよぉ😊#Flutter https://t.co/0PpSei7YgU pic.twitter.com/rWGCLJmqwD

— non (@nonnonkapibara) February 6, 2020

1.imagesフォルダを作って画像を入れる

2.imagesフォルダをAndroid Studioの中に入れる

3.imagesフォルダを移動しますか？のダイアログが表示されるので、OKボタンを選択する

4.imagesフォルダが入った。

5.「pubspec.yaml」を開く

6.images配下の全ての画像を取り込む

  assets:
    - images/

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

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

こんな感じで２つ指定すると、２つだけ取り込む

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

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,),
    );
  }
}

完成