FlutterでSnackBarを共通部品化するのは意外と面倒だった

SnackBarの記事は世に溢れている

FlutterでSnackBarを出す方法を調べると簡単に情報が出てくる。

// ボタンを押したらスナックバーを出す
onPressed: () {
  // 変数snackbarの中に表示したい情報を詰める
  final snackbar = SnackBar(
      content: Text('10秒後に消えます'),
      action: SnackBarAction(
        label: '閉じる',
        // 閉じるボタンを押したら
        onPressed: () {
          Scaffold.of(context).removeCurrentSnackBar();
        },
      ),
      // 何秒後に消えるか
      duration: Duration(seconds: 10),
    );
  // ここで変数snackbarの中身を表示
  Scaffold.of(context).showSnackBar(snackbar);
},

しかしこのスナックバーをどこからでも呼び出せる共通部品にしようとした時、どうやってもうまくいかなかった。

色々模索した結果
・returnしない
・Builderで囲う
のがコツだとわかった

// CenterをBuilderで囲ってcontextを渡せるようにしてあげる
body: Builder(builder: (BuildContext context) {
        return Center(
          child: Column(
            children: [
              RaisedButton(
                child: Text('スナックバー表示'),
                color: Colors.blue,
                textColor: Colors.white,
                onPressed: () {
                  // contextを引数にしてカスタムスナックバーに渡す
　　　　　　　　　　　// 他の変数も用意すれば渡せる
                  final snackbar = CustomSnackBar(context);
                  Scaffold.of(context).showSnackBar(snackbar);
                },
              ),
            ],
          ),
        );
      })



// スナックバーを部品化したクラス
class CustomSnackBar extends SnackBar {
// Widget build とか　returnは書かない
  CustomSnackBar(BuildContext context) : super(
    content: Text('10秒後に消えます'),
    action: SnackBarAction(
      label: '閉じる',
      onPressed: () {
        Scaffold.of(context).removeCurrentSnackBar();
      },
    ),
    duration: Duration(seconds: 10),
  );
}

Flutterはよくわからぬ…