[Flutter]ListView.builderでヘッダー(header)を固定(fixed)表示するには？

[Flutter]ListViewでヘッダーを固定表示するには？

Flutter

2021.10.28

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

ListViewrでヘッダーを固定表示する方法を紹介します。

方法

ListViewでヘッダーを固定表示するには、Columnを使います。

まず、Column内でヘッダーとListViewrを並べます。

Column(
  children: [
    /*Header*/,
   ListView(
        children : []
   　),
  ],
),

そして、ListView.builderをExpandedの「child」に指定します。

Column(
  children: [
    /*Header*/,
   Expanded(
       child : ListView(
           children : [],
   　   ),
    )
  ],
),

これでヘッダーを固定表示することが出来ます。

以下は、使用例です。

body: Column(
  children: [
    Container(
      color: Colors.pink,
      height: 50,
      width: double.infinity,
      child: Text(
        'Header',
        style: TextStyle(color: Colors.white),
      ),
    ),
    Expanded(
      child: ListView(
        children: [
          for (var i = 0; i < 20; i++)
             Card(
                color: Colors.blue,
             ),
         ],
         itemExtent: 50,
      ),
    ),
  ],
),