플러터 showTimePicker 위젯 사용법: 초보자를 위한 쉬운 가이드

 

플러터에서 showTimePicker 위젯을 사용하는 방법에 대해 알아보겠습니다.

showTimePicker는 사용자가 시간을 선택할 수 있게 해주는 대화상자(Dialog)입니다. 이 위젯을 활용하면 사용자에게 직관적이고 깔끔한 시간 선택 인터페이스를 제공할 수 있습니다.

그럼, showTimePicker의 기본 사용법과 주요 옵션을 단계별로 살펴보겠습니다.

showTimePicker란?

 

showTimePicker는 사용자가 시간을 선택할 수 있도록 도와주는 플러터의 내장 위젯입니다.

이 위젯을 사용하면 간편하게 시간을 선택할 수 있는 대화상자를 화면에 띄울 수 있습니다.

기본 사용법

showTimePicker를 사용하기 위해서는 showTimePicker 함수를 호출해야 합니다.

이 함수는 BuildContext와 TimeOfDay 객체를 파라미터로 받습니다. 기본적인 예제 코드를 살펴보겠습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Time Picker Example'),
        ),
        body: Center(
          child: TimePickerExample(),
        ),
      ),
    );
  }
}

class TimePickerExample extends StatefulWidget {
  @override
  _TimePickerExampleState createState() => _TimePickerExampleState();
}

class _TimePickerExampleState extends State<TimePickerExample> {
  TimeOfDay _selectedTime = TimeOfDay.now();

  Future<void> _selectTime(BuildContext context) async {
    final TimeOfDay? picked = await showTimePicker(
      context: context,
      initialTime: _selectedTime,
    );
    if (picked != null && picked != _selectedTime) {
      setState(() {
        _selectedTime = picked;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('Selected Time: ${_selectedTime.format(context)}'),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () => _selectTime(context),
          child: Text('Select Time'),
        ),
      ],
    );
  }
}

주요 옵션 및 파라미터

1. context

showTimePicker 함수에서 context는 현재 위젯 트리의 컨텍스트를 의미합니다. 이 값은 대화상자가 표시될 위치를 결정합니다.

2. initialTime

initialTime은 대화상자가 열렸을 때 기본으로 표시되는 시간입니다. TimeOfDay 객체를 사용하여 설정할 수 있습니다. 예를 들어, TimeOfDay(hour: 14, minute: 30)은 오후 2시 30분을 의미합니다.

3. use24HourFormat

use24HourFormat 옵션은 24시간 형식을 사용할지 여부를 결정합니다. 기본값은 시스템 설정에 따라 달라집니다. true로 설정하면 24시간 형식으로, false로 설정하면 12시간 형식으로 표시됩니다.

final TimeOfDay? picked = await showTimePicker(
  context: context,
  initialTime: _selectedTime,
  use24HourFormat: true, // 24시간 형식 사용
);

추가 팁

• 커스터마이즈: showTimePicker의 기본 UI는 플러터의 Material Design을 따릅니다. 커스터마이징이 필요하다면, 대화상자를 직접 구성하거나 서드파티 패키지를 활용하는 것도 좋은 방법입니다.
• 에러 핸들링: 사용자 선택을 기다리는 동안 예외가 발생할 수 있습니다. 적절한 에러 핸들링을 통해 사용자 경험을 향상시킬 수 있습니다.

마무리

Flutter의 showTimePicker 위젯은 시간 선택을 쉽게 구현할 수 있는 유용한 도구입니다.

이 위젯을 활용하면 사용자에게 직관적이고 깔끔한 인터페이스를 제공할 수 있습니다.

오늘 소개한 기본 사용법과 주요 옵션을 참고하여 여러분의 앱에 적합한 시간 선택 기능을 구현해 보세요!

 

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