【Flutter】SnackBarの使い方｜ScaffoldMessengerで表示させる

2023年2月2日2023年2月6日

Flutterのウィジェット「SnackBar」の使い方を紹介します。

「SnackBar」ではアクションボタン付きの通知バナーを表示できます。今回は「ScaffoldMessenger」を使用してスナックバーを表示させていきます。

SnackBarの表示（アクションボタンなし）

まずはアクションボタンなしのシンプルなスナックバーを表示させる方法を紹介します。

また、今回はウィジェットツリーのルートとなる「MyApp」と、SnackBarを実装する「SnackBarPage」の2つの自作クラスを使用します。

ステップ１：Scaffoldを作成

MyAppクラスで「Scaffold」を作成します。

SnackBarPageクラスをbodyプロパティに渡します。

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

ステップ２：SnackBarの実装

今回はスナックバーを表示するのに「ScaffoldMessenger」と「SnackBar」を使用します。

「SnackBar」ではスナックバーの装飾などを指定し、「ScaffoldMessenger」のshowSnackBarメソッドを実行してスナックバーを表示します。

const snackBar = SnackBar(
  content: Text('SnackBarが表示されました!'),
);

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

SnackBarPageクラス全体のコードは下記の通りです。

class SnackBarPage extends StatelessWidget {
  const SnackBarPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: Text('SnackBarを表示'),
        onPressed: () {
          const snackBar = SnackBar(
            content: Text('SnackBarが表示されました!'),
          );

          ScaffoldMessenger.of(context).showSnackBar(snackBar);
        },
      ),
    );
  }
}

SnackBarの表示（アクションボタンあり）

スナックバーにアクションボタンを追加したい場合は「action」に「SnackBarAction」を渡します。SnackBarActionの「label」で表示文字、「onPressed」でボタンが押されたときの処理を指定できます。

final snackBar = SnackBar(
  content: Text('SnackBarが表示されました!'),
  action: SnackBarAction(
    label: 'OK',
    onPressed: () {},
  ),
);

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

class SnackBarPage extends StatelessWidget {
  const SnackBarPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: Text('SnackBarを表示'),
        onPressed: () {
          final snackBar = SnackBar(
            content: Text('SnackBarが表示されました!'),
            action: SnackBarAction(
              label: 'OK',
              onPressed: () {},
            ),
          );

          ScaffoldMessenger.of(context).showSnackBar(snackBar);
        },
      ),
    );
  }
}

以上です。