[flutter] 플러터 TimePicker에서 선택한 시간에 따른 알림 메시지 출력하기

07 Dec 2023

flutter

플러터(TimePicker)는 앱에서 시간을 선택하도록 도와주는 유용한 위젯입니다. 이 위젯을 사용하여 사용자가 선택한 시간에 따라 알림 메시지를 출력하는 방법에 대해 알아보겠습니다.

1. TimePicker 위젯 추가하기

먼저, 플러터 프로젝트에 TimePicker 위젯을 추가해야 합니다. 아래와 같이 코드를 작성하여 TimePicker 위젯을 띄우는 버튼을 생성합니다.

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TimePicker 알림'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            _showTimePicker(context);
          },
          child: Text('시간 선택하기'),
        ),
      ),
    );
  }

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

    if (selectedTime != null) {
      _scheduleNotification(selectedTime);
    }
  }

  void _scheduleNotification(TimeOfDay selectedTime) async {
    var time = Time(selectedTime.hour, selectedTime.minute, 0);
    var android = AndroidNotificationDetails(
      'channel id',
      'channel name',
      'channel description',
    );
    var platform = NotificationDetails(android: android);
    await flutterLocalNotificationsPlugin.showDailyAtTime(
      0,
      '오늘의 알림',
      '선택한 시간은 ${DateFormat('hh:mm').format(DateTime.now())}입니다.',
      time,
      platform,
      payload: '알림 메시지',
      androidAllowWhileIdle: true,
    );
  }
}

위의 코드에서 showTimePicker 메소드를 통해 TimePicker 다이얼로그를 띄운 뒤 선택한 시간을 파라미터로 받아 _scheduleNotification 메소드를 호출하여 알림을 예약합니다.

2. 알림 메시지 설정하기

_scheduleNotification 메소드에서 알림의 내용을 설정합니다. AndroidNotificationDetails 객체를 생성하여 알림 채널 정보를 설정하고, NotificationDetails 객체를 생성하여 알림의 상세 정보를 설정합니다. 마지막으로 flutterLocalNotificationsPlugin.showDailyAtTime 메소드를 호출하여 알림을 예약합니다.

3. 프로젝트 종속성 추가하기

위의 코드를 실행하기 위해서는 flutter_local_notifications 및 intl 패키지의 종속성을 추가해주어야 합니다. pubspec.yaml 파일을 열고 아래와 같이 패키지를 추가합니다.

dependencies:
  flutter_local_notifications: ^2.0.0+3
  intl: ^0.17.0

4. 실행하기

위의 코드를 모두 작성하였다면 앱을 실행하여 시간을 선택하고 알림이 예약되는지 확인할 수 있습니다.

이제 플러터 TimePicker를 사용하여 선택한 시간에 따라 알림 메시지를 출력하는 방법에 대해 알게 되었습니다.