✨App共通SnackBar - Ki-Kobayashi/flutter_wiki GitHub Wiki
🟩 SnackBarの作成と設定
🟡 AppSnackbarの作成
// 👇以下忘れずに!
final rootScaffoldMessengerKey = GlobalKey<ScaffoldMessengerState>();
class AppSnackBar {
static ScaffoldFeatureController<SnackBar, SnackBarClosedReason>
buildSnackBar({
required String content,
bool isErrorSnackBar = false,
}) {
return rootScaffoldMessengerKey.currentState!.showSnackBar(
SnackBar(
margin: const EdgeInsets.all(16.0),
behavior: SnackBarBehavior.floating,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
backgroundColor: isErrorSnackBar ? ConstColor.backgroundErrSnackbar : null,
content: Text(
content,
),
),
);
}
}
◆別解(Riverpod使用例だが、無理に使用しなくても良さそう).
// 👇以下忘れずに!
@Riverpod(keepAlive: true)
GlobalKey<ScaffoldMessengerState> scaffoldMessengerKey(
ScaffoldMessengerKeyRef ref,
) {
return GlobalKey<ScaffoldMessengerState>();
}
class AppSnackBar {
static ScaffoldFeatureController<SnackBar, SnackBarClosedReason>
buildSnackBar({
required String text,
Color? backgroundColor,
}) {
// 👇以下の方法を取る場合は、main.dart・MaterialApp.router(scaffoldMessengerKey:ref.watch(scaffoldMessengerKeyProvider),を指定する
return ref.read(scaffoldMessengerKeyProvider).currentState!.showSnackBar(
SnackBar(
margin: const EdgeInsets.all(16.0),
behavior: SnackBarBehavior.floating,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
backgroundColor: backgroundColor,
content: Text(
text,
),
),
);
}
}
.
🟡 application.dart
@override
Widget build(BuildContext context) {
final goRouter = ref.watch(routerProvider);
return MaterialApp.router(
scaffoldMessengerKey: rootScaffoldMessengerKey, 👈コッチの方がわかりやすい
scaffoldMessengerKey: ref.watch(scaffoldMessengerKeyProvider, 👈別解
...
.
🟩使い方
表示させたいタイミングで、以下を呼び出す
AppSnackBar.buildSnackBar(
content: errMessage,
isErrorSnackBar: true,
);
.
🟩
🟡
.
🟩
🟡
.
🟩
🟡
.
🟩
🟡
.
🟩
🟡
.
🟩
🟡
.
🟩
🟡
.