[flutter] 플러터 TimePicker에서 시간 선택 후 알림 설정 방법

07 Dec 2023

flutter

안녕하세요! 이번에는 플러터를 사용하여 TimePicker를 구현하고, 시간을 선택한 후에 알림 설정을 하는 방법에 대해 알아보겠습니다.

1. 패키지 추가

먼저, 플러터의 ‘flutter_local_notifications’ 패키지를 추가해야 합니다. 이 패키지는 알림을 설정하고 표시하는 기능을 제공합니다. pubspec.yaml 파일의 dependencies 섹션에 아래 코드를 추가하세요:

dependencies:
  flutter_local_notifications: ^2.0.0

그리고 터미널에서 ‘flutter pub get’ 명령어를 실행하여 패키지를 다운로드 받습니다.

2. TimePicker 구현

시간 선택을 위해서 플러터의 showTimePicker 함수를 사용합니다. showTimePicker 함수는 TimePicker 다이얼로그를 띄워주고 선택한 시간을 반환해줍니다. 아래는 예제 코드입니다:

Future<void> _selectTime(BuildContext context) async {
  final TimeOfDay? pickedTime = await showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
  );

  if (pickedTime != null) {
    setState(() {
      _selectedTime = pickedTime;
    });
  }
}

위 코드에서 _selectedTime은 선택한 시간을 저장하는 변수입니다. 선택한 시간이 null이 아닌 경우, 선택한 시간으로 _selectedTime을 업데이트합니다.

3. 알림 설정

플러터의 flutter_local_notifications 패키지를 사용하여 선택한 시간에 알림을 설정할 수 있습니다. 아래는 선택한 시간에 알림을 설정하는 예제 코드입니다:

void scheduleNotification() 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,
    '알림 제목',
    '알림 내용',
    platformChannelSpecifics,
    payload: '알림 페이로드',
    scheduledDateTime: DateTime.now().add(Duration(hours: _selectedTime!.hour, minutes: _selectedTime!.minute)),
  );
}

위 코드에서 flutterLocalNotificationsPlugin.show 함수는 알림을 설정하고 표시합니다. scheduledDateTime 매개변수를 사용하여 선택한 시간으로 알림을 예약합니다.

4. 전체 코드

아래는 전체 코드의 예시입니다:

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

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

class MyApp extends StatelessWidget {
  final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
      FlutterLocalNotificationsPlugin();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Time Picker'),
        ),
        body: Center(
          child: ElevatedButton(
            child: Text('시간 선택'),
            onPressed: () {
              _selectTime(context);
            },
          ),
        ),
      ),
    );
  }

  Future<void> _selectTime(BuildContext context) async {
    final TimeOfDay? pickedTime = await showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
    );

    if (pickedTime != null) {
      setState(() {
        _selectedTime = pickedTime;
      });
      scheduleNotification();
    }
  }

  void scheduleNotification() 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,
      '알림 제목',
      '알림 내용',
      platformChannelSpecifics,
      payload: '알림 페이로드',
      scheduledDateTime: DateTime.now().add(Duration(hours: _selectedTime!.hour, minutes: _selectedTime!.minute)),
    );
  }
}

위의 전체 코드를 실행하면 앱이 시작되면 ‘시간 선택’ 버튼이 표시됩니다. 버튼을 누르면 TimePicker 다이얼로그가 표시되고 시간을 선택할 수 있습니다. 선택한 시간에 맞게 알림이 예약되고 표시됩니다.

이제 플러터 TimePicker에서 시간 선택 후 알림 설정하는 방법에 대해 알아보았습니다. 이를 기반으로 사용자가 선택한 시간에 알림을 설정하는 다양한 기능을 구현할 수 있습니다.

참고 자료:

Flutter 패키지 - flutter_local_notifications