[Flutter] SnackBar って何？

2023年4月28日2023年10月3日

Snackbarは、ユーザーに簡潔で重要な情報を伝えるための、GoogleのフレームワークであるFlutterで使用されるウィジェットです。Snackbarは画面の下部に短いメッセージを表示し、自動的に消えるため、アクションを必要としない通知に最適です。

snackbar の基本的な使い方

Snackbarを表示するには、ScaffoldMessengerのshowSnackBarメソッドを使用する必要があります。以下は、showSnackBarメソッドを使用してSnackbarを表示する簡単な例です。

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(content: Text('Hello, Snackbar!')),
);

上記のコードでは、ScaffoldMessenger.of(context)メソッドで現在のコンテキストのScaffoldMessengerを取得し、showSnackBarメソッドを呼び出して、引数としてSnackBarを渡しています。

SnackBarには、いくつかのプロパティを設定することができます。例えば、durationプロパティを使用して、表示される時間を指定することができます。以下は、表示時間を2秒に設定する例です。

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('Hello, Snackbar!'),
    duration: Duration(seconds: 2),
  ),
);

下記にSnackBar表示のためのサンプルコード全体の記載および、実行結果を載せています。実行結果を見ていただくと、ボタン押下後にSnackBarが表示され、2秒後にSnackBarの表示が消えているのがわかります。

import 'package:flutter/material.dart';

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

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

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: ElevatedButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
              content: Text('Hello, Snackbar!'),
              duration: Duration(seconds: 2),
            ),
          );
        },
        child: Text('Show Snackbar'),
      ),
    );
  }
}

また、actionプロパティを使用して、ユーザーがアクションを実行できるようにすることもできます。以下は、アクションを表示する例です。下記例では、SnackBarの右側に”Undo”ボタンを表示するようにしています。

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('Hello, Snackbar!'),
    action: SnackBarAction(
      label: 'Undo',
      onPressed: () {
        // ここにアクションを実行するコードを書く
      },
    ),
  ),
);

この例では、SnackBarActionを使用して、ラベルとアクションを設定しています。アクションが実行されたときに実行される関数を指定するために、onPressedプロパティに関数を渡します。

以上のように、SnackBarを簡単に使用することができます。必要に応じて、プロパティをカスタマイズして、アプリケーションのユーザーエクスペリエンスを向上させることができます。

SnackBar のプロパティ

SnackBarには以下のようなプロパティがあります。

content

SnackBarに表示されるテキスト、ウィジェット、またはその他の要素を指定します。通常、Textウィジェットを使用して簡単なテキストメッセージを表示することが多いです。

backgroundColor

SnackBarの背景色を指定します。デフォルトは、テーマのアクセントカラーです。

elevation

SnackBarの高さを指定します。デフォルトは6.0です。

shape

SnackBarの形状を指定します。デフォルトは、RoundedRectangleBorderで、borderRadiusは4.0です。

behavior

SnackBarがどのように振る舞うかを制御するSnackBarBehaviorを指定します。デフォルトは、SnackBarBehavior.floatingです。他に、SnackBarBehavior.fixedとSnackBarBehavior.floatingという2つの値があります。

action

SnackBarに表示するアクションを設定します。SnackBarActionウィジェットを使用して、ラベルとアクションを設定することができます。アクションが実行されると、SnackBarは自動的に非表示になります。

duration

SnackBarが表示される時間を指定します。Durationクラスを使用して、ミリ秒単位で指定することができます。デフォルトは、SnackBarBehavior.floatingの場合は、4秒、SnackBarBehavior.fixedの場合は、1.5秒です。

SnackBar のプロパティの使い方

content

contentプロパティは、SnackBarに表示されるテキスト、ウィジェット、またはその他の要素を指定します。以下は、Textウィジェットを使用してSnackBarにテキストを表示する例です。

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('This is a snackbar'),
  ),
);

backgroundColor

backgroundColorプロパティは、SnackBarの背景色を指定します。以下は、独自の背景色を指定する例です。

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('This is a snackbar'),
    backgroundColor: Colors.blueGrey,
  ),
);

elevation

elevationプロパティは、SnackBarの高さを指定します。以下は、高さを8.0に指定する例です。

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('This is a snackbar'),
    elevation: 8.0,
  ),
);

shape

shapeプロパティは、SnackBarの形状を指定します。以下は、RoundedRectangleBorderで角を丸めた形状を指定する例です。

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('This is a snackbar'),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),
    ),
  ),
);

behavior

behaviorプロパティは、SnackBarがどのように振る舞うかを制御するSnackBarBehaviorを指定します。以下は、SnackBarを固定位置に表示する例です。

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('This is a snackbar'),
    behavior: SnackBarBehavior.fixed,
  ),
);

action

actionプロパティは、SnackBarに表示するアクションを設定します。以下は、SnackBarActionウィジェットを使用してアクションを表示する例です。

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('This is a snackbar'),
    action: SnackBarAction(
      label: 'Action',
      onPressed: () {
        // アクションが押されたときの処理
      },
    ),
  ),
);

duration

durationプロパティは、SnackBarが表示される時間を指定します。以下は、SnackBarを2秒間表示する例です。

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('This is a snackbar'),
    duration: Duration(seconds: 2),
  ),
);

まとめ

FlutterのSnackbarは、ユーザーに簡潔で重要な情報を伝えるための便利なウィジェットです。コンテンツ、期間、背景色、形状、動作、アクション、onVisibleコールバックなどのプロパティを使用してカスタマイズできます。これにより、アプリケーションのユーザーエクスペリエンスを向上させることができます。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！