【flutter初心者向け】同期の口癖「ListView.builder」

こんにちは！
最近flutterを勉強している同期が、口癖のように`ListView.builder`という言葉を発しています。
`ListView.builder`って使ったことないな〜と思い、勉強がてら執筆してみました。

# ListView.builder
スクロール可能なリストを簡単に作成できるウィジェット。
画面レイアウトに「表示させたいリスト数が決まってない時」や「多数のリストを表示させたい時」などで、動的に表示させるリスト数を変えたいときに
`ListView.builder`を使うらしい。
例えば、データベースからデータを取得して画面にリストを表示させたい時など。

なるほど:thumbsup:

# ListViewの種類
`ListView.builder`を調べていくと、どうやら４種類の「ListView」があることがわかりました:information_desk_person:`ListView.builder`しか言葉を発さない同期は、このことを知らないでしょう:stuck_out_tongue_winking_eye:

- `ListView`
    - 通常のスクロール可能なリストを構築するウィジェット

- `ListView.buider`
    - リストに大量の項目を表示する際に有効
- `ListView.separated`
    - 区切り線を付け加えたリストを構築する際に有効
- `ListView.custom`
    - 高度なカスタマイズが可能なリストを構築する際に有効。特殊なリストを作成する必要がなければ、ListView.builder で十分らしい。


# ListView.builderを使ってみる
さて、`ListView.builder`とは何かがわかったところで、実際に実装してみます。
<br>
1.リストを用意。今回は文字列を45個用意しました。
 ```dart:flutter
 final List<String> texts = [
    'text1', 'text2', 'text3', 'text4', 'text5', 'text6', 'text7', 'text8', 'text9',
    'text10', 'text11', 'text12', 'text13', 'text14', 'text15', 'text16', 'text17',
    'text18', 'text19', 'text20', 'text21', 'text22', 'text23', 'text24', 'text25',
    'text26', 'text27', 'text28', 'text29', 'text30', 'text31', 'text32', 'text33',
    'text34', 'text35', 'text36', 'text37', 'text38', 'text39', 'text40', 'text41',
    'text42', 'text43', 'text44', 'text45',
  ];
```
<br>
<br>

2.ListView.builderを使って、Listの中の要素を取り出す。
- itemCount
`itemCount: texts.length`はtextsという名前のListの最大の要素数を指定しています。
`itemCount: 5`にすると5個分の要素が出てきます。つまり、「text1,text2,text3,text4,text5」が出てきます。
- itemBuilder
itembuilderでは事前に指定した要素の数に沿って、ウィジェットの作成をします。
(context, index){}のような関数で指定します。
今回は、ListTileのウィジェットを返しました！

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

全体のコード
 ```dart:flutter
import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: MainApp()));
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
 final List<String> texts = [
    'text1', 'text2', 'text3', 'text4', 'text5', 'text6', 'text7', 'text8', 'text9',
    'text10', 'text11', 'text12', 'text13', 'text14', 'text15', 'text16', 'text17',
    'text18', 'text19', 'text20', 'text21', 'text22', 'text23', 'text24', 'text25',
    'text26', 'text27', 'text28', 'text29', 'text30', 'text31', 'text32', 'text33',
    'text34', 'text35', 'text36', 'text37', 'text38', 'text39', 'text40', 'text41',
    'text42', 'text43', 'text44', 'text45',
  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.pink,
        title: const Text("Flutter!!!!"),
      ),
      body: ListView.builder(
        itemCount: texts.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('${texts[index]}'),
          );
        },
      ),
    ));
  }
}

```

# 最後に
ここまで読んでいただき、ありがとうございます！
`ListView.builder`に詳しくなれたでしょうか？
また一緒にflutterの勉強しましょうね:muscle: