플러터 DateRangePicker 위젯: 사용 방법 및 옵션 총정리(날짜범위선택)

 

Flutter로 앱을 개발할 때, 사용자가 날짜 범위를 선택할 수 있도록 하는 기능은 다양한 상황에서 유용하게 사용될 수 있습니다.

여행 예약, 일정 관리, 보고서 필터링 등에서 날짜 범위 선택이 필요할 때 Flutter의 DateRangePicker 위젯을 활용할 수 있습니다.

이번 포스팅에서는 DateRangePicker 위젯의 사용 방법과 다양한 옵션에 대해 자세히 알아보겠습니다.

DateRangePicker 위젯이란?

DateRangePicker는 Flutter에서 사용자가 시작일과 종료일을 선택할 수 있게 해주는 다이얼로그 위젯입니다.

이 위젯은 Flutter의 showDateRangePicker 함수를 통해 호출되며, 선택된 날짜 범위는 DateTimeRange 객체로 반환됩니다.

기본적인 DateRangePicker 사용법

DateRangePicker를 사용하려면 showDateRangePicker 함수를 호출해야 합니다.

이 함수는 다이얼로그를 표시하고, 사용자가 선택한 날짜 범위를 반환합니다. 기본적인 DateRangePicker 사용법은 다음과 같습니다.

import 'package:flutter/material.dart';

class DateRangePickerExample extends StatefulWidget {
  @override
  _DateRangePickerExampleState createState() => _DateRangePickerExampleState();
}

class _DateRangePickerExampleState extends State<DateRangePickerExample> {
  DateTimeRange? _selectedDateRange;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('DateRangePicker Example')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              onPressed: () async {
                DateTimeRange? picked = await showDateRangePicker(
                  context: context,
                  firstDate: DateTime(2020),
                  lastDate: DateTime(2030),
                );
                if (picked != null) {
                  setState(() {
                    _selectedDateRange = picked;
                  });
                }
              },
              child: Text('Pick Date Range'),
            ),
            if (_selectedDateRange != null)
              Padding(
                padding: const EdgeInsets.only(top: 20),
                child: Text(
                  'Selected range: ${_selectedDateRange!.start.toString()} - ${_selectedDateRange!.end.toString()}',
                ),
              ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 showDateRangePicker 함수가 호출되어 다이얼로그가 나타납니다.

사용자가 날짜 범위를 선택하면, 선택된 날짜 범위는 DateTimeRange 객체로 반환되며, 이를 화면에 표시할 수 있습니다.

DateRangePicker의 주요 옵션들

DateRangePicker는 다양한 옵션을 제공하여 사용자 경험을 맞춤화할 수 있습니다. 여기서는 자주 사용되는 옵션들을 살펴보겠습니다:

• context: 다이얼로그가 표시될 BuildContext를 지정합니다.
• firstDate: 선택할 수 있는 날짜의 최소값을 지정합니다.
• lastDate: 선택할 수 있는 날짜의 최대값을 지정합니다.
• initialDateRange: 다이얼로그가 열릴 때 기본적으로 선택되어 있는 날짜 범위를 지정합니다.
• currentDate: 현재 날짜를 지정합니다. 기본값은 DateTime.now()입니다.
• locale: 다이얼로그의 언어를 설정할 수 있습니다.
• textDirection: 텍스트 방향을 설정합니다 (예: TextDirection.rtl).
• builder: 다이얼로그를 커스터마이징할 수 있는 위젯 빌더를 제공합니다.

예제: 다양한 옵션 활용하기

다양한 옵션을 활용하여 DateRangePicker를 커스터마이징할 수 있습니다. 다음은 여러 옵션을 사용한 예제입니다.

import 'package:flutter/material.dart';

class CustomDateRangePickerExample extends StatefulWidget {
  @override
  _CustomDateRangePickerExampleState createState() =>
      _CustomDateRangePickerExampleState();
}

class _CustomDateRangePickerExampleState
    extends State<CustomDateRangePickerExample> {
  DateTimeRange? _selectedDateRange;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Custom DateRangePicker Example')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              onPressed: () async {
                DateTimeRange? picked = await showDateRangePicker(
                  context: context,
                  firstDate: DateTime(2021),
                  lastDate: DateTime(2025),
                  initialDateRange: DateTimeRange(
                    start: DateTime(2022, 1, 1),
                    end: DateTime(2022, 12, 31),
                  ),
                  locale: Locale('ko', 'KR'),
                  builder: (BuildContext context, Widget? child) {
                    return Theme(
                      data: ThemeData.dark(), // 다이얼로그 테마를 다크 모드로 설정
                      child: child!,
                    );
                  },
                );
                if (picked != null) {
                  setState(() {
                    _selectedDateRange = picked;
                  });
                }
              },
              child: Text('Pick Date Range'),
            ),
            if (_selectedDateRange != null)
              Padding(
                padding: const EdgeInsets.only(top: 20),
                child: Text(
                  'Selected range: ${_selectedDateRange!.start.toString()} - ${_selectedDateRange!.end.toString()}',
                ),
              ),
          ],
        ),
      ),
    );
  }
}

이 예제에서는 다음과 같은 옵션들을 사용했습니다:

• firstDate와 lastDate로 선택 가능한 날짜 범위를 제한했습니다.
• initialDateRange를 통해 기본적으로 선택된 날짜 범위를 설정했습니다.
• locale을 통해 다이얼로그의 언어를 한국어로 설정했습니다.
• builder를 사용해 다이얼로그의 테마를 다크 모드로 커스터마이징했습니다.

DateRangePicker 사용 시 주의사항

• 날짜 범위를 설정할 때 firstDate와 lastDate를 논리적으로 설정해야 합니다. 예를 들어, firstDate가 lastDate보다 미래로 설정되면 다이얼로그가 정상적으로 작동하지 않을 수 있습니다.
• 선택된 날짜 범위는 항상 DateTimeRange 객체로 반환되며, 이를 적절히 처리해야 합니다.

Flutter의 DateRangePicker는 사용자가 날짜 범위를 쉽게 선택할 수 있도록 해주는 편리한 도구입니다.

다양한 옵션을 통해 다이얼로그의 모양과 동작을 커스터마이징하여 더 나은 사용자 경험을 제공할 수 있습니다.

이 포스팅이 여러분의 Flutter 개발에 도움이 되기를 바랍니다!

공감과 댓글은 저에게 큰 힘이 됩니다.

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

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