特定のアクションが行われた時に、ユーザに簡単に知らせることができます。
（例えば、ユーザがリスト内のメッセージをスワイプして削除した時、そのメッセージが削除されたことを知らせたい場合に有効です。（キャンセル処理も検討して下さい））
上記は次の手順により、Material3 デザインのスナックバーで実現できます。
１．Scaffold 構築
２．SnackBar 表示
３．Optional action 提供
１．Scaffold による視覚的構造作成
マテリアルデザインのガイドラインに従ってアプリを作成する場合は、アプリに一貫したビジュアル構造を持たせましょう。（ここでは、FloatingActionButtonなどの他の重要なウィジェットと重ならないように、SnackBarを画面の下部に表示しています。）
マテリアル・ライブラリのScaffoldウィジェットは、この視覚的な構造を作り出し、重要なウィジェットが重ならない様にしましょう。
Scaffoldウィジェットは、この視覚的な構造を作り出し、重要なウィジェットが重ならない様にしましょう。
return MaterialApp(
title: 'スナックバー サンプル',
home: Scaffold(
appBar: AppBar(
title: const Text('スナックバー サンプル'),
),
body: const SnackBarPage(),
),
);２．SnackBar 表示
SnackBarを作成し、ScaffoldMessengerを使って表示します。
SnackBarを作成し、ScaffoldMessengerを使って表示します。
const snackBar = SnackBar(
content: Text('これはスナックバーです'),
);
//ウィジェット ツリーで ScaffoldMessenger を見つけ、
//それを使用して SnackBar を表示します。
ScaffoldMessenger.of(context).showSnackBar(
snackBar
);３．Optional action 提供
SnackBarが表示された時に、ユーザーにアクションを提供したい場合があります。
例えば、ユーザが誤ってメッセージを削除してしまった場合、SnackBarのオプショ ンのアクションを使用してメッセージを復元することができます。
以下は、SnackBarウィジェットに追加アクションを提供する例です。
SnackBarウィジェットに追加アクションを提供する（例）：
final snackBar = SnackBar(
content: const Text('Yay! A SnackBar!'),
action: SnackBarAction(
label: 'Undo',
onPressed: () {
//変更を元に戻すためのコード
},
),
);４．サンプルコード
この例では、ユーザーがボタンをタップするとSnackBarが表示されます。
ユーザー入力を使用する方法の詳細については、クックブックのジェスチャーのセクションを参照して下さい。
Dart
import 'package:flutter/material.dart';
void main() => runApp(const SnackBarDemo());
class SnackBarDemo extends StatelessWidget {
const SnackBarDemo({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'SnackBar Demo',
home: Scaffold(
appBar: AppBar(
title: const Text('SnackBar Demo'),
),
body: const SnackBarPage(),
),
);
}
}
class SnackBarPage extends StatelessWidget {
const SnackBarPage({super.key});
@override
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
onPressed: () {
final snackBar = SnackBar(
content: const Text(
'Yay! A SnackBar!'
),
action: SnackBarAction(
label: 'Undo',
onPressed: () {
//変更を元に戻すためのコード
},
),
);
//ウィジェット ツリーで ScaffoldMessenger を見つけ、
//それを使用して SnackBar を表示します。
ScaffoldMessenger.of(context).showSnackBar(
snackBar
);
},
child: const Text('Show SnackBar'),
),
);
}
}