[Flutter]ListView.builderで背景色を変える方法

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

ListView.builderで背景色を変える方法を紹介します。

方法

ListView.builderで背景色を変えるには、まずListView.builderをContainerの「child」に指定します。

Container(
  child: ListView.builder(
    itemCount: /*count*/,
    itemBuilder: (context, index) {
      return /*Item*/;
    },
  ),
),

そして、Containerの引数「color」に背景色にしたい色を指定します。

Container(
  color: /*Color*/,
  child: ListView.builder(
    itemCount: /*count*/,
    itemBuilder: (context, index) {
      return /*item*/;
    },
  ),
),

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.green,
        child: ListView.builder(
          itemCount: 30,
          itemBuilder: (context, index) {
            return Card(
              child: ListTile(
                title: Text('$index'),
              ),
            );
          },
        ),
      ),
    );
  }