Flutter 通知 UI まとめ
Flutter における「SnackBar と類似する表示 UI コントローラ」まとめ
Flutter には、SnackBar のように「特定の UI を API で呼び出す」仕組みが複数あります。
SnackBar は ScaffoldMessenger.of(context).showSnackBar() で表示できますが、同じような専用コントローラを持つ UI を以下に整理しました。
SnackBar に似た UI コントローラ一覧
1. MaterialBanner（ScaffoldMessenger 管理）
ScaffoldMessenger.of(context).showMaterialBanner(banner);
- SnackBar：画面下
- MaterialBanner：画面上
2. BottomSheet（showBottomSheet / showModalBottomSheet）
・ローカル BottomSheet（Scaffold 管理）
Scaffold.of(context).showBottomSheet(
(context) => Container(height: 200),
);
・モーダル BottomSheet（Navigator 管理）
showModalBottomSheet(
context: context,
builder: (_) => Container(height: 200),
);
3. Dialog（showDialog）
showDialog(
context: context,
builder: (_) => AlertDialog(
title: Text("通知"),
content: Text("SnackBar より強く伝えたい内容"),
),
);
4. Toast（Flutter プラグイン）
Fluttertoast.showToast(msg: "Hello");
5. OverlayEntry（完全カスタム通知）
final overlay = OverlayEntry(
builder: (_) => Positioned(
top: 50,
child: Material(
child: Text("カスタム通知"),
),
),
);
Overlay.of(context).insert(overlay);
6. BottomSheet Controller
final controller = Scaffold.of(context).showBottomSheet(
(_) => Container(height: 200),
);
// 閉じる
controller.close();
SnackBar に近い順ランキング
- MaterialBanner
- BottomSheet
- Dialog
- Toast
- Overlay
ScaffoldMessenger が扱う UI
・SnackBar
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(...),
);
・MaterialBanner
ScaffoldMessenger.of(context).showMaterialBanner(
MaterialBanner(...),
);
目的別おすすめ UI
| 目的 | UI | 理由 |
|---|
| 軽い通知 | SnackBar | 画面下に控えめに表示 |
| 重要通知 | MaterialBanner | 目立つ位置に固定 |
| 操作含む UI | BottomSheet | 広い領域を表示可能 |
| 警告 | Dialog | 操作を止めて表示 |
| 軽量通知 | Toast | モバイル的通知 |
| 特殊カスタム | OverlayEntry | 自由な UI が作れる |
各 UI 比較表
| 項目 | SnackBar | MaterialBanner | BottomSheet | Dialog | Toast | OverlayEntry |
|---|
| 主な用途 | 軽い通知 | 重要通知 | 操作 UI | 警告 | 軽量通知 | カスタム通知 |
| 表示位置 | 下 | 上 | 下から | 中央 | 下/中央 | 自由 |
| 管理 | ScaffoldMessenger | ScaffoldMessenger | Scaffold/Navigator | Navigator | プラグイン | Overlay |
| 自動で消える | ○ | × | × | × | ○ | × |
cmatrix_blog
