[flutter] 플러터에서의 알림 및 푸시 알림 구현 방법

12 Dec 2023

flutter

이번 포스트에서는 플러터(Flutter) 앱에서 기기에 알림(notification) 및 푸시 알림(push notification)을 구현하는 방법에 대해 알아보겠습니다.

로컬 알림(Local Notifications) 구현

앱 내부에서 사용자에게 알림을 보낼 때는 로컬 알림을 사용합니다. 다음은 플러터에서 로컬 알림을 구현하는 간단한 예제입니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin;

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

  Future<void> _showNotification() async {
    var androidPlatformChannelSpecifics = AndroidNotificationDetails(
        'your channel id', 'your channel name', 'your channel description',
        importance: Importance.max, priority: Priority.high, ticker: 'ticker');
    var iOSPlatformChannelSpecifics = IOSNotificationDetails();
    var platformChannelSpecifics = NotificationDetails(androidPlatformChannelSpecifics, iOSPlatformChannelSpecifics);
    await flutterLocalNotificationsPlugin.show(0, 'title', 'body', platformChannelSpecifics, payload: 'item x');
  }

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

위의 예제 코드는 flutter_local_notifications 패키지를 사용하여 앱 내에서 로컬 알림을 보내는 방법을 구현한 것입니다.

푸시 알림(Push Notifications) 구현

푸시 알림은 앱 외부에서 서버를 통해 사용자에게 전달됩니다. 이를 구현하기 위해서는 Firebase Cloud Messaging(FCM)을 사용하는 것이 일반적입니다. Firebase Console을 통해 앱에 FCM을 설정하고, firebase_messaging 패키지를 사용하여 푸시 알림을 플러터 앱에 통합할 수 있습니다.

아래는 firebase_messaging 패키지를 사용하여 플러터 앱에 푸시 알림을 구현하는 예제입니다.

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final FirebaseMessaging _firebaseMessaging = FirebaseMessaging.instance;

  @override
  void initState() {
    super.initState();
    _firebaseMessaging.configure(
      onMessage: (Map<String, dynamic> message) async {
        print("onMessage: $message");
      },
      onResume: (Map<String, dynamic> message) async {
        print("onResume: $message");
      },
      onLaunch: (Map<String, dynamic> message) async {
        print("onLaunch: $message");
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Push Notifications Example'),
      ),
      body: Center(
        child: Text('Push Notifications Example'),
      ),
    );
  }
}

위의 예제 코드는 firebase_messaging 패키지를 사용하여 플러터 앱에 푸시 알림을 통합하는 방법을 구현한 것입니다.

결론

플러터에서는 로컬 알림(앱 내부) 및 푸시 알림(외부 서버를 통해)을 구현할 수 있습니다. 이러한 기능들을 활용하여 사용자에게 중요한 정보를 전달하고, 앱 사용 경험을 향상시킬 수 있습니다.

이상으로 플러터에서의 알림 및 푸시 알림 구현 방법에 대해 알아보았습니다.

참고 문헌: