【Flutter】【1分で分かる】ListViewウィジェットの基本的な使い方【サンプル】

今回はFlutterでよく使う「ListView」ウィジェットについてです。

この記事で分かること

✅「ListView」ウィジェットって何？
✅「ListView」ウィジェットの基本的な使い方
✅「ListView」ウィジェットの主なプロパティとメソッドについて

目次

「ListView」ウィジェットとは

ListViewは一覧表示をしたい場合に利用するウィジェットです。ほとんどの場合、「ListTile」ウィジェットと一緒に使うことになります。

※ListTile・・・高さが固定された単一の行で、通常はテキストと先頭または末尾にアイコンが置けるウィジェットです。詳しくは下記を参照してください。

リスト項目が固定（静的）の場合

サンプルコード

class _MyHomePageState extends State<myhomepage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView(
        children: const <Widget>[
          ListTile(
            title: Text("aaa"),
          ),
          ListTile(
            title: Text("bbb"),
          ),
          ListTile(
            title: Text("ccc"),
          )
        ],
      ),
    );
  }
}

画面

説明

ListViewウィジェットの中に3つのListTileを直接記述しています。その中にTextウィジェットで表示文字を指定しています。

Textウィジェットについては下記を参照してください。

リスト項目が可変（動的）の場合

サンプルコード

class _MyHomePageState extends State<myhomepage> {
  final items = ["AAA","BBB","CCC","DDD"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index){
          return ListTile(
            title: Text(items[index]),
          );
        },
      ),
    );
  }
}

画面

説明

リスト項目が可変の場合は「ListView.builder()」を使います。「itemBuilder」プロパティで指定した関数の戻り値が画面に表示されることになります。

リスト項目間に線などのウィジェットを表示する場合

サンプルコード

class _MyHomePageState extends State<MyHomePage> {
  final items = ["AAA","BBB","CCC"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.separated(
        itemCount: items.length,
        itemBuilder: (context, index){
          return ListTile(
            title: Text(items[index]),
          );
        },
        separatorBuilder: (context, index){
          return const Divider(
            color: Colors.black,
          );
        },
      ),
    );
  }
}

画面

説明

リスト項目間に線や文字等を挟みたい場合は「ListView.separate()」を使うことができます。この例では、「separatorBuilder」内に「Divider」ウィジェットを記述して線を引いています。

まとめ

今回はFlutterのListViewウィジェットについて基本的な使い方を解説しました。一覧表示を実装する場面は多いと思うので、ここの内容はしっかりおさえておきましょう！

以上となります、最後までお読みいただきありがとうございました！

Flutterの基本をがっちり固めるためには以下記事で紹介している本がおすすめです。