Chapter 09

リストを作る

基本編の最後はリストです。ニュースアプリなど、あらゆるアプリでよくある実装です。しっかり覚えて色々なアプリを作れるようになりましょう。

動画でいうと以下です。

まずは初期状態

前回は、入力フォームを作りましたが、TextFieldなどを一旦消して以下の状態からスタートします。

class _MyHomePageState extends State<MyHomePage> {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('KBOYのFlutter大学'),
      ),
      body: Container(
        width: double.infinity,
      ),
    );
  }
}

とりあえずリストを作ってみる

https://flutter.dev/docs/cookbook/lists

Flutterのドキュメントのcookbookにある、Listsの項目を開きます。その中からさらに、Use listsを選択して、見てみましょう。

その一番上にあるサンプルコードがこちら↓

ListView(
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.map),
      title: Text('Map'),
    ),
    ListTile(
      leading: Icon(Icons.photo_album),
      title: Text('Album'),
    ),
    ListTile(
      leading: Icon(Icons.phone),
      title: Text('Phone'),
    ),
  ],
);

一旦なにも考えず、これをコピーして、先ほどのContainerのchildとしてこのListViewウィジェットを突っ込んじゃいましょう。そしたらこうなります↓

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('KBOYのFlutter大学'),
      ),
      body: Container(
        width: double.infinity,
        child: ListView(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.map),
              title: Text('Map'),
            ),
            ListTile(
              leading: Icon(Icons.photo_album),
              title: Text('Album'),
            ),
            ListTile(
              leading: Icon(Icons.phone),
              title: Text('Phone'),
            ),
          ],
        ),
      ),
    );
  }

画面はこんな感じ↓

簡単ですね。

ListViewのchildrenの中にListTileが3つあるというだけです。Columnと非常に似ていますね。というか現状の使い方ではColumnと何ら変わりません。複数あると勝手にスクロールできるようにしてくれることが良いくらいでしょうか。

また、ListViewの配下にはListTileを置くのが定番ではありますが、別に何でもよいです。Textをいれてもいいし、Containerを入れてもいいです。ただ、ListTileというのは、適度な余白と左側と右側にアイコン、真ん中にタイトルとサブタイトルをおけるという意味で便利なウィジェットではあります。また、onTapのプロパティも持ってるので、タップした時に画面遷移させる、みたいなコードを書くのにも便利です。

以上がListViewの基本です。

ListView.builder

今度はcookbookの中のWork with long listsを見てみましょう。

さっきの書き方は、予めデータの数が決まっていれば使える書き方ですが、実践的なアプリ開発ですと、リストに表示するデータの数は変動します。そんなときに今回が便利です。

https://flutter.dev/docs/cookbook/lists/long-lists

↑のサンプルでは、

final items = List<String>.generate(10000, (i) => "Item $i");

↑このように1万個の要素を持つListを生成し、以下のようにして表示します。

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('${items[index]}'),
    );
  },
);

↑先ほどはchildrenにウィジェットを直接いれましたが、今回は、itemCountを入れると、itemBuilderでその数の分処理がグルグル回って、表示してくれます。

完成品としては以下。

class _MyHomePageState extends State<MyHomePage> {
  final items = List<String>.generate(10000, (i) => "Item $i");

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('KBOYのFlutter大学'),
      ),
      body: Container(
        width: double.infinity,
        child: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('${items[index]}'),
            );
          },
        ),
      ),
    );
  }
}

動的なサンプルは以下。スクロールして1万個itemを表示します。

また、

final items = List<String>.generate(10000, (i) => "Item $i");

の意味が分からないという方は、

  final items = ['kboy1', 'kboy2', 'kboy3', 'kboy4', 'kboy5', 'kboy6', 'kboy7'];

のように変更してビルドしなおしてみてください。

そしたらこうなります↑

要は変動するitemsに対して、何個来ても対応できるよーっていう書き方が、ListView.builderの書き方です。

まとめ

今回の記事は以上です。動画ではGridViewについての説明もしているので興味ある方は見てみてください。

https://www.youtube.com/watch?v=SHoTRjzc1lI

基本編の記事は以上です。ここまで来れば、頑張れば、作りたいUIは大体作れるはずです。さらにデータを保存したりする場合は、Firebaseの使い方を動画では紹介しているので参考にしてください。以上です!

参考文献

https://flutter.dev/docs/cookbook/lists
https://www.youtube.com/watch?v=SHoTRjzc1lI