[flutter] 플러터 TimePicker에서 알림음 설정 기능

07 Dec 2023

flutter

안녕하세요! 플러터(Flutter)를 사용하여 알림음을 설정할 수 있는 TimePicker에 대해 알아보겠습니다.

1. TimePicker 위젯 추가하기

먼저, flutter_datetime_picker 패키지를 사용하여 TimePicker 위젯을 추가합니다. pubspec.yaml 파일에 패키지를 추가해주세요.

dependencies:
  flutter_datetime_picker: ^1.5.1

패키지를 추가한 후, pub get 명령어를 실행하여 패키지를 다운로드 받습니다.

2. 알림음 설정 기능 구현하기

TimePicker 위젯을 추가한 후, 알림음을 설정할 수 있도록 다음과 같이 코드를 작성합니다.

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

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  TimeOfDay selectedTime = TimeOfDay.now();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('알림음 설정'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                DatePicker.showTimePicker(
                  context,
                  showTitleActions: true,
                  onChanged: (date) {},
                  onConfirm: (time) {
                    setState(() {
                      selectedTime = time;
                    });
                  },
                );
              },
              child: Text(
                '알림음 설정',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            SizedBox(height: 20),
            Text(
              '선택한 시간: ${selectedTime.format(context)}',
              style: TextStyle(
                fontSize: 18,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위의 코드에서 DatePicker.showTimePicker를 사용하여 TimePicker를 호출하고, 사용자가 시간을 선택하면 onConfirm 콜백 함수가 호출됩니다. 이 함수에서 선택한 시간을 selectedTime 변수에 저장하여 상태를 업데이트하고, 화면에 선택한 시간을 표시합니다.

3. 알림음 설정 결과 확인하기

위의 코드를 실행하면 ‘알림음 설정’ 버튼을 누르면 TimePicker가 나타나고, 사용자가 시간을 선택하면 선택한 시간이 나타납니다.

이제, 선택된 시간을 이용하여 알림음을 설정하는 기능을 추가할 수 있습니다.

정리

위의 예제를 참고하여 플러터(TimePicker)에서 알림음을 설정하는 기능을 구현해보았습니다. 선택한 시간을 사용하여 실제로 알림음을 설정하는 기능을 추가할 수 있습니다.

더 많은 정보와 예제 코드는 flutter_datetime_picker 패키지 문서를 참고해주세요.