記事一覧

SnackBar

SnackBarを使う場合いくつかの方法があります。一番単純なのはStatelessWidgetを使った方法です。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SnackBar'),
        ),
        body: SnackBarPage(),
      ),
    );
  }
}

class SnackBarPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        onPressed: () {
          final snackBar = SnackBar(
            content: Text('お知らせ！'),
            action: SnackBarAction(
              label: 'とじる',
              onPressed: () {
                Scaffold.of(context).removeCurrentSnackBar();
              },
            ),
            duration: Duration(seconds: 3),
          );
          Scaffold.of(context).showSnackBar(snackBar);
        }, 
        child: Text('スナックバーを開く'),
      ),
    );
  }
}

スナックバーを表示するにあたり、まずは表示したい情報をSnackBarクラスで作成します。

  final snackBar = SnackBar(
    content: Text('お知らせ！'),
  ),

作成したSnackBarをScaffold.ofのshowSnackBarに渡すことで、Scaffoldで作成されている画面の下部からスナックバーが表示されます。

  Scaffold.of(context).showSnackBar(snackBar);

スナックバーには、actionによるボタン追加やdurationによる表示時間の制御が可能です。

さらに詳細に説明すると以下のようになっています。

Scaffold.ofは、ScaffoldStateを取得しスナックバーの表示とアニメーションを管理します。
ScaffoldState.showSnackBarを表示するの時に利用します。
ScaffoldState.removeCurrentSnackBarは現在表示されている、スナックバーがある場合非表示にします。
SnackBarActionは、スナックバー内で表示するボタンを作成できます。

StatefulWidgetでスナックバーを表示したい場合は以下のようにします。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SnackBar'),
        ),
        body: MainPage()
      )
    );
  }
}

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {

  @override
  Widget build(BuildContext context) {
    return Center(
        child: RaisedButton(
          onPressed: (){
            final snackBar = SnackBar(
              content: Text('お知らせ！'),
            );
            Scaffold.of(context).showSnackBar(snackBar);
          },
          child: Text('スナックバーを開く'),
        )
    );
  }
}

この時、_MainPageStateクラス内にhome: Scaffold(が定義されていると正しく動作しないため注意が必要です。

どうしても_MainPageStateクラス内にScaffoldを定義したい場合は以下のようにGlobalKeyによりScaffoldStateを持つこと、作成することが可能です。

class _MainPageState extends State<MainPage> {

  final GlobalKey<ScaffoldState> _scaffoldstate = new GlobalKey<ScaffoldState>();

  void _showBar(){
    _scaffoldstate.currentState.showSnackBar(new SnackBar(content: new Text('お知らせ！')));
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      key: _scaffoldstate,
      appBar: AppBar(
        title: Text('SnackBar'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: _showBar,
          child: Text('スナックバーを開く'),
        )
      ),
    );
  }
}

SnackBar

SnackBar

新着記事