[Flutter]リストビュー(ListView)に角丸の枠線をつけるには？

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

リストビューに角丸の枠線をつける方法を紹介します。

方法

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

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

次に、Containerウェジェットの「decoration」に「BoxDecoration」を指定します。

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

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

最後に、BoxDecorationの引数「border」に「Border.al(color : /*色*/)」を指定します。

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(/*丸み*/),
    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(
              borderRadius: BorderRadius.circular(20),
              border: Border.all(color: Colors.blue),
            ),
            child: ListView(
              children: [
                for (var i = 0; i < 20; i++)
                  ListTile(
                    title: Text('$i'),
                  )
              ],
            ),
          ),
        ),
      ),
    );
  }