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

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

ListView.builder

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

なるほど

ListViewの種類

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

• ListView

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

• ListView.buider

  • リストに大量の項目を表示する際に有効

• ListView.separated

  • 区切り線を付け加えたリストを構築する際に有効

• ListView.custom

  • 高度なカスタマイズが可能なリストを構築する際に有効。特殊なリストを作成する必要がなければ、ListView.builder で十分らしい。

ListView.builderを使ってみる

さて、ListView.builderとは何かがわかったところで、実際に実装してみます。


1.リストを用意。今回は文字列を45個用意しました。

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',
 ];

2.ListView.builderを使って、Listの中の要素を取り出す。

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

flutter

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

全体のコード

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の勉強しましょうね