Blog スタッフブログ

Android Flutter iOS システム開発 ひとくちコードスニペット

[Flutter]特定の画面でだけ通知を表示するコードスニペット

こんにちは、株式会社MIXシステム開発担当のBloomです。

今回はFlutterで利用できるコードスニペットを紹介します。まずはパッケージのインストールから行いましょう。

flutter pub add overlay_support

次にオーバーレイを利用するためにMaterialAppを丸ごとOverlaySupport.globalでラップしてしまいましょう。navigatorKeyも必須です。

final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return OverlaySupport.global(
        child: MaterialApp(
      title: 'Your App',
      navigatorKey: navigatorKey,
      home: const MyPage(),
    ));
  }
}

それでは、通知を表示しましょう。

import 'package:overlay_support/overlay_support.dart';

class NotificationManager extends ChangeNotifier {
  // シングルトンインスタンス
  static final NotificationManager _instance = NotificationManager._internal();

  factory NotificationManager() => _instance;

  NotificationManager._internal();

  Future<void> initialize() async {
    notifyListeners();
  }

  // ここで表示対象でない画面のクラスを定義しておきます
  final List<Type> excludedWidgetTypes = [NoNotifyScreenClass];

  void showNotification(String message, Function() onPressed) {
    final context = navigatorKey.currentContext;
    if (context != null) {
      final Widget? topWidget = _getTopWidget(context);
      if (topWidget != null && excludedWidgetTypes.contains(topWidget.runtimeType)) {
        return;
      }
    }
    OverlaySupportEntry? entry;
    entry = showSimpleNotification(
        GestureDetector(
          onTap: () {
            onPressed();
            entry?.dismiss();
          },
          child: Container(/* ここで表示の装飾 */),
        ),
      background: Colors.transparent,
      duration: const Duration(seconds: /* ここで表示秒数設定 */),
    );
  }
  // 最前面のウィジェットを取得
  Widget? _getTopWidget(BuildContext context) {
    final navigatorState = navigatorKey.currentState;
    final route = navigatorState?.widget.pages.isNotEmpty == true
        ? navigatorState!.widget.pages.last
        : null;

    if (route is MaterialPage) {
      return route.child;
    }
    return null;
  }
}

これで通知を表示できました。良かったですね。

戻る一覧へ戻る