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.
'Flutter > Widget' 카테고리의 다른 글
플러터 Opacity 위젯 완벽 가이드: 투명도 조절로 세련된 UI 만들기 (0) | 2024.09.01 |
---|---|
플러터 BackdropFilter 위젯 완벽 가이드: 배경 블러 효과로 세련된 UI 만들기 (0) | 2024.09.01 |
플러터 ChoiceChip 위젯: 사용 방법 및 옵션 총정리 (0) | 2024.08.29 |
플러터 ErrorWidget 커스터마이징: 사용자 친화적인 에러 화면 구현하기 (0) | 2024.08.29 |
플러터에서 AutoComplete 위젯 사용법 및 주요 옵션 완벽 가이드(추천항목) (0) | 2024.08.29 |