[flutter] 플러터 Wrap을 사용하여 앱의 로컬 알림 기능을 구현하는 방법

07 Dec 2023

flutter

앱 개발자들은 종종 사용자에게 시간 기반으로 알림을 보내는 기능을 구현해야 합니다. 이를 위해서 플러터(Flutter)에서는 로컬 알림(local notification)을 사용할 수 있습니다. 이번 블로그 포스트에서는 플러터의 Wrap 위젯을 사용하여 앱에서 로컬 알림 기능을 구현하는 방법을 알아보겠습니다.

로컬 알림 패키지 가져오기

플러터에서 로컬 알림을 구현하기 위해서는 로컬 알림 패키지를 사용해야 합니다. 예를 들어, flutter_local_notifications 패키지를 사용할 수 있습니다. 이 패키지를 가져오기 위해서는 pubspec.yaml 파일에 다음과 같은 의존성을 추가해야 합니다:

dependencies:
  flutter_local_notifications: ^[버전]

여기서 [버전]은 사용하려는 패키지의 버전을 나타냅니다. 예를 들어, flutter_local_notifications: ^5.0.0와 같이 사용할 수 있습니다. 터미널에서 flutter pub get 명령어를 실행하여 의존성을 설치할 수 있습니다.

Wrap 위젯을 사용한 알림 구현

Wrap 위젯은 플러터에서 여러 위젯을 감싸고 필요한 시점에 각각의 위젯을 렌더링하는 유용한 위젯입니다. 이를 사용하여 알림을 구현할 수 있습니다. 다음은 Wrap 위젯을 사용하여 로컬 알림을 구현하는 예시입니다:

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

class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
      FlutterLocalNotificationsPlugin();

  @override
  void initState() {
    super.initState();
    initializeNotifications();
  }

  Future<void> initializeNotifications() async {
    var initializationSettingsAndroid =
    AndroidInitializationSettings('app_icon');
    var initializationSettingsIOS = IOSInitializationSettings();
    var initializationSettings = InitializationSettings(
        android: initializationSettingsAndroid,
        iOS: initializationSettingsIOS);
    await flutterLocalNotificationsPlugin.initialize(initializationSettings);
  }

  void showNotification(String title, String body) async {
    var androidPlatformChannelSpecifics = AndroidNotificationDetails(
        'channel_id', 'channel_name', 'channel_description',
        importance: Importance.max, priority: Priority.high);
    var iOSPlatformChannelSpecifics = IOSNotificationDetails();
    var platformChannelSpecifics = NotificationDetails(
        android: androidPlatformChannelSpecifics,
        iOS: iOSPlatformChannelSpecifics);
    await flutterLocalNotificationsPlugin.show(
      0,
      title,
      body,
      platformChannelSpecifics,
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('로컬 알림 예제'),
        ),
        body: Center(
          child: Wrap(
            spacing: 8.0,
            runSpacing: 4.0,
            children: [
              ElevatedButton(
                onPressed: () {
                  showNotification('첫 번째 알림', '알림 내용입니다.');
                },
                child: Text('알림 1'),
              ),
              ElevatedButton(
                onPressed: () {
                  showNotification('두 번째 알림', '다른 알림 내용입니다.');
                },
                child: Text('알림 2'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

위 코드는 Wrap 위젯을 사용하여 두 개의 알림 버튼을 만들고, 각 버튼을 누를 때마다 로컬 알림이 전송되도록 구현한 예시입니다. 위 코드를 실행하면 앱 화면에 나타나는 버튼을 통해 로컬 알림을 확인할 수 있습니다.

기타 설정(option)들은 flutter_local_notifications 패키지의 공식 문서를 참조하시기 바랍니다.

결론

이번 블로그 포스트에서는 플러터의 Wrap 위젯을 사용하여 앱의 로컬 알림 기능을 구현하는 방법을 알아보았습니다. Wrap 위젯을 사용하면 여러 위젯을 감싸고 필요한 시점에 렌더링할 수 있기 때문에 앱의 알림 기능을 효율적으로 구현할 수 있습니다. 플러터를 사용하여 다양한 기능을 구현할 때 Wrap 위젯을 활용해보세요!