MENU
SwiftUI/Flutter/Vue等でアプリ開発
  1. ホーム
  2. dev
  3. Flutter
  4. [Flutter] ListViewって何？

[Flutter] ListViewって何？

Flutter

FlutterはGoogleが開発するUIフレームワークであり、ListViewはFlutterの中でも頻繁に使用されるウィジェットの1つです。ListViewは、一定のスクロール領域内に表示されるスクロール可能なリストを作成するために使用されます。この記事では、FlutterのListViewの使い方について説明します。

目次

ListViewとは何ですか？

ListViewは、一定のスクロール領域内に表示されるスクロール可能なリストを作成するために使用されるFlutterのウィジェットです。ListViewは、大量のデータを効率的に処理することができ、Flutterのアプリ開発で非常に重要な役割を果たしています。

ListViewの使い方

FlutterのListViewを使用するには、以下の手順を実行する必要があります。

  1. ListViewをインポートする

FlutterでListViewを使用するためには、まずListViewをインポートする必要があります。

import 'package:flutter/material.dart';
  1. ListViewを作成する

ListViewを作成するには、ListView()コンストラクタを使用します。ListViewには、子要素として表示するウィジェットのリストを指定する必要があります。

ListView(
  children: [
    // ListViewの子要素
  ],
)
  1. ListViewに表示する要素を作成する

ListViewに表示する要素は、通常、ListTileウィジェットを使用して作成されます。ListTileには、アイコン、タイトル、サブタイトルなどの情報を表示するための多数のプロパティがあります。

ListView(
  children: [
    ListTile(
      leading: Icon(Icons.account_circle),
      title: Text('John Doe'),
      subtitle: Text('johndoe@example.com'),
    ),
    ListTile(
      leading: Icon(Icons.account_circle),
      title: Text('Jane Doe'),
      subtitle: Text('janedoe@example.com'),
    ),
  ],
)
  1. ListViewを表示する

最後に、作成したListViewを画面に表示する必要があります。これは、Scaffoldウィジェットを使用して実行できます。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigator',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListView Example'),
      ),
      body: ListView(
        children: [
          ListTile(
            leading: Icon(Icons.account_circle),
            title: Text('John Doe'),
            subtitle: Text('johndoe@example.com'),
          ),
          ListTile(
            leading: Icon(Icons.account_circle),
            title: Text('Jane Doe'),
            subtitle: Text('janedoe@example.com'),
          ),
        ],
      ),
    );
  }
}

ここから先のサンプルコードは ListView 部分のみ抜粋して記載します。

ListViewの種類

Flutterには、ListViewにさまざまな種類があります。主な種類は以下の通りです。

  • ListView: 通常のスクロールリスト
  • ListView.builder: 動的にアイテムを作成する場合に使用
  • ListView.separated: リストアイテムを区切り文字で区切る場合に使用
  • ListView.custom: カスタムスクロールリストを作成する場合に使用

これらの種類は、さまざまなアプリケーションで使用されます。ここでは、それぞれの種類の使い方を簡単に説明します。

ListView.builder

ListView.builderは、動的にリストアイテムを生成する場合に使用されます。例えば、APIから取得したデータをリストとして表示する場合に使用できます。このウィジェットは、アイテムの数が多くなる場合に効率的であり、スクロールパフォーマンスに優れています。

List<Map<String, dynamic>> items = [
  {"title": "テスト1", "description": "テスト結果は80点です。"},
  {"title": "テスト2", "description": "テスト結果は100点です。"},
  {"title": "テスト3", "description": "テスト結果は90点です。"},
];

ListView.builder(
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Text(items[index]["title"]),
      subtitle: Text(items[index]["description"]),
    );
  },
),

ListView.builderには、itemCountとitemBuilderの2つのプロパティがあります。itemCountは、リスト内のアイテム数を指定するために使用されます。itemBuilderは、リスト内の各アイテムを構築するために使用されます。itemBuilderは、アイテムのインデックスを受け取り、各アイテムのウィジェットを返す関数を指定する必要があります。

ListView.separated

ListView.separatedは、リストアイテムを区切り文字で区切る場合に使用されます。例えば、ユーザーの連絡先リストを表示する場合に、各アルファベットの区切りを表示することができます。

ListView.separated(
  itemCount: items.length,
  separatorBuilder: (BuildContext context, int index) => Divider(),
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Text(items[index].title),
      subtitle: Text(items[index].description),
    );
  },
)

ListView.separatedには、separatorBuilderプロパティが追加されます。このプロパティは、リストアイテムを区切るために使用されるウィジェットを返す関数を指定する必要があります。

ListView.custom

ListView.customは、カスタムスクロールリストを作成する場合に使用されます。例えば、Googleマップのようなスクロール可能な地図を作成する場合に使用できます。

ListView.custom(
  childrenDelegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) {
      return Container(
        height: 100,
        child: Text('Item $index'),
      );
    },
    childCount: 20,
  ),
)

ListView.customには、childrenDelegateプロパティがあります。childrenDelegateは、SliverChildBuilderDelegateオブジェクトを受け取ります。

SliverChildBuilderDelegateオブジェクトは、ListView.builderと同じように、ウィジェットを動的に生成するために使用されます。childCountプロパティは、リスト内のアイテム数を指定するために使用されます。

ListViewウィジェットの追加のプロパティ

以下のプロパティを使用して、ListViewのスクロール動作をカスタマイズすることができます。

  • scrollDirection: スクロール方向を設定します。Axis.horizontalまたはAxis.verticalを指定することができます。
  • controller: スクロール位置を制御するために使用されます。ScrollControllerを指定する必要があります。
  • physics: スクロール動作を制御するために使用されます。AlwaysScrollableScrollPhysicsやBouncingScrollPhysicsなどのScrollPhysicsオブジェクトを指定することができます。
  • padding: ListView内のアイテムの周囲に余白を設定するために使用されます。
ListView(
  scrollDirection: Axis.horizontal,
  controller: _scrollController,
  physics: BouncingScrollPhysics(),
  padding: EdgeInsets.all(16.0),
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

これらのプロパティを使用して、ListViewのスクロール動作をカスタマイズすることができます。

まとめ

以上が、FlutterのListViewについての基本的な使い方の紹介です。各種類のListViewについて説明し、ListViewの追加のプロパティを紹介しました。これらの情報を基に、ListViewを使って簡単なリストを作成することができます。

上記サンプルコードでも記載しているとおり、ListViewウィジットではListTileを利用します。ListTileについては、別記事でまとめていますので、よかったら見てみてください。

あわせて読みたい
[Flutter] ListTle の使い方 FlutterにおけるListTileは、タイトル、サブタイトル、アイコンなどの要素を含む、一般的なリストアイテムを表します。このウィジェットは、ListViewのリストビュー内で…
Flutter
ウィジット
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次