Flutter入門5_リスト作成

Flutter関連の投稿です。

備忘録として使用する予定ですが
皆さんの解決策にもなれば幸いです。
じゃんじゃん投稿してます！！笑

今回はFlutterのリスト作成に関して記載します。


目次
-完成イメージ
-1.構成
-2.リスト作成①_first_page.dartの整理
-3.おまけ　リスト作成_Culumnのようなコードでリスト作成
-4.リスト作成②_簡単なListViewを作成する
-5.リスト作成③_フォントサイズ・空白・色付けをする
-6.リスト作成④_リストを線で区切る・文字から数字に変える
-7.全体コード
-参考文献
-最後に




# 完成イメージ
・前回の記事からファースト画面にリストを作成する
　※下記前回記事
 　　今回は前回記事を参考にしなくも可

https://qiita.com/ds0743/items/93a2d7d99f0b49e3bb3b

・リストごとにラインも入れる
・リスト作成時にスクロール機能も付けるようにする
<img width="40%" alt="listview①_GIF.gif" img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3121562/29cb4bb9-6c88-ccb5-831d-c66bd7dc3ea9.gif">


## 1.構成
・first_page.dartのコードを整理をする
・

## 2.リスト作成①_first_page.dartの整理
・first_page.dartの不要Widgetを削除する
```php:first_page.dart
import 'package:flutter/material.dart';

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: const Text('リスト'),
      ),
      body: Container(),
    );
  }
}
```

## 3.おまけ　リスト作成_Culumnのようなコードリスト作成
完成イメージから少し逸れますが
違う記載方法もあるよということで先におまけを記載します。
※基本はこの後に説明する記載方法が多いようです。
・bodyにListView Widgetを記載する
・ListView Widgetの中にContainerを入れ色や高さなどを設定する
```php:first_page.dart
import 'package:flutter/material.dart';

class FirstPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: const Text('リスト'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(8),
        children: <Widget>[
          Container(
            height: 50,
            color: Colors.amber[600],
            child: const Center(child: Text('Entry A')),
          ),
          Container(
            height: 50,
            color: Colors.amber[500],
            child: const Center(child: Text('Entry B')),
          ),
          Container(
            height: 50,
            color: Colors.amber[100],
            child: const Center(child: Text('Entry C')),
          ),
        ],
      ),
    );
  }
}
```
上記のContainerを複数個付け足すことで下記の動画のように表示される
ListViewはCoulmnと違い
<font color="Red">リストが増えるとスクロール機能を自動で付けてくれる</font>
<img width="40%" alt="listview②_GIF.gif" img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3121562/67f7125a-dcd1-dbd5-1a7c-21c00695f455.gif">


## 4.リスト作成②_簡単なListViewを作成する
・変数を定義する
・bodyにListView.builder Widgetを入れる
　<font color="Red">こちらもスクロール機能が自動で付いている</font>
　※itemCount ＝　0から始まる配列の数を表す　
 　　　　　　　　　entries.lengthは配列の長さに合わせている
 　　　　　　　　　例：itemCount: 0の場合→Aのみリスト表示される
　　　　　　　　　　　 itemCount: 2の場合→A・B・Cがリスト表示される
　　　　　　　　 　　　itemCount: entries.lengthの場合　
　　　　　　　　　　　　　　　　　　→A・B・C・daichi・yamadaがリスト表示される

　　itemBuilder＝　itemCountの数だけ実行される
  　　　　　　　　　Text内に変数${entries[index]}を入れてList entriesを順番に
　　　　　　　　　呼び出している
```php:first_page.dart
import 'package:flutter/material.dart';

class FirstPage extends StatelessWidget {
  final List<String> entries = <String>['A', 'B', 'C', 'daichi', 'yamada'];
```
```php:first_page.dart
      body: ListView.builder(
          itemCount: entries.length,
          itemBuilder: (BuildContext context, int index) {
            return Center(child: Text('Entry ${entries[index]}'));
          }),
```
<img width="30%" alt="llistview③.png" img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3121562/0da78598-601f-3208-bfb7-0b600ea7eec9.png">

## 5.リスト作成③_フォントサイズ・空白・色付けをする
・フォントサイズを入れる
・空白を入れる
・色付けをする
```php:first_page.dart
      body: ListView.builder(
          itemCount: entries.length,
          itemBuilder: (BuildContext context, int index) {
            return Center(
              child: Container(
                color: Colors.yellow,//←色付け
                padding: const EdgeInsets.all(8.0),//←空白
                child: Text(
                  'Entry ${entries[index]}',
                  style: TextStyle(fontSize: 30),//←フォントサイズ
                ),
              ),
            );
          }),
```
<img width="30%" alt="listview④.png" img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3121562/94fbd634-7c2d-24d6-8a79-d17025bc71e1.png">

## 6.リスト作成④_リストを線で区切る・文字から数字に変える
・リストを区切るためにbody: ListView.separated()に変更する
・separatorBuilder: (BuildContext context, int index) 〜を加える
・リスト内のEntryを削除
・変数をint型にし、リストを数値に変更する

```php:first_page.dart
      body: ListView.separated( //←ListView.separatedへ変更
        itemCount: entries.length,
        itemBuilder: (BuildContext context, int index) {
          return Center(
            child: Container(
              color: Colors.yellow,
              padding: const EdgeInsets.all(8.0),
              child: Text(
                ' ${entries[index]}',//←Entryの削除
                style: TextStyle(fontSize: 30),
              ),
            ),
          );
        },
        separatorBuilder: (BuildContext context, int index) => const Divider(
          color: Colors.black,//←separatorBuilder: 〜の追加
        ),
      ),
```
```php:first_page.dart
import 'package:flutter/material.dart';

class FirstPage extends StatelessWidget {
  final List<int> entries = [0, 1, 2, 9, 9];//←int型へ変更し、リストを数値に変更
```

これで完成！！！

## 7.全体コード
```php:first_page.dart
import 'package:flutter/material.dart';

class FirstPage extends StatelessWidget {
  final List<int> entries = [0, 1, 2, 9, 9];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: const Text('リスト'),
      ),
      body: ListView.separated(
        itemCount: entries.length,
        itemBuilder: (BuildContext context, int index) {
          return Center(
            child: Container(
              color: Colors.yellow,
              padding: const EdgeInsets.all(8.0),
              child: Text(
                ' ${entries[index]}',
                style: TextStyle(fontSize: 30),
              ),
            ),
          );
        },
        separatorBuilder: (BuildContext context, int index) => const Divider(
          color: Colors.black,
        ),
      ),
    );
  }
}
```

## 参考文献
Flutter大学. 「Flutter超入門2022】⑤リストを作る方法【Flutter3.0】」.　YouTube.　2022/06,https://www.youtube.com/watch?v=BMREPjjgXjE,
（参照 2024-06-22）
Flutter. 「ListView class」. 更新日不明,
https://api.flutter.dev/flutter/widgets/ListView-class.html, (参照 2024-06-22)



## 最後に
・indexが入ってきたので若干コードらしくなって来たかと思いました。
・自動でスクロール機能もあるので便利！
・おまけと比較しても説明したやり方の方が開発速度も早いし
　リファクタリングに使用できそうです！！
・次は今までの基本の復習に入ろうと思います。