Flutter) flutter_local_notification

 정말 오랜만에 글을 쓰는것 같습니다. 오늘은 혼자 이것저것 해보다가 신기한 패키지가 있어서 소개해드릴려고 합니다. 그것은 local_notification입니다. flutter의 알림은 firebase_messaging을 사용하더라고요, 해당 firebase_messaging을 연결하기 위해서는 firebase와의 연결 과정이 필요합니다. 디비와 연결되어 있는 어플의 경우 정보를 보내고 하기 위해 사용할수 있지만 local_notificaition의 경우 간단한 어플에서 굳이 firebase와 연결시키지 않고 사용하기 편하겠다 생각해 포스팅을 해봅니다.

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

flutter_local_notifications | Flutter Package

 

1. 가장 먼저 pubspec.yaml에 해당 패키지를 추가해주어야 합니다.

2-1. 안드로이드의 경우 다음을 AndroidManifest.xml에 추가하여야 합니다. 이렇게 하면 기본적인 설정은 끝이납니다!!

 - AndroidManifest.xml 파일은 android/app/src/main에 존재합니다.

<uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
<uses-permission android:name="android.permission.VIBRATE" />
//예약 알림과, 진동을 통한 알림을 이용하기 위해서 사용해주는 것입니다.
...
<receiver android:name="com.dexterous.flutterlocalnotifications.ScheduledNotificationBootReceiver">
	<intent-filter>
		<action android:name="android.intent.action.BOOT_COMPLETED"></action>
	</intent-filter>
</receiver>
//이것은 재부팅시 예약된 알림이 예약된 상태 그대로 유지 될수 있도록 해주는 설정입니다.

2-2. ios의 경우 기본적으로 어플이 열려있을때는 알림이 울리지 않도록 설정이 되어 있습니다. 그렇기 때문에 AppDelegate.swift에 아래의 코드를 추가하여 주어야 합니다.(method 안에 들어가야 합니다!)

if #available(iOS 10.0, *) {
      UNUserNotificationCenter.current().delegate = self as? UNUserNotificationCenterDelegate
    }

3. 다음은 눌렀을때 알림이 뜰수있게 하기 위해 버튼을 미리 만들어 두겠습니다.

 - 해당 패키지의 간단한 사용법을 보여드릴것이라 따로 페이지를 만들지 않았습니다.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              onPressed: () {},
              child: Text('Show Notification'),
            ),
            RaisedButton(
              onPressed: () {},
              child: Text('Daily At Time Notification'),
            ),
            RaisedButton(
              onPressed: () {},
              child: Text('Repeat Notification'),
            ),
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

 

4. notification을 위한 코드 셋팅을 할 차례입니다.

var _flutterLocalNotificationsPlugin;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    //안드로이드 설정를 위한 Notification을 설정하여 준것입니다. 앱 아이콘으로 설정을 바꾸어 줄수 있고 현재 @mipmap/ic_launcher는 flutter 기본 아이콘을 사용하는 것입니다.
    var initializationSettingsAndroid = AndroidInitializationSettings('@mipmap/ic_launcher');
    //ios 알림 설정 : 소리, 뱃지 등을 설정하여 줄수가 있습니다.
    var initializationSettingsIOS = IOSInitializationSettings();

    var initializationSettings = InitializationSettings(
        initializationSettingsAndroid, initializationSettingsIOS);
        
    _flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
    
    //onSelectNotification의 경우 알림을 눌렀을때 어플에서 실행되는 행동을 설정하는 부분입니다.
    //onSelectNotification는 없어도 되는 부분입니다. 어떤 행동을 취하게 하고 싶지 않다면 그냥 비워 두셔도 됩니다.
    _flutterLocalNotificationsPlugin.initialize(initializationSettings,
        onSelectNotification: onSelectNotification);
  }

//알림을 눌렀을때 어떤 행동을 할지 정해주는 부분
  Future onSelectNotification(String payload) async {
  	print("payload : $payload");
    showDialog(
        context: context,
        builder: (_) => AlertDialog(
              title: Text('우왕 잘됩니다!!!!우와아아아아아아앙!!!'),
              content: Text('Payload: $payload'),
            ));
  }

