Flutter의 로컬 알림(Local Notifications) 설정

로컬 알림(Local Notifications)은 사용자가 앱을 실행하고 있을 때 중요한 정보를 제공하거나 특정 이벤트를 공지하는 데 유용합니다. Flutter를 사용하면 flutter_local_notifications 패키지를 통해 간편하게 로컬 알림을 설정할 수 있습니다. 이번 글에서는 Flutter에서 로컬 알림을 설정하는 방법을 단계별로 설명하겠습니다.

1. flutter_local_notifications 패키지 설치

먼저, flutter_local_notifications 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_local_notifications: ^9.0.0

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

2. Android 및 iOS 설정

로컬 알림을 사용하기 위해 Android와 iOS에서 필요한 설정을 추가합니다.

 

2.1 Android 설정

android/app/src/main/AndroidManifest.xml 파일에 다음 코드를 추가합니다.

 

<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
<application>
    ...
    <receiver android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationReceiver"
              android:exported="true"/>
    <receiver android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationBootReceiver"
              android:enabled="true"
              android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.BOOT_COMPLETED"/>
            <action android:name="android.intent.action.MY_PACKAGE_REPLACED"/>
        </intent-filter>
    </receiver>
</application>

 

2.2 iOS 설정

ios/Runner/Info.plist 파일에 다음 코드를 추가합니다.

<key>UIBackgroundModes</key>
<array>
    <string>fetch</string>
    <string>remote-notification</string>
</array>

 

 

3. 로컬 알림 초기화

이제 Flutter 코드에서 로컬 알림을 초기화합니다. main.dart 파일을 수정하여 초기화 코드를 추가합니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin;

  @override
  void initState() {
    super.initState();
    flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
    const AndroidInitializationSettings initializationSettingsAndroid =
        AndroidInitializationSettings('@mipmap/ic_launcher');
    const IOSInitializationSettings initializationSettingsIOS =
        IOSInitializationSettings();
    const InitializationSettings initializationSettings =
        InitializationSettings(
            android: initializationSettingsAndroid, iOS: initializationSettingsIOS);
    flutterLocalNotificationsPlugin.initialize(initializationSettings);
  }

  Future<void> _showNotification() async {
    const AndroidNotificationDetails androidPlatformChannelSpecifics =
        AndroidNotificationDetails(
            'your_channel_id', 'your_channel_name',
            channelDescription: 'your_channel_description',
            importance: Importance.max,
            priority: Priority.high,
            showWhen: false);
    const NotificationDetails platformChannelSpecifics =
        NotificationDetails(android: androidPlatformChannelSpecifics);
    await flutterLocalNotificationsPlugin.show(
      0,
      'Test Notification',
      'This is the notification body',
      platformChannelSpecifics,
      payload: 'item x',
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Local Notifications'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: _showNotification,
            child: Text('Show Notification'),
          ),
        ),
      ),
    );
  }
}

 

위 코드는 간단한 로컬 알림을 생성하고 표시하는 예제입니다. flutterLocalNotificationsPlugin.show 메서드를 사용하여 알림을 생성하고 표시합니다.

 

 

반응형

 

 

4. 고급 설정 및 커스터마이징

로컬 알림을 커스터마이징하고, 예약된 알림을 설정할 수 있습니다. 다음은 알림을 예약하는 예제입니다.

 

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin;

  @override
  void initState() {
    super.initState();
    flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
    const AndroidInitializationSettings initializationSettingsAndroid =
        AndroidInitializationSettings('@mipmap/ic_launcher');
    const IOSInitializationSettings initializationSettingsIOS =
        IOSInitializationSettings();
    const InitializationSettings initializationSettings =
        InitializationSettings(
            android: initializationSettingsAndroid, iOS: initializationSettingsIOS);
    flutterLocalNotificationsPlugin.initialize(initializationSettings);
  }

  Future<void> _scheduleNotification() async {
    const AndroidNotificationDetails androidPlatformChannelSpecifics =
        AndroidNotificationDetails(
            'your_channel_id', 'your_channel_name',
            channelDescription: 'your_channel_description',
            importance: Importance.max,
            priority: Priority.high,
            showWhen: false);
    const NotificationDetails platformChannelSpecifics =
        NotificationDetails(android: androidPlatformChannelSpecifics);
    await flutterLocalNotificationsPlugin.zonedSchedule(
      0,
      'Scheduled Notification',
      'This is the notification body',
      tz.TZDateTime.now(tz.local).add(Duration(seconds: 5)),
      platformChannelSpecifics,
      androidAllowWhileIdle: true,
      uiLocalNotificationDateInterpretation:
          UILocalNotificationDateInterpretation.absoluteTime,
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Local Notifications'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: _scheduleNotification,
            child: Text('Schedule Notification'),
          ),
        ),
      ),
    );
  }
}

 

위 코드는 5초 후에 예약된 알림을 생성하고 표시하는 예제입니다. flutterLocalNotificationsPlugin.zonedSchedule 메서드를 사용하여 예약된 알림을 설정합니다.

5. 알림 클릭 이벤트 처리

알림을 클릭했을 때 특정 작업을 수행하도록 이벤트를 처리할 수 있습니다. 다음은 알림 클릭 이벤트를 처리하는 예제입니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin;

  @override
  void initState() {
    super.initState();
    flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
    const AndroidInitializationSettings initializationSettingsAndroid =
        AndroidInitializationSettings('@mipmap/ic_launcher');
    const IOSInitializationSettings initializationSettingsIOS =
        IOSInitializationSettings();
    const InitializationSettings initializationSettings =
        InitializationSettings(
            android: initializationSettingsAndroid, iOS: initializationSettingsIOS);
    flutterLocalNotificationsPlugin.initialize(initializationSettings,
        onSelectNotification: _onSelectNotification);
  }

  Future<void> _showNotification() async {
    const AndroidNotificationDetails androidPlatformChannelSpecifics =
        AndroidNotificationDetails(
            'your_channel_id', 'your_channel_name',
            channelDescription: 'your_channel_description',
            importance: Importance.max,
            priority: Priority.high,
            showWhen: false);
    const NotificationDetails platformChannelSpecifics =
        NotificationDetails(android: androidPlatformChannelSpecifics);
    await flutterLocalNotificationsPlugin.show(
      0,
      'Test Notification',
      'This is the notification body',
      platformChannelSpecifics,
      payload: 'item x',
    );
  }

  Future<void> _onSelectNotification(String? payload) async {
    if (payload != null) {
      debugPrint('notification payload: $payload');
    }
    await Navigator.push(
      context,
      MaterialPageRoute<void>(builder: (context) => SecondScreen(payload: payload)),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Local Notifications'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: _showNotification,
            child: Text('Show Notification'),
          ),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  final String? payload;

  const SecondScreen({Key? key, this.payload}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Text('Payload: $payload'),
      ),
    );
  }
}

 

위 코드는 알림을 클릭했을 때 SecondScreen으로 이동하여 알림의 payload를 표시하는 예제입니다. onSelectNotification 콜백을 사용하여 알림 클릭 이벤트를 처리합니다.

결론

Flutter에서 flutter_local_notifications 패키지를 사용하면 로컬 알림을 쉽게 구현할 수 있습니다. Android와 iOS 설정을 추가하고, 초기화 및 알림 생성, 예약된 알림, 알림 클릭 이벤트 처리 등의 기능을 구현할 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 로컬 알림 기능을 구현해보세요. 로컬 알림을 통해 사용자에게 중요한 정보를 효과적으로 전달할 수 있습니다.