Flutter의 시간 선택기(Time Picker) 사용법

Flutter에서 시간 선택기(Time Picker)는 사용자가 시간을 선택할 수 있도록 하는 인터페이스 요소입니다. 시간 선택기는 주로 알람 설정, 예약 시스템 등 다양한 애플리케이션에서 사용됩니다. Flutter는 간단하고 직관적인 시간 선택기를 제공하여 개발자가 쉽게 구현할 수 있도록 합니다. 이번 글에서는 Flutter의 showTimePicker 함수와 관련 위젯을 사용하여 시간 선택기를 구현하는 방법에 대해 자세히 살펴보겠습니다.

1. 기본 시간 선택기 사용법

기본 시간 선택기를 표시하려면 showTimePicker 함수를 사용합니다. 이 함수는 비동기적으로 작동하며, 사용자가 시간을 선택하면 해당 시간을 반환합니다.

 

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 Demo')),
        body: TimePickerDemo(),
      ),
    );
  }
}

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

class _TimePickerDemoState extends State<TimePickerDemo> {
  TimeOfDay? _selectedTime;

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text(
            _selectedTime == null
                ? 'No time selected!'
                : 'Selected Time: ${_selectedTime!.format(context)}',
          ),
          SizedBox(height: 20.0),
          ElevatedButton(
            onPressed: () => _selectTime(context),
            child: Text('Select time'),
          ),
        ],
      ),
    );
  }
}

 

위 코드는 사용자가 버튼을 눌러 시간 선택기를 열고, 선택한 시간을 텍스트 위젯에 표시하는 예제입니다. showTimePicker 함수는 선택된 시간을 반환하며, setState를 사용하여 상태를 업데이트합니다.

2. 초기 시간 설정

시간 선택기를 열 때 기본으로 선택된 시간을 설정하려면 initialTime 속성을 사용합니다. 이 속성은 선택기에서 처음 표시될 시간을 지정합니다.

 

initialTime: TimeOfDay(hour: 9, minute: 0),

 

위 코드는 초기 시간을 오전 9시 0분으로 설정합니다.

3. 24시간 형식 사용

기본적으로 시간 선택기는 12시간 형식을 사용하지만, use24HourFormat 속성을 설정하여 24시간 형식을 사용할 수 있습니다.

 

Future<void> _selectTime(BuildContext context) async {
  final TimeOfDay? picked = await showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
    builder: (BuildContext context, Widget? child) {
      return MediaQuery(
        data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
        child: child!,
      );
    },
  );
  if (picked != null && picked != _selectedTime) {
    setState(() {
      _selectedTime = picked;
    });
  }
}

 

위 코드는 시간 선택기를 24시간 형식으로 표시합니다.

 

반응형

 

4. 시간 선택기의 테마 변경

시간 선택기의 테마를 변경하려면 Theme 위젯을 사용하여 테마 데이터를 설정할 수 있습니다.

 

Future<void> _selectTime(BuildContext context) async {
  final TimeOfDay? picked = await showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
    builder: (BuildContext context, Widget? child) {
      return Theme(
        data: ThemeData.light().copyWith(
          colorScheme: ColorScheme.light(
            primary: Colors.purple,
            onPrimary: Colors.white,
            surface: Colors.blue,
            onSurface: Colors.black,
          ),
          dialogBackgroundColor: Colors.white,
        ),
        child: child!,
      );
    },
  );
  if (picked != null && picked != _selectedTime) {
    setState(() {
      _selectedTime = picked;
    });
  }
}

 

위 코드는 시간 선택기의 테마 색상을 변경하는 예제입니다. primary, onPrimary, surface, onSurface 등의 색상을 설정하여 시간 선택기의 외관을 커스터마이징합니다.

5. 시간 선택기와 텍스트 필드 통합

시간 선택기를 텍스트 필드와 통합하여 사용자가 텍스트 필드를 클릭하면 시간 선택기가 열리도록 할 수 있습니다.

 

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

class _TimePickerDemoState extends State<TimePickerDemo> {
  TextEditingController _controller = TextEditingController();

  Future<void> _selectTime(BuildContext context) async {
    final TimeOfDay? picked = await showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
    );
    if (picked != null) {
      setState(() {
        _controller.text = picked.format(context);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: TextField(
        controller: _controller,
        decoration: InputDecoration(
          icon: Icon(Icons.access_time),
          labelText: 'Enter Time',
        ),
        readOnly: true,
        onTap: () => _selectTime(context),
      ),
    );
  }
}

 

위 코드는 텍스트 필드를 클릭하면 시간 선택기가 열리고, 선택한 시간이 텍스트 필드에 표시됩니다.

결론

showTimePicker 함수는 Flutter 애플리케이션에서 사용자가 시간을 선택할 수 있도록 하는 매우 유용한 도구입니다. 기본 사용법부터 초기 시간 설정, 24시간 형식 사용, 테마 변경, 텍스트 필드와 통합 등 다양한 기능을 활용하여 사용자 경험을 향상시킬 수 있습니다. 시간 선택기를 적절히 활용하여 직관적이고 효율적인 사용자 인터페이스를 제공하는 애플리케이션을 만들어보세요.