[Flutter]Snackbarの使い方

Snackbarとは、例えばアプリのログイン画面で、入力フォームに入力した情報が間違っていた時、画面下部から長方形のバーが出てきて、「入力内容が間違っています」等とユーザーにお知らせするものです。Flutterでは、標準搭載の機能を使ってSnackbarを一瞬で実装できるので、紹介します。

Display a snackbar

コード例

SnackBarを表示するために、Material Designのレイアウトを提供するScaffold widgetを使用します。

Scaffold class - material library - Dart API

マテリアルデザイン（英語: Material Design）は、Googleが提唱したデザインシステム（設計体系）の一種、および、それを実現する開発技術や手法、デザイン、試みなどの総称である

https://ja.wikipedia.org/wiki/%E3%83%9E%E3%83%86%E3%83%AA%E3%82%A2%E3%83%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3

マテリアルデザイン - Wikipedia

以下に、Scaffoldを持つウィジェットでSnackBarを表示する簡単な例を示します。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter SnackBar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter SnackBar Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            final snackBar = SnackBar(
              content: Text('SnackBa'),
              action: SnackBarAction(
                label: 'Undo',
                onPressed: () {
                  // Some code to undo the change.
                },
              ),
            );
            ScaffoldMessenger.of(context).showSnackBar(snackBar);
          },
          child: Text('Show SnackBar'),
        ),
      ),
    );
  }
}

上記のコードでは、contentプロパティに Text('SnackBar')を書いており、ElevatedButtonがクリックされたときにSnackBarというテキストと共にSnackBarが表示されるようにしています。
Undoというラベルのアクションボタンもあり、ボタンがクリックされたときにSnackbarを閉じることができます。SnackBarのactionプロパティを使うと、このように何らかのアクションを追加できます。

ScaffoldMessenger.of(context).showSnackBar(snackBar);の行では、現在のBuildContextからScaffoldMessengerを取得し、そのshowSnackBarメソッドを呼び出してSnackBarを表示しています。

この例のように、FlutterではSnackBarを使ってユーザーに短時間のフィードバックを提供することができます。