[Flutter]SnackBarを角丸(rounded corner radius)にするには？

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

SnackBarを角丸にする方法を紹介します。

方法
使用例

方法

SnackBarを角丸にするには、引数「shape」を使います。

まず、SnackBarの引数「shape」にRoundedRectangleBorderを指定します。

そして、RoundedRectangleBorderの引数「borderRadius」に角の丸みを指定します。

角の丸みは、BorderRadiusクラスを使って指定します。

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('Message'),
    shape: RoundedRectangleBorder(
      borderRadius: /*BorderRadiusで角の丸みを設定*/,
    ),
  ),
);

引数「shape」を使えば、SnackBarを角丸にすることが出来ます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text('Message'),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20), //丸み２０
                  ),
                  behavior: SnackBarBehavior.floating,
                ),
              );
            },
            child: Text('Show'),
          ),
        ),
      ),
    );
  }