[flutter] 플러터 TimePicker에서 선택한 시간 출력하기

07 Dec 2023

flutter

플러터(TimePicker)[^1]는 사용자로부터 시간을 선택할 수 있는 위젯입니다. 이번 포스트에서는 플러터 TimePicker에서 선택한 시간을 출력하는 방법에 대해 알아보겠습니다.

먼저, 플러터 앱에서 TimePicker를 사용하기 위해 flutter_material_pickers 라이브러리를 설치해야 합니다. 이 라이브러리는 편리하게 TimePicker를 사용할 수 있는 기능을 제공합니다.

다음은 flutter_material_pickers 라이브러리를 pubspec.yaml 파일에 추가하는 예시입니다:

dependencies:
  flutter_material_pickers: ^2.1.1

이제 TimePicker를 사용하여 시간을 선택하고 출력하는 코드를 작성해보겠습니다. 아래의 예시 코드를 참고하세요:

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

class TimePickerDemo extends StatefulWidget {
  @override
  _TimePickerDemoState createState() => _TimePickerDemoState();
}

class _TimePickerDemoState extends State<TimePickerDemo> {
  String selectedTime = '';

  Future<void> showTimePickerDialog() async {
    final time = await showMaterialTimePicker(
      context: context,
      builder: (context, child) {
        return MediaQuery(
          data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
          child: child,
        );
      },
    );

    if (time != null) {
      setState(() {
        selectedTime = '${time.hour}:${time.minute}';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('TimePicker Demo')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              selectedTime,
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: showTimePickerDialog,
              child: Text('시간 선택'),
            ),
          ],
        ),
      ),
    );
  }
}

위의 코드에서 showTimePickerDialog 메소드에서는 showMaterialTimePicker 함수를 사용하여 TimePicker 다이얼로그를 표시합니다. 사용자가 시간을 선택하면 선택한 시간이 time 변수에 저장됩니다. 선택된 시간을 문자열로 변환한 후 selectedTime 변수에 할당하고 화면에 출력됩니다.

builder 함수에서는 24시간 형식을 사용하기 위해 MediaQuery를 사용했습니다.

위 코드를 실행하면 “시간 선택” 버튼을 클릭하여 TimePicker를 열 수 있고, 선택한 시간은 화면에 출력됩니다.

이제 플러터 TimePicker에서 선택한 시간을 출력하는 방법에 대해 알아보았습니다. 원하는 시간 선택 기능을 앱에 추가하여 사용자가 편리하게 시간을 설정할 수 있도록 만들어보세요!

[링크] [^1]: https://api.flutter.dev/flutter/material/showTimePicker.html