[Flutter]SnackBarの形(shape)を設定するには？

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

SnackBarで表示するテキストの形を設定する方法を紹介します。

方法
使用例

方法

SnackBarの形を設定するには、引数「shape」を使います。

具体的には、SnackBarの引数「shape」にShapeBorderクラスを継承したクラスを指定します。

SnackBar(
  shape:/*ShapeBorderを継承したクラス*/,
  content: Text('Snackbar message'),
),

SnackBarの引数「shape」を使うことで、SnackBarの形を設定することが出来ます。

ShapeBorderのサブクラスで用意されているものは次の４つです。

RoundedRectangleBorder : 角丸の四角形
CircleBorder : 丸
ContinuousBorder : ただの四角形
BeveledRectangleBorder : 全てが直線で表現される四角形。角丸が特殊。

これらのインスタンスをSnackBarの引数「shape」に指定します。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  shape: BeveledRectangleBorder(
                    borderRadius: BorderRadius.circular(30),
                  ),
                  content: Text('Snackbar message'),
                ),
              );
            },
            child: Text('Show'),
          ),
        ),
      ),
    );
  }