northpaddyのブログ

日々学んだプログラミングについてアウトプットしていきます

Flutterデモアプリをカスタマイズしてみよう⑧

Dart Flutter アウトプット プログラミング プログラミング初学者 プログラミング学習

概要

Flutterデモアプリを少しずつ弄っていってFlutterに慣れていくのが目的です
前回の記事はこちら

今回行うこと

前回までのListView

前回実装したListViewについてさらに深ぼっていこうと思います

前回までのListViewの中身を見ていきましょう

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('フラッターデモホームページ'),
      ),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 20),
        child: ListView(
          children: <Widget>[
            ListTile(
              contentPadding: EdgeInsets.all(10.0),
              leading: Image.asset(
                'images/owl.jpg',
              ),
              title: Text('フクロウ'),
              trailing: Icon(Icons.arrow_forward_ios),
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => NextPage()),
                );
              },
            ),
            ListTile(
              contentPadding: EdgeInsets.all(10.0),
              leading: Image.asset(
                'images/owl.jpg',
              ),
              title: Text('フクロウ'),
              trailing: Icon(Icons.arrow_forward_ios),
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => NextPage()),
                );
              },
            ),
            ListTile(
              contentPadding: EdgeInsets.all(10.0),
              leading: Image.asset(
                'images/owl.jpg',
              ),
              title: Text('フクロウ'),
              trailing: Icon(Icons.arrow_forward_ios),
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => NextPage()),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

上記のコードのListTileの部分に注目すると、
３つある各ListTile以下のコードは全て同じ記述です
このListTileを１つにまとめていきます

List型を作る

それを行う前にあらかじめデータを型に入れておきます

今回は画像のデータとタイトルのデータの型を作っていきます
これをList型と言う型に入れていきます

  var imageLists = [
    'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg', //フクロウの画像
    'https://cdn.pixabay.com/photo/2017/06/09/09/39/adler-2386314__340.jpg', //鷲の画像
    'https://cdn.pixabay.com/photo/2014/05/20/21/20/bird-349026__340.jpg', //ひよこの画像
    'https://cdn.pixabay.com/photo/2015/10/12/14/53/kingfisher-983944__340.jpg', //カワセミの画像
  ];

  var imageTitles = ['フクロウ', '鷲', 'ひよこ', 'カワセミ',];

画像のデータのListをimageLists
タイトルのデータのListをimageTitle
と名付けました

これをMainPageクラスに入れておきます

ListView.builder

次にListViewに.builderを追記していきます

ListView.builderとは
主に、表示する要素が事前にわからない場合に利用する書き方です。

ListView.builder以下にこう記述します

child: ListView.builder(
  itemCount: imageLists.length,
  itemBuilder: (context, int index) {

：//省略

},

itemCountはimageListsの数だけ要素を表示
itemBuilderは一個一個の要素に対しての表示部を表しています

ListTileのリファクタリング

あらかじめデータを入れておいた型からデータを呼び出して表示してみます

return ListTile(
  contentPadding: EdgeInsets.all(10.0),
  leading: Image.network('${imageLists[index]}',
  ),
  title: Text('${imageTitles[index]}',
  ),
  trailing: Icon(Icons.arrow_forward_ios),
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => NextPage()),
    );
  },
);

''に＄を付けて、
imageListsとimageTitlesから[index]と記述すると
各要素を取り出すことが出来ます

ホットリロード
https://i.gyazo.com/929c93a28bc4bcd49f430047afe71e65.png
このような表示になりました！

コード全体

少しスタイルを変更し完成したコードがこちらです

import 'package:flutter/material.dart';

import 'next_page.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'フラッターデモホームページ';

    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: title,
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: MainPage());
  }
}

class MainPage extends StatelessWidget {
  var imageLists = [
    'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
    'https://cdn.pixabay.com/photo/2017/06/09/09/39/adler-2386314__340.jpg',
    'https://cdn.pixabay.com/photo/2014/05/20/21/20/bird-349026__340.jpg',
    'https://cdn.pixabay.com/photo/2015/10/12/14/53/kingfisher-983944__340.jpg',
  ];
  var imageTitles = ['フクロウ', '鷲', 'ひよこ', 'カワセミ',];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('フラッターデモホームページ'),
      ),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 20),
            child: ListView.builder(
              itemCount: imageLists.length,
              itemBuilder: (context, int index) {
                return ListTile(
                  contentPadding: EdgeInsets.all(10.0),
                  leading: Image.network('${imageLists[index]}',
                    height: 80,
                    width: 80,
                  ),
                  title: Text('${imageTitles[index]}',
                  ),
                  trailing: Icon(Icons.arrow_forward_ios),
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => NextPage()),
                    );
                  },
                );
              },
          ),
      ),
    );
  }
}

3つあったListTileを１つにまとめて表示は要素の数表示することが出来ました。
https://i.gyazo.com/a5e5164deef459e95a2916c0ba595c9a.png

参考記事

flutter.ctrnost.com
nzigen.com


まとめ

今回はデータをあらかじめ入れておき、それを表示させるというのをやってみました
もしかしたらこのやり方より違うやり方の方がいいのかもしれません
（現状この二つのListをnextPageの方で使えない？為、鷲のページに飛んでもフクロウのままです）
詳しい方が居たらご教授いただけると幸いです。