[Flutter]リストビュー(ListView)の枠線(border)の色(color)を設定するには？

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

リストビューの枠線の色を設定する方法を紹介します。

方法

リストビューの枠線の色を設定するには、まずリストビューをContainerウェジェットの引数「child」に指定します。

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

そして、BoxDecorationの引数「border」に「Borde.all(color : /*色*/)」を指定します。

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: /*色*/,
    ),
  ),
  child: ListView(
    children: [],
  ),
),

これでリストビューの枠線の色を設定できます。

以下は、使用例です。

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