[flutter] 플러터 DatePicker를 사용한 주간 날짜 선택
이번 글에서는 Flutter 애플리케이션에서 주간 날짜를 선택하는 방법에 대해 다루겠습니다. 플러터의 DatePicker를 이용하여 사용자가 간단하게 주간 날짜를 선택할 수 있는 기능을 구현할 것입니다.
주간 날짜 선택 위젯 만들기
Flutter에서 주간 날짜 선택을 위한 위젯을 구현해보겠습니다. 먼저, 사용자가 주간 날짜를 선택할 수 있는 DatePicker 위젯을 만들기 위해 다음의 코드를 사용할 수 있습니다.
import 'package:flutter/material.dart';
class WeeklyDatePicker extends StatefulWidget {
@override
_WeeklyDatePickerState createState() => _WeeklyDatePickerState();
}
class _WeeklyDatePickerState extends State<WeeklyDatePicker> {
DateTime _selectedDate = DateTime.now();
Future<void> _selectDate(BuildContext context) async {
final DateTime picked = await showDatePicker(
context: context,
initialDate: _selectedDate,
firstDate: DateTime(2021),
lastDate: DateTime(2023),
selectableDayPredicate: (DateTime day) {
return day.weekday == DateTime.monday;
},
);
if (picked != null && picked != _selectedDate)
setState(() {
_selectedDate = picked;
});
}
@override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: () => _selectDate(context),
child: Text("Select Weekly Date"),
);
}
}
이 코드에서는 WeeklyDatePicker라는 StatefulWidget을 정의하고, showDatePicker를 이용하여 주간 날짜를 선택할 수 있도록 구현하였습니다. 선택 가능한 날짜는 2021년부터 2023년까지의 월요일로 제한하였습니다.
주간 날짜 선택 위젯 사용하기
이렇게 구현한 WeeklyDatePicker 위젯을 다른 화면에서 사용하여 주간 날짜를 선택할 수 있습니다. 다음은 해당 위젯을 사용하는 예시 코드입니다.
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('Weekly Date Picker Example'),
),
body: Center(
child: WeeklyDatePicker(),
),
),
);
}
}
이와 같이, WeeklyDatePicker 위젯을 다른 위젯 안에서 호출하여 사용할 수 있습니다.
결론
이번 글에서는 Flutter에서 주간 날짜 선택을 위한 DatePicker를 만들고 활용하는 방법에 대해 알아보았습니다. 사용자가 간편하게 주간 날짜를 선택할 수 있는 기능을 구현함으로써, 애플리케이션의 사용자 경험을 향상시킬 수 있을 것입니다.
이제 주간 날짜 선택을 위한 위젯을 만들고 사용하는 방법에 대해 알게 되었습니다. 플러터를 통해 사용자가 자신의 필요에 맞게 주간 날짜를 선택할 수 있는 다양한 기능을 구현해보시기 바랍니다.