[Flutter]リストビューの要素にグラデーションを設定するには？

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

リストビューの要素にグラデーションを設定する方法を紹介します。

方法

リストビューの要素にグラデーションを設定するには、まず要素を「Container」の「child」に指定します。

次に、Containerの引数「decoration」に「BoxDecoration」を指定します。

そして、BoxDecorationの引数「gradient」にグラデーションを設定します。

ListView(
  children: [
    Container(
      decoration: BoxDecoration(
          gradient : /*グラデーション*/,
       ),
       child: /*Item*/,
     ),
  ],
),

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: ListView(
          children: [
            for (var i = 0; i < 20; i++)
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: [Colors.blue, Colors.red],
                    ),
                  ),
                  child: ListTile(
                    title: Text('$i'),
                  ),
                ),
              ),
          ],
        ),
      ),
    );
  }