3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-10-13

#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はよくわからぬ…

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?