【Flutter】ListViewの使い方｜スクロールできるリストを作る

2022 4/05

2022年2月20日 2022年4月5日

今回は「ListView」の基本的な使い方について紹介します。

ListViewを使えば複数のWidgetをリスト化してスクロール表示できます！

ListViewのコンストラクタ

今回は上記の「ListView」「ListView.builder」「ListView.separated」の基本的な使い方を順に紹介します。

ListView()

ListViewはリストで表示させる要素の数が少ない・決まっている場合などに使用されます。childrenプロパティで表示するWidgetを指定します。

  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter'),
        ),
        body: ListView(
          children: const [
            ListTile(
              title: Text('Hello World 1'),
            ),
            ListTile(
              title: Text('Hello World 2'),
            ),
            ListTile(
              title: Text('Hello World 3'),
            )
          ],
        ),
      ),
    );
  }

ListView.builder()

ListView.builder()はリスト化したいWidgetの数が多い・決まっていない場合などに使用されます。

itemCountプロパティでリストの数を「List.length」で指定し、itemBuilderプロパティでindexを使いリストの要素を指定してWidgetを返します。

...

class _MyAppState extends State<MyApp> {
  final items = List.generate(30, (index) => 'Hello World $index');

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter'),
        ),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            final item = items[index];
            return ListTile(title: Text(item));
          },
        ),
      ),
    );
  }
}

ListView.separated()

ListView.separated()を使えばchildrenのchildの間に区切りを作れます。separatorBuilderプロパティを使用して区切りの表示を指定します。

...

class _MyAppState extends State<MyApp> {
  final items = List.generate(30, (index) => 'Hello World $index');

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter'),
        ),
        body: ListView.separated(
          separatorBuilder: (context, index) => Divider(color: Colors.black),
          itemCount: items.length,
          itemBuilder: (context, index) {
            final item = items[index];
            return ListTile(title: Text(item));
          },
        ),
      ),
    );
  }
}

以上です。