[Flutter]ListView.builderの要素の背景色を変えるには？

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

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

方法

ListView.builderの要素の背景色を変えるには、まず「itemBuilder」で返すウェジェットを「Material」の「child」に指定します。

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

そして、Materialの引数「color」に要素の背景色を指定します。

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

これで要素の背景色を変えることが出来ます。

以下は、使用例です。

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