[Flutter]ListView.builderをColumn内で使えるようにするには？

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

ListView.builderをColumn内で使えるようにする方法を紹介します。

方法

ListView.builderをColumn内で使えるようにする方法は２つあります。

Container

１つは、Containerウェジェットを使う方法です。

ListView.builderをContainerの「child」に指定します。

そして、Containerの引数「height」で高さを指定します。

body: Column(
  children: [
    Container(
      height: 500,
      child: ListView.builder(
        ・・・
      ),
    ),
  ],
),

SingleChildScrollView

もう１つは、SingleChildScrollViewを使う方法です。

まずCulumnを「SingleChildScrollView」の「child」に指定します。

SingleChildScrollView(
  child: Column(
    children: [
      ListView.builder(
        ・・・
      ),
    ],
  ),
),

そして、ListView.builderの引数「shrinkWrap」に「true」、引数「physics」に「NeverScrollableScrollPhysics()」を指定します。

SingleChildScrollView(
  child: Column(
    children: [
      ListView.builder(
        physics: NeverScrollableScrollPhysics(),
        shrinkWrap: true,
        itemCount: /*count*/,
        itemBuilder: (context, index) {
          return /*Widget*/;
        },
      ),
    ],
  ),
),

これでColumn内でListView.builderが使えるようになります。

以下は、使用例になります。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            ListView.builder(
              physics: NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              itemCount: 20,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text('$index'),
                );
              },
            ),
          ],
        ),
      ),
    );
  }

まとめ

ListView.builderをColumn内で使えるようにする方法は、次の２つです。

• Containerでラップし、Containerの高さを設定する方法
• SingleChildScrollViewでラップし、builderの引数に特定の設定をする方法