Zenn
🙆

[Flutter]ListView Widgetについての個人的まとめ

2022/07/24に公開
Flutter
Dart
tech

ListView Widgetとは

  • ListView Widgetはスクロールに対応したリストを表示できるWidget

(Column Widgetなどでは見切れてしまって、スクロール(画面外にもページがあるような仕様)に対応できなかった)

ListViewのコンストラクタたちとその使い方

リストの表示のUI。ListView,ListView.builder()どちらも以下UIを作れるが、要素数の指定方法の違いがある

1.ListView(数の前もっての指定)

  • サンプルコード
ListView(
  padding: const EdgeInsets.all(8),
  children: <Widget>[
    Container( // ListTileウィジェットでもOK
      height: 50,
      color: Colors.amber[600],
      child: const Center(child: Text('Entry A')),
    ),
    Container(
      height: 50,
      color: Colors.amber[500],
      child: const Center(child: Text('Entry B')),
    ),
    Container(
      height: 50,
      color: Colors.amber[100],
      child: const Center(child: Text('Entry C')),
    ),
  ],
)

Point

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

2.ListView.builder()　(数未定で要素数分だけListを長くする)

final List<String> entries = <String>['A', 'B', 'C'];
final List<int> colorCodes = <int>[600, 500, 100];

ListView.builder(
  padding: const EdgeInsets.all(8),
  itemCount: entries.length,　//List(List名).length
  itemBuilder: (BuildContext context, int index) {
    return Container(
      height: 50,
      color: Colors.amber[colorCodes[index]],
      child: Center(child: Text('Entry ${entries[index]}')),
    );
  }
);

Point

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

  • itemCountプロパティでリストの数を「List.length(ここでは１行目、List<String> entries)」で指定し、itemBuilderプロパティでindexを使いリストの要素を指定してWidgetを返す。

3.ListView.separated()

final List<String> entries = <String>['A', 'B', 'C'];
final List<int> colorCodes = <int>[600, 500, 100];

ListView.separated(
  padding: const EdgeInsets.all(8),
  itemCount: entries.length,  //List(List名).length
  itemBuilder: (BuildContext context, int index) {
    return Container(
      height: 50,
      color: Colors.amber[colorCodes[index]],
      child: Center(child: Text('Entry ${entries[index]}')),
    );
  },
  separatorBuilder: (BuildContext context, int index) => const Divider(),
);

Point

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

Dividerクラスについてはこちら

公式の説明(参考)

  • ListViewは、最も一般的に使用されるスクロールウィジェットです。子をスクロール方向に次々に表示します。交差軸では、子はListViewに入力する必要があります。
  • null以外の場合、itemExtentは、子にスクロール方向に指定された範囲を持たせるように強制します。
  • null以外の場合、prototypeItemは、スクロール方向で指定されたウィジェットと同じ範囲を持つように子を強制します。
  • itemExtentまたはprototypeItemを指定すると、スクロール位置が大幅に変更された場合など、スクロール機構が子の範囲の事前知識を利用して作業を節約できるため、子に自分の範囲を決定させるよりも効率的です。
  • itemExtentとprototypeItemの両方を指定することはできません。どちらか一方のみを指定するか、まったく指定しないでください。



以上です。間違えが見つかり次第、或いは知識がアップデートされ次第改訂していきます。🙏

公式記事
参考記事

GitHubで編集を提案

Discussion