[flutter] 플러터에서 훅(hook)을 사용해 푸시 알림 기능 구현하기

14 Dec 2023

flutter

푸시 알림은 모바일 애플리케이션에서 중요한 기능 중 하나입니다. 이 기능을 플러터로 개발할 때 훅(hook)을 활용하여 간편하게 구현할 수 있습니다. 이번 글에서는 플러터에서 flutter_local_notifications 패키지와 use_effect 훅을 사용하여 푸시 알림 기능을 구현하는 방법에 대해 알아보겠습니다.

1. 필요한 패키지 설치

먼저, flutter_local_notifications 패키지를 설치해야 합니다. 아래의 명령어를 사용하여 패키지를 추가합니다.

flutter pub add flutter_local_notifications

이제 pubspec.yaml 파일에 패키지를 추가하고, 의존성을 가져옵니다.

dependencies:
  flutter_local_notifications: ^x.x.x # 최신 버전으로 업데이트

2. 푸시 알림 기능 구현

다음으로, flutter_local_notifications 패키지를 사용하여 푸시 알림 기능을 구현합니다. use_effect 훅을 사용하여 알림 채널을 초기화하고 푸시 알림을 표시합니다. 아래는 간단한 예제 코드입니다.

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();
    _initializeNotifications();
  }

  Future<void> _initializeNotifications() async {
    const AndroidInitializationSettings initializationSettingsAndroid =
        AndroidInitializationSettings('@mipmap/ic_launcher');

    final InitializationSettings initializationSettings = InitializationSettings(
      android: initializationSettingsAndroid,
    );

    await flutterLocalNotificationsPlugin.initialize(initializationSettings);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter 푸시 알림'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              await _showNotification();
            },
            child: Text('알림 표시'),
          ),
        ),
      ),
    );
  }

  Future<void> _showNotification() async {
    const AndroidNotificationDetails androidPlatformChannelSpecifics =
        AndroidNotificationDetails(
      '1',
      'Channel Name',
      'Channel Description',
    );
    const NotificationDetails platformChannelSpecifics =
        NotificationDetails(android: androidPlatformChannelSpecifics);
    await flutterLocalNotificationsPlugin.show(
      0,
      '알림 제목',
      '알림 본문입니다.',
      platformChannelSpecifics,
    );
  }
}

3. 앱에서 푸시 알림 트리거하기

이제 Flutter 앱에서 위 코드를 실행하고, 알림 표시 버튼을 눌러서 푸시 알림 기능이 제대로 동작하는지 확인해보세요.

위의 코드를 참고하여 flutter_local_notifications 패키지를 사용하여 푸시 알림을 손쉽게 트리거할 수 있습니다. 오류가 발생하거나 추가적인 도움이 필요하다면, 공식 문서를 참고하십시오.

목차

1. 필요한 패키지 설치

2. 푸시 알림 기능 구현

3. 앱에서 푸시 알림 트리거하기