[flutter] 플러터에서 시간 선택기 구현하기

11 Dec 2023

flutter

플러터(Flutter) 앱을 개발할 때 사용자가 시간을 선택할 수 있는 기능을 구현하는 방법에 대해 알아보겠습니다. 시간 선택기는 플러터의 다양한 위젯을 활용하여 간단하게 구현할 수 있습니다.

1. 기본 시간 선택기 구현하기

먼저, 플러터에서 제공하는 기본 시간 선택기 위젯을 사용하여 간단한 시간 선택기를 구현하는 방법을 살펴보겠습니다. 아래의 예제 코드는 시간을 선택할 수 있는 기본 시간 선택기를 구현하는 예시입니다.

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('시간 선택기'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              showTimePicker(
                context: context,
                initialTime: TimeOfDay.now(),
              );
            },
            child: Text('시간 선택'),
          ),
        ),
      ),
    );
  }
}

위의 코드에서는 showTimePicker 함수를 사용하여 기본 시간 선택기를 호출하는 예제입니다. 사용자가 버튼을 누르면 시간 선택기가 나타나며, 선택한 시간을 처리하는 로직을 추가할 수 있습니다.

2. 커스텀 시간 선택기 구현하기

플러터에서는 커스텀 시간 선택기를 만들 수도 있습니다. 커스텀 시간 선택기를 만들 때는 다양한 위젯을 조합하여 사용자 경험을 향상시킬 수 있습니다. 아래의 예제 코드는 커스텀 디자인의 시간 선택기를 구현하는 예시입니다.

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('커스텀 시간 선택기'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 커스텀 시간 선택기 로직 구현
            },
            child: Text('시간 선택'),
          ),
        ),
      ),
    );
  }
}

위의 코드에서는 ElevatedButton 위젯을 사용하여 사용자가 시간 선택 버튼을 누를 수 있도록 구현되어 있습니다. 사용자가 버튼을 누르면 커스텀 시간 선택기 화면이 나타나며, 선택한 시간을 처리하는 로직을 추가할 수 있습니다.

마무리

플러터에서 시간 선택기를 구현하는 방법을 살펴보았습니다. 기본 시간 선택기를 활용하거나 커스텀 시간 선택기를 만들어 사용자가 편리하게 시간을 선택할 수 있도록 구현할 수 있습니다. 사용자 경험을 고려하여 적절한 방법으로 시간 선택기를 구현하여 플러터 앱을 더욱 유용하게 만들 수 있습니다.

참고 자료: 플러터 공식 문서