[Flutter]リストビュー(ListView)で枠線の角の丸みを設定するには？

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

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

方法

リストビューで枠線の角の丸みを設定するには、まずリストビューを「Container」の「child」に指定します。

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

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

そして、BoxDecorationの引数「borderRadius」に、「BorderRadius.circular(/*角の丸み*/)」を指定します。

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(/*丸み*/),
  ),
  child: ListView(
    children: [],
  ),
),

以下は、使用例です。

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(20),
    border: Border.all(color: Colors.blue),
  ),
  child: ListView(
    children: [
      for (var i = 0; i < 20; i++)
        ListTile(
          title: Text('$i'),
        )
    ],
  ),
)

まとめ

リストビューで角の丸みを設定するには、Containerウェジェットを使います。