【Flutter】ListView.builder使い方を3分で解説!（サンプルコードあり）

スクロール可能なリストを簡単に作成したい。
FlutterのListView.builderの使い方がよく分からない。

ということで悩んでませんか？

そこで、今回はFlutterのListView.builderにおける基本的な使い方をサンプルコードとアプリ画面で解説します。

ListView.builderを使ことで、チャット・メッセージ、メモ帳アプリの画面を簡単に作成できます。

フリーランスのFlutterエンジニアとして働きたい方にオススメのエージェントはこちらで詳しく解説しています。

あわせて読みたい

Flutterフリーランスエージェントおすすめサイト5選！徹底比較！ Flutterの仕事をフリーランスでしたい！ どこのサイトがFlutter求人が多いのか知りたい！ そこで、今回はFlutterエンジニアの求人案件探しにオススメのサービス5選をご...

ListView.builder：スクロール可能なリストを簡単に作成できる

ListView、ListView.builderについてFlutter公式サイトをもとに解説します。ListViewを使えば、上記の画像のように簡単にスクロール可能なリストの画面を作成できます。

ListViewについて

A scrollable list of widgets arranged linearly.

（直訳）直線的に配置されたウィジェットのスクロール可能なリスト。

引用：Flutter公式サイト「ListView class」

ListView.builderについて

This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible.

（直訳）実際に表示されている子に対してのみビルダーが呼び出されるため、多数の (または無限の) 子を持つリストビューに適しています。

引用：Flutter公式サイト「ListView.builder constructor」

画面レイアウトに「表示させたいリスト数が決まってない時」や「多数のリストを表示させたい時」などで、動的に表示させるリスト数を変えたいときはListView.builderを使いましょう。

例えば、データベースからデータを取得して画面にリストを表示させたい時です。

ListView.builderのサンプルコード

ListView.builderのサンプルコードは以下の通りです。コピペでそのまま使えます。

import 'package:flutter/material.dart';

void main() => runApp(ListviewDemo());

class ListviewDemo extends StatelessWidget {

  //画面に描画するデータリスト作成
  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(title: Text('ListViewデモ'),
        ),
        body: ListView.builder(
          itemCount: texts.length, //要素の数　表示するデータ数の最大値（texts　listの最大値）
          //指定した要素の数分を生成
          itemBuilder: (context, index) {
            return ListTile( title: Text('${texts[index]}'),);
              },
        ),
      ),
    );
  }
}
       

ListView.builderで押さえておくべきポイントは以下の3点です。順番に解説していきます。

itemCount

itemCountは、GridViewの表示する値を設定する引数です。サンプルコードでは事前に定義したリストの最大数を設定してます。

itemBuilder

itembuilderでは事前に指定した要素の数に沿って、ウィジェットの作成をします。要素のWidgetを返す(context, index){}のような関数で指定します。

reverse

reverseを指定することでリストを下からスクロースすることが出来ます。

scrollDirection

scrollDirectionを指定する事で横スクロールが可能になります。

まとめ：Flutter入門者はListView.builderを押さえておくべき

今回の記事では、FlutterのListView.builderにおける基本的な使い方をサンプルコードとアプリ画面で解説しました。

ListView.builderで押さえておくべきポイントは以下の3点です。

Flutterエンジニアになるには？

初心者が中級者レベルのFlutterエンジニアなるまでの進め方をまとめました。

Flutterの学習方法を知る

あわせて読みたい

Flutter学習ロードマップ！０から初心者向けに完全解説！【2024年最新】 Flutterエンジニアになりたい Flutterエンジニアになるための学習ロードマップを知りたい これから、Flutterエンジニアを目指すならどうやったらなれるのか進め方は知っ...

Flutter をスクールで学ぶ

あわせて読みたい

Flutterプログラミングスクールおすすめ4社！36社の調査結果【完全公開】 Flutterでスマホアプリ開発をしたい！けど、挫折気味・・・ Flutterが学べるプログラミングスクールを知りたい！どこが良いのかな？ プログラミング初心者は疑問やエラ...

Flutterの副業を探す

あわせて読みたい

Flutterの副業案件おすすめのサイト3選！【週2・リモートあり】 Flutterで副業を始めたい！どこのサイトがおすすめか知りたい！ 週2,3日でスキルアップが望めるようなFlutterの案件をやりたい！どこのエージェントが良いかな？ 初めて...

おまけ：Flutter入門の完全ガイド

あわせて読みたい

【Flutter入門ガイド2024】知識ゼロから使い方・全体像が分かる！ Flutterの全体像がわからない。 Flutterの学習すべきことを知りたい。 新しいことを学習する際は全体像を捉えることが重要です。「今はここを学習してるんだな。」と実...