Flutterでローカル通知を実装してみた: MVVMパターンを活用する

Flutterでローカル通知を実装してみた: MVVMパターンを活用する

Flutterを使用してローカル通知を実装するアプリを作成したく、サンプルで作成してみました。
ここでは、MVVM(Model-View-ViewModel)パターンを使用してローカル通知を実装する方法を説明します。

パッケージの準備

まず、以下のパッケージをpubspec.yamlに追加します。

dependencies:
  flutter:
    sdk: flutter

  # 追加するパッケージ
  flutter_local_notifications: ^15.1.0+1
  flutter_riverpod: ^2.3.6

https://pub.dev/packages/flutter_local_notifications
https://pub.dev/packages/flutter_riverpod

MVVMパターンの適用

MVVMパターンを適用するためには、以下の3つのコンポーネントを作成します。

• Model: データとビジネスロジックを管理します。
• View: ユーザーインターフェースを描画します。
• ViewModel: ViewとModelの間のデータバインディングとコマンドを管理します。

今回のケースでは、特にModelクラスは必要ありません。その代わり、NotificationViewModelクラスを作成して、ローカル通知の表示ロジックを管理します。また、NotificationPageクラス（View）を更新して、NotificationViewModelを使用します。

以下に、各ファイルのコードを示します。

view_models/notification_view_model.dart:

import 'package:flutter_local_notifications/flutter_local_notifications.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final notificationProvider = Provider<NotificationViewModel>((ref) {
  return NotificationViewModel(ref.read);
});

class NotificationViewModel {
  final Reader read;

  NotificationViewModel(this.read);

  Future<void> showNotification() async {
    var androidInitialize = AndroidInitializationSettings('@mipmap/ic_launcher');
    var iOSInitialize = DarwinInitializationSettings(
      requestAlertPermission: true,
      requestBadgePermission: true,
      requestSoundPermission: true,
      onDidReceiveLocalNotification: (id, title, body, payload) async {},
    );
    var initializationSettings =
        InitializationSettings(android: androidInitialize, iOS: iOSInitialize);
    var localNotification = FlutterLocalNotificationsPlugin()..initialize(initializationSettings);

    var androidDetails = AndroidNotificationDetails(
      'channelId',
      'channelName',
      importance: Importance.max,
    );
    var iOSDetails = DarwinNotificationDetails();
    var generalNotificationDetails =
        NotificationDetails(android: androidDetails, iOS: iOSDetails);

    await localNotification.show(0, 'Notification Title', 'Notification Body',
        generalNotificationDetails);
  }
}

views/notification_page.dart:

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:your_project_name/view_models/notification_view_model.dart';

class NotificationPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final viewModel = ref.watch(notificationProvider);

    return Scaffold(
      body: Center(
        child: TextButton(
          child: Text('Show Notification'),
          onPressed: viewModel.showNotification,
        ),
      ),
    );
  }
}

通知が飛んだ時の画面

まとめ

この記事では、FlutterとMVVMパターンを使用してローカル通知を実装する方法を説明しました。このパターンを使用すると、コードの再利用性と可読性が向上し、大規模なプロジェクトの管理が容易になります。ぜひこのパターンを活用して、より良いFlutterアプリを作成してみてください。