We are pleased to introduce our new widget, the Date Range Picker, for the Flutter platform with our 2020 Volume 1 release. You can find the beta version of the Syncfusion Flutter date picker package in pub.dev.
The Syncfusion Flutter Date Range Picker is a lightweight widget that allows the users to easily select a single date, multiple dates, or a range of dates. It provides month, year, decade, and century view options to navigate quickly to the desired date. It supports minimum, maximum, and disabled dates to restrict the date selection.
Let’s now briefly see the features of the Date Range Picker, and then I’ll walk you through the steps to add one to your application. The following are the features of the Syncfusion Flutter Date Range Picker:
Display month, year, decade, and century views. Users can easily select and navigate among these built-in views. The widget supports programmatic navigation, too.
You can navigate back and forth among the date picker views and the different view modes.
You can select single, multiple, and a range of dates. The widget also supports programmatic selection.
This feature limits the date selection range to between a specific minimum and maximum date.
You can customize the first day of the week as needed. By default, the first day is Sunday.
You can disable any date in a calendar to make it inactive. You can also easily prevent the selection of weekends by disabling them.
By using decoration in the Flutter Date Range Picker, you can highlight any date or every weekend in a month as special days.
You can change the look and feel of the Date Range Picker by customizing its default appearance and style using a theme and Flutter decorations.
There is right-to-left direction support for users who are working in RTL languages like Hebrew and Arabic.
Screen readers have easy access to the Date Range Picker.
Display the current date and time with global date and time formats.
This section explains the creation of a simple date range picker Flutter application to demonstrate the basic usage.
Add the Syncfusion Flutter datepicker dependency in your pub sec file.
syncfusion_flutter_datepicker: ^18.1.0.42-beta
Run the following commands to get the required packages.
$ flutter pub get
Import the following package in your Dart code.
import 'package:syncfusion_flutter_datepicker/datepicker.dart';
After importing the package, initialize SfDateRangePicker as a child of any widget, such as a container widget.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: SfDateRangePicker(),
));
}
The Date Range Picker widget provides four different types of views to display. One can be assigned to the widget constructor using the view property. By default, the view of the widget is month view, and the current date will be displayed initially for all the Date Range Picker views.
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfDateRangePicker(
view: DateRangePickerView.year,
));
}
The Date Range Picker widget will be rendered with Sunday as the first day of the week. You can customize it to any day using the `firstDayOfWeek` property. The following code example illustrates this.
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfDateRangePicker(
view: DateRangePickerView.month,
monthViewSettings: DateRangePickerMonthViewSettings(firstDayOfWeek: 1),
));
}
The selected date or range details can be obtained using the `onSelectionChanged` callback. The callback will return the `DateRangePickerSelectionChangedArgs`, which contains the selected date or range details.
void _onSelectionChanged(DateRangePickerSelectionChangedArgs args) {
// TODO: implement your code here
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
child: SfDateRangePicker(
onSelectionChanged: _onSelectionChanged,
selectionMode: DateRangePickerSelectionMode.range,
),
),
),
);
}
Disable any date in a calendar to make it inactive. Easily prevent the selection of any dates by disabling them. The following code example illustrates this.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SfDateRangePicker(
controller: _pickerController,
view: DateRangePickerView.month,
monthViewSettings: DateRangePickerMonthViewSettings(
blackoutDates: [
DateTime.now().add((Duration(days: 2))),
DateTime.now().add((Duration(days: 7))),
DateTime.now().add((Duration(days: 11))),
DateTime.now().add((Duration(days: 17)))
]),
),
),
);
}
You can check out many examples of Syncfusion’s Flutter widgets in this GitHub location. Additionally, take a look at our demo app in the Play Store and App Store.
If you want an in-depth learning experience on how to create a complete Flutter app, be sure to read Flutter Succinctly by Ed Freitas. It’s part of Syncfusion’s library of free technical ebooks.
In this blog post, we walked through our new Syncfusion Flutter Date Range Picker and its features, available with our 2020 Volume 1 release. Try this new control and share your feedback in the comments section.
Also, if you need a new widget in the Flutter framework, please let us know in the comments section. You can also contact us through our support forum, Direct-Trac, or feedback portal. As always, we are happy to assist you!