//await _flutterLocalNotificationPlugin.~ 에서 payload부분은 모두 설정하여 주지 않아도 됩니다.
//버튼을 눌렀을때 한번 알림이 뜨게 해주는 방법입니다.
  Future _showNotification() async {
    var android = AndroidNotificationDetails(
        'your channel id', 'your channel name', 'your channel description',
        importance: Importance.Max, priority: Priority.High);

    var ios = IOSNotificationDetails();
    var detail = NotificationDetails(android, ios);

    await _flutterLocalNotificationsPlugin.show(
      0,
      '단일 Notification',
      '단일 Notification 내용',
      detail,
      payload: 'Hello Flutter',
    );
  }

//매일 같은 시간 알림을 알려줍니다.
  Future _dailyAtTimeNotification() async {
  //시간은 24시간으로 표시합니다아.
    var time = Time(22, 40, 0);
    var android = AndroidNotificationDetails(
        'your channel id', 'your channel name', 'your channel description',
        importance: Importance.Max, priority: Priority.High);

    var ios = IOSNotificationDetails();
    var detail = NotificationDetails(android, ios);

    await _flutterLocalNotificationsPlugin.showDailyAtTime(
      0,
      '매일 똑같은 시간의 Notification',
      '매일 똑같은 시간의 Notification 내용',
      time,
      detail,
      payload: 'Hello Flutter',
    );
  }

//반복적으로 알림을 뜨게 히는 방법입니다.
  Future _repeatNotification() async {
    var android = AndroidNotificationDetails(
        'your channel id', 'your channel name', 'your channel description',
        importance: Importance.Max, priority: Priority.High);

    var ios = IOSNotificationDetails();
    var detail = NotificationDetails(android, ios);

    await _flutterLocalNotificationsPlugin.periodicallyShow(
      0,
      '반복 Notification',
      '반복 Notification 내용',
      //ReapeatInterval.{EveryMinute, Hourly, Daily, Weekly} 중 선택하여 사용할수 있습니다.
      RepeatInterval.EveryMinute,
      detail,
      payload: 'Hello Flutter',
    );
  }

 

5. 전체 코드와 실행 결과물!

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Notification Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Notification Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _flutterLocalNotificationsPlugin;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    var initializationSettingsAndroid =
        AndroidInitializationSettings('@mipmap/ic_launcher');
    var initializationSettingsIOS = IOSInitializationSettings();

    var initializationSettings = InitializationSettings(
        initializationSettingsAndroid, initializationSettingsIOS);

    _flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();
    _flutterLocalNotificationsPlugin.initialize(initializationSettings,
        onSelectNotification: onSelectNotification);
  }

  Future<void> onSelectNotification(String payload) async {
    debugPrint("$payload");
    showDialog(
        context: context,
        builder: (_) => AlertDialog(
              title: Text('Notification Payload'),
              content: Text('Payload: $payload'),
            ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              onPressed: _showNotification,
              child: Text('Show Notification'),
            ),
            RaisedButton(
              onPressed: _dailyAtTimeNotification,
              child: Text('Daily At Time Notification'),
            ),
            RaisedButton(
              onPressed: _repeatNotification,
              child: Text('Repeat Notification'),
            ),
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  Future<void> _showNotification() async {
    var android = AndroidNotificationDetails(
        'your channel id', 'your channel name', 'your channel description',
        importance: Importance.Max, priority: Priority.High);

    var ios = IOSNotificationDetails();
    var detail = NotificationDetails(android, ios);

    await _flutterLocalNotificationsPlugin.show(
      0,
      '단일 Notification',
      '단일 Notification 내용',
      detail,
      payload: 'Hello Flutter',
    );
  }

  Future<void> _dailyAtTimeNotification() async {
    var time = Time(22, 40, 0);
    var android = AndroidNotificationDetails(
        'your channel id', 'your channel name', 'your channel description',
        importance: Importance.Max, priority: Priority.High);

    var ios = IOSNotificationDetails();
    var detail = NotificationDetails(android, ios);

    await _flutterLocalNotificationsPlugin.showDailyAtTime(
      0,
      '매일 똑같은 시간의 Notification',
      '매일 똑같은 시간의 Notification 내용',
      time,
      detail,
      payload: 'Hello Flutter',
    );
  }

  Future<void> _repeatNotification() async {
    var android = AndroidNotificationDetails(
        'your channel id', 'your channel name', 'your channel description',
        importance: Importance.Max, priority: Priority.High);

    var ios = IOSNotificationDetails();
    var detail = NotificationDetails(android, ios);

    await _flutterLocalNotificationsPlugin.periodicallyShow(
      0,
      '반복 Notification',
      '반복 Notification 내용',
      RepeatInterval.EveryMinute,
      detail,
      payload: 'Hello Flutter',
    );
  }
}