[Flutter]リストビュー(ListView)に影(shadow)をつけるには？

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

リストビューに影をつける方法を紹介します。

方法

リストビューに影をつけるには、まずリストビューを「Container」の「child」に指定します。

 Container(
  child: ListView(
    childre : []
  ),
)

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

そして、指定したBoxDecorationの引数「boxShadow」に「[BoxShadow()]」を指定します。

 Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow()
    ],
  ),
  child: ListView(
    childre : []
  ),
)

これでリストビューに影がつきます。

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: 300,
          width: 300,
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5),
                spreadRadius: 5,
                blurRadius: 7,
                offset: Offset(0, 0),
              )
            ],
            color: Colors.white,
          ),
          child: ListView.builder(
            itemCount: 20,
            itemBuilder: (context, index) {
              return Card(
                child: ListTile(
                  title: Text('$index'),
                ),
              );
            },
          ),
        ),
      ),
    );
  }