✨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,
);

.

🟩

🟡

.

🟩

🟡

.

🟩

🟡

.

🟩

🟡

.

🟩

🟡

.

🟩

🟡

.

🟩

🟡

.