플러터 푸시 알림 Local Notifications 사용법 및 예제

by

Flutter에서는 Local Notifications를 사용하여 앱 내에서 사용자에게 알림을 보낼 수 있습니다. 이 글에서는 플러터 푸시 알림을 Local Notifications를 통하여 구현하는 방법에 대해서 작성하겠습니다.

pubspec.yaml 파일 수정

프로젝트에 Local Notifications을 사용하기 위해 패키지를 설치해야 합니다. pubspec.yaml파일을 열고 flutter_local_notifications를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_local_notifications: ^15.1.1
  rxdart: ^0.27.7

Local Notifications 초기 설정

Local Notifications를 사용하기 위해 초기 설정이 필요합니다. Android 설정은 테스트해보지 않아서 작성하지 않았습니다.

iOS 설정

ios/Runner/AppDelegate.swift 파일에 초기화 코드를 추가합니다. 추가된 부분은 주석으로 설명이 되어 있으니 확인하세요.

import UIKit
import Flutter
// 패키지 추가
import flutter_local_notifications

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
  // 앱이 백그라운드에서 실행되면서 알림을 처리할 때 필요한 플러그인을 등록할 수 있도록 합니다.
   FlutterLocalNotificationsPlugin.setPluginRegistrantCallback { (registry) in
        GeneratedPluginRegistrant.register(with: registry)
    }
    // iOS 10.0 이상에서 사용할 수 있는 기능을 조건부로 실행합니다. #available(iOS 10.0, *) 조건은 현재 iOS 버전이 10.0 이상인지 확인합니다.
    if #available(iOS 10.0, *) {
      UNUserNotificationCenter.current().delegate = self as UNUserNotificationCenterDelegate
    }
    // 이 부분은 특정 조건에 따라 로컬 알림을 취소하고 초기화합니다.
    if(!UserDefaults.standard.bool(forKey: "Notification")) {
        UIApplication.shared.cancelAllLocalNotifications()
        UserDefaults.standard.set(true, forKey: "Notification")
    }
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

Local Notifications 예제코드

Local Notifications 간단한 예제입니다.

알림 설정 초기화

알림 초기화 및 설정을 처리할 클래스를 만듭니다.

import 'package:flutter/material.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart';
import 'package:rxdart/rxdart.dart';

// LocalNotifications 클래스는 Flutter 앱에서 로컬 알림을 처리합니다.
class LocalNotifications {
  // FlutterLocalNotificationsPlugin 인스턴스를 초기화합니다.
  static final FlutterLocalNotificationsPlugin
      _flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
  
  // 알림 클릭을 처리하기 위해 BehaviorSubject를 사용합니다.
  static final onClickNotification = BehaviorSubject<String>();

  // 알림이 클릭될 때 호출되는 메서드입니다.
  static void onNotificationTap(NotificationResponse notificationResponse) {
    onClickNotification.add(notificationResponse.payload!);
  }

  // 알림 초기화를 위한 메서드입니다.
  static Future init() async {
    // Android 초기화 설정을 정의합니다.
    const AndroidInitializationSettings initializationSettingsAndroid =
        AndroidInitializationSettings('@mipmap/ic_launcher');
    
    // iOS 초기화 설정을 정의합니다.
    final DarwinInitializationSettings initializationSettingsDarwin =
        DarwinInitializationSettings(
      onDidReceiveLocalNotification: (id, title, body, payload) => null,
    );
    
    // Linux 초기화 설정을 정의합니다.
    final LinuxInitializationSettings initializationSettingsLinux =
        LinuxInitializationSettings(defaultActionName: 'Open notification');
    
    // 모든 플랫폼의 초기화 설정을 통합합니다.
    final InitializationSettings initializationSettings =
        InitializationSettings(
            android: initializationSettingsAndroid,
            iOS: initializationSettingsDarwin,
            linux: initializationSettingsLinux);

    // Android 플랫폼에서 알림 권한을 요청합니다.
    final androidImplementation =
        _flutterLocalNotificationsPlugin.resolvePlatformSpecificImplementation<
            AndroidFlutterLocalNotificationsPlugin>();
    if (androidImplementation != null) {
      androidImplementation.requestPermission();
    }

    // 알림 초기화 및 알림 응답 처리 설정을 합니다.
    _flutterLocalNotificationsPlugin.initialize(initializationSettings,
        onDidReceiveNotificationResponse: onNotificationTap,
        onDidReceiveBackgroundNotificationResponse: onNotificationTap);
  }

  // 간단한 알림을 표시하는 메서드입니다.
  static Future showSimpleNotification({
    required String title,
    required String body,
    required String payload,
  }) async {
    // Android 알림 세부 설정을 정의합니다.
    const AndroidNotificationDetails androidNotificationDetails =
        AndroidNotificationDetails('your channel id', 'your channel name',
            channelDescription: 'your channel description',
            importance: Importance.max,
            priority: Priority.high,
            ticker: 'ticker');
    
    // 알림 세부 설정을 통합합니다.
    const NotificationDetails notificationDetails =
        NotificationDetails(android: androidNotificationDetails);
    
    // 알림을 표시합니다.
    await _flutterLocalNotificationsPlugin
        .show(0, title, body, notificationDetails, payload: payload);
  }
}

알람 표시

앱에서 간단한 알림을 표시하는 버튼입니다. 

void main() async {
  // Flutter 프레임워크의 비동기 작업을 위해 필요한 바인딩을 초기화합니다.
  WidgetsFlutterBinding.ensureInitialized();
  
  // LocalNotifications 클래스의 init 메서드를 호출하여 알림을 초기화합니다.
  await LocalNotifications.init();
  
  // Flutter 애플리케이션을 실행합니다.
  runApp(const MyApp());
}

// MyApp 클래스는 Flutter 애플리케이션의 루트 위젯입니다.
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 애플리케이션의 제목을 설정합니다.
      title: 'Flutter Demo',
      
      // 애플리케이션의 테마를 설정합니다.
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
        useMaterial3: true,
      ),
      
      // 애플리케이션의 홈 화면을 설정합니다.
      home: const Homepage(),
    );
  }
}

// Homepage 클래스는 애플리케이션의 홈 화면을 정의합니다.
class Homepage extends StatefulWidget {
  const Homepage({super.key});

  @override
  State<Homepage> createState() => _HomepageState();
}

// _HomepageState 클래스는 Homepage의 상태를 관리합니다.
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 앱바를 설정하여 제목을 표시합니다.
      appBar: AppBar(title: Text("Flutter 로컬 알림")),
      
      // 화면의 중심에 버튼을 배치합니다.
      body: Center(
        child: ElevatedButton.icon(
          // 버튼에 아이콘을 설정합니다.
          icon: Icon(Icons.notifications_outlined),
          
          // 버튼을 눌렀을 때 실행될 함수를 정의합니다.
          onPressed: () {
            // LocalNotifications 클래스의 showSimpleNotification 메서드를 호출하여 알림을 표시합니다.
            LocalNotifications.showSimpleNotification(
              title: "심플 알림",
              body: "심플 알림입니다",
              payload: "심플 데이터입니다",
            );
          },
          
          // 버튼에 표시될 텍스트를 설정합니다.
          label: Text("심플 알림"),
        ),
      ),
    );
  }
}

결과 이미지

버튼을 클릭하면 알림이 나옵니다.

플러터-푸시-알림
플러터-푸시-알림

Leave a Comment