플러터 showDatePicker 위젯 사용 방법 및 옵션: 초보자를 위한 완벽 가이드

Flutter는 현대 모바일 애플리케이션 개발을 위한 강력한 도구로, 그 중에서도 날짜 선택을 위한 showDatePicker 위젯은 매우 유용합니다.

이 블로그 포스트에서는 showDatePicker 위젯의 기본 사용법과 옵션을 상세히 설명하여, 초보자들도 손쉽게 이해하고 활용할 수 있도록 돕겠습니다.

showDatePicker 위젯이란?

 

showDatePicker는 Flutter의 showDialog 메서드를 이용해 화면에 날짜 선택기를 표시해주는 위젯입니다.

사용자가 날짜를 선택할 수 있도록 도와주며, 일반적으로 양식 작성, 예약 시스템, 필터링 옵션 등에서 유용하게 사용됩니다.

showDatePicker 기본 사용법

showDatePicker는 비동기 함수로, 날짜 선택기의 결과를 반환합니다. 기본적인 사용법은 다음과 같습니다.

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('Date Picker Example')),
        body: Center(child: DatePickerDemo()),
      ),
    );
  }
}

class DatePickerDemo extends StatelessWidget {
  Future<void> _selectDate(BuildContext context) async {
    final DateTime? selectedDate = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2000),
      lastDate: DateTime(2101),
    );

    if (selectedDate != null && selectedDate != DateTime.now()) {
      // 선택된 날짜를 사용하거나 처리하는 로직을 추가합니다.
      print('Selected date: ${selectedDate.toLocal()}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => _selectDate(context),
      child: Text('Select Date'),
    );
  }
}

위 코드에서 showDatePicker는 사용자가 날짜를 선택할 수 있는 다이얼로그를 표시합니다.

initialDate, firstDate, lastDate는 필수 인자입니다.

showDatePicker 주요 옵션

1. context

• 설명: 현재 BuildContext를 전달합니다. 다이얼로그가 어느 화면에서 표시될지를 결정합니다.

2. initialDate

• 설명: 날짜 선택기가 처음 열릴 때 기본으로 선택된 날짜를 지정합니다. 일반적으로 현재 날짜를 지정합니다.

3. firstDate

• 설명: 사용자가 선택할 수 있는 최소 날짜를 설정합니다. 이 날짜 이전의 날짜는 선택할 수 없습니다.

4. lastDate

• 설명: 사용자가 선택할 수 있는 최대 날짜를 설정합니다. 이 날짜 이후의 날짜는 선택할 수 없습니다.

5. selectableDayPredicate

• 설명: 특정 날짜를 선택할 수 없도록 제한할 때 사용합니다. DateTime을 매개변수로 받아 bool을 반환하는 함수입니다.

6. builder

• 설명: 날짜 선택기 다이얼로그의 UI를 커스터마이즈할 때 사용합니다. builder를 통해 테마를 변경하거나 추가적인 UI 요소를 추가할 수 있습니다.

사용 예제

다음 예제는 특정 날짜 범위만 선택할 수 있도록 제한하는 방법을 보여줍니다.

Future<void> _selectDate(BuildContext context) async {
  final DateTime? selectedDate = await showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(2000),
    lastDate: DateTime(2101),
    selectableDayPredicate: (DateTime date) {
      return date.weekday != DateTime.saturday && date.weekday != DateTime.sunday;
    },
  );

  if (selectedDate != null && selectedDate != DateTime.now()) {
    print('Selected date: ${selectedDate.toLocal()}');
  }
}

위 코드에서는 주말(토요일, 일요일)을 선택할 수 없도록 제한합니다.

 

showDatePicker는 Flutter에서 날짜를 선택하는 데 매우 유용한 위젯입니다.

기본적인 사용법부터 다양한 옵션을 활용하여 날짜 선택기의 기능을 확장하는 방법까지 알아보았습니다.

이 가이드가 여러분의 Flutter 앱 개발에 도움이 되기를 바랍니다.

 

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

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