[Flutter]ListView.builderでヘッダー(header)を表示する方法

[Flutter]ListView.builderでヘッダーを表示する方法

Flutter

2021.10.29

どうも、ちょげ(@chogetarou)です。

ListView.builderでヘッダーを表示する方法を紹介します。

方法
1. 固定しない
2. 固定する
まとめ

方法

固定しない

固定しないヘッダーを表示する場合には、最初のインデックスでヘッダーを表示するようにします。

具体的には、「if文」で条件分岐して実装します。

ListView.builder(
  itemCount: /*count*/,
  itemBuilder: (context, index) {
    if (index == 0) {
      return /*Header*/;
    }
    return /*Item*/;
  },
)

固定する

ヘッダーを固定して表示する場合は、Columnを使います。

ヘッダーをColumnのchildrenで最初に指定し、その後にListViewを指定します。

Column(
  children: [
    /*ヘッダー*/,
    Expanded(
      child: ListView.builder(
        itemCount: /*count*/,
        itemBuilder: (context, index) {
          return /*Widget*/;
        },
      ),
    ),
  ],
),

ポイントは、ListView.builderをExpandedの「child」に指定する点です。

こうしないと表示されません。