showDatePicker, showTimePicker, showDateRangePicker

import 'package:flutter/material.dart';

class SettingsScreen extends StatelessWidget {
  const SettingsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Settings'),
      ),
      body: ListView(
        children: [
          ListTile(
            onTap: () async {
              final date = await showDatePicker(
                context: context,
                initialDate: DateTime.now(),
                firstDate: DateTime(1980),
                lastDate: DateTime(2030),
              );
              print(date);
              final time = await showTimePicker(
                context: context,
                initialTime: TimeOfDay.now(),
              );
              print(time);
              final booking = await showDateRangePicker(
                context: context,
                firstDate: DateTime(1980),
                lastDate: DateTime(2030),
                builder: (context, child) {
                  return Theme(
                    data: ThemeData(
                        appBarTheme: const AppBarTheme(
                            foregroundColor: Colors.white,
                            backgroundColor: Colors.black)),
                    child: child!,
                  );
                },
              );
              print(booking);
            },
            title: const Text("What is your birthday?"),
          ),
          const AboutListTile(),
        ],
      ),
    );
  }
}

이 코드는 SettingsScreen이라는 StatelessWidget을 정의하며, 이 화면에는 앱 바와 리스트 뷰가 포함되어 있습니다. 리스트 뷰의 주요 항목들은 다음과 같습니다:

1. Date and Time Pickers: 사용자가 탭할 때마다 날짜, 시간 및 날짜 범위를 선택하도록 프롬프트하는 ListTile입니다.

   • showDatePicker: Flutter에서 제공하는 기본 날짜 선택 위젯입니다. 여기서는 현재 날짜를 기본값으로 하며, 사용자는 1980년부터 2030년까지의 날짜 중에서 선택할 수 있습니다.

   • showTimePicker: Flutter에서 제공하는 기본 시간 선택 위젯입니다. 여기서는 현재 시간을 기본값으로 사용합니다.

   • showDateRangePicker: Flutter에서 제공하는 날짜 범위 선택기입니다. 사용자는 1980년부터 2030년까지의 기간 동안 날짜 범위를 선택할 수 있습니다. 또한, builder를 사용하여 위젯의 테마를 커스터마이즈 할 수 있습니다. 이 예제에서는 날짜 범위 선택기의 앱 바의 전경색을 흰색, 배경색을 검은색으로 설정합니다.

2. AboutListTile: 위에서 설명한 Flutter의 기본 위젯으로, 앱의 정보 창을 표시합니다.

ListTile의 onTap 이벤트 핸들러에서는 각각의 피커가 순차적으로 표시되며, 각 선택 후에는 해당 값을 콘솔에 출력합니다.

이 코드를 실행하면 "Settings"라는 제목의 앱 바가 있는 화면이 표시됩니다. 사용자가 "What is your birthday?" 항목을 탭하면 날짜, 시간, 날짜 범위 선택기가 순차적으로 나타납니다.

showDatePicker, showTimePicker, showDateRangePicker는 모두 Flutter에서 제공하는 시간 및 날짜와 관련된 대화상자 선택기들입니다. 이들의 특징과 차이점에 대해서 분석해보겠습니다.

1. showDatePicker:

   • 특징:
     • 날짜를 선택하는 대화 상자입니다.
     • initialDate로 초기 날짜를 설정할 수 있습니다.
     • firstDate와 lastDate로 사용자가 선택할 수 있는 날짜의 범위를 제한할 수 있습니다.
   • 차이점:
     • 날짜만 선택할 수 있으며, 시간이나 날짜 범위는 선택할 수 없습니다.

2. showTimePicker:

   • 특징:
     • 시간을 선택하는 대화 상자입니다.
     • initialTime으로 초기 시간을 설정할 수 있습니다.
     • 24시간 형식 또는 오전/오후 형식으로 시간을 표시할 수 있습니다.
   • 차이점:
     • 시간만 선택할 수 있으며, 날짜나 날짜 범위는 선택할 수 없습니다.

3. showDateRangePicker:

   • 특징:
     • 시작 날짜와 종료 날짜를 포함하는 날짜 범위를 선택하는 대화 상자입니다.
     • firstDate와 lastDate로 사용자가 선택할 수 있는 날짜의 범위를 제한할 수 있습니다.
     • builder를 사용하여 대화 상자의 모양과 느낌을 사용자 지정할 수 있습니다.
   • 차이점:
     • 사용자는 두 개의 날짜(시작 및 종료)를 선택하여 범위를 지정합니다. 단일 날짜나 시간만을 선택하는 것이 아닙니다.

결론:

• showDatePicker는 단일 날짜를 선택하기 위한 것입니다.
• showTimePicker는 단일 시간을 선택하기 위한 것입니다.
• showDateRangePicker는 날짜 범위를 선택하기 위한 것입니다.

따라서 사용자에게 원하는 정보(날짜, 시간, 날짜 범위)를 입력받기 위해 적절한 선택기를 사용해야 합니다.