Introducing Date Range Picker Widget in Flutter

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:

• Multiple calendar view modes
• Quick navigation
• Date selection
• Date selection range limits
• First day of the week customization
• Blackout dates
• Holiday and weekend highlighting
• Appearance customization
• Right to left (RTL) rendering
• Accessibility
• Globalization

Multiple calendar view modes

Display month, year, decade, and century views. Users can easily select and navigate among these built-in views. The widget supports programmatic navigation, too.

Quick navigation

You can navigate back and forth among the date picker views and the different view modes.

Date selection

You can select single, multiple, and a range of dates. The widget also supports programmatic selection.

Limit the date selection range

This feature limits the date selection range to between a specific minimum and maximum date.

First day of week

You can customize the first day of the week as needed. By default, the first day is Sunday.

Blackout dates

You can disable any date in a calendar to make it inactive. You can also easily prevent the selection of weekends by disabling them.

Highlight holidays and weekends

By using decoration in the Flutter Date Range Picker, you can highlight any date or every weekend in a month as special days.

Appearance customization

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.

Right to left (RTL) rendering

There is right-to-left direction support for users who are working in RTL languages like Hebrew and Arabic.

Accessibility

Screen readers have easy access to the Date Range Picker.

Globalization

Display the current date and time with global date and time formats.

Add Flutter Date Range Picker to your app

This section explains the creation of a simple date range picker Flutter application to demonstrate the basic usage.

Add dependency

Add the Syncfusion Flutter datepicker dependency in your pub sec file.

syncfusion_flutter_datepicker: ^18.1.0.42-beta

Get packages

Run the following commands to get the required packages.

$ flutter pub get

Import package

Import the following package in your Dart code.

import 'package:syncfusion_flutter_datepicker/datepicker.dart';

Add a Date Range Picker to the widget tree

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(),
  ));
}

Change calendar views

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,
  ));
}

Change the first day of the week

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),
  ));
}

Date selection

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,
        ),
      ),
    ),
  );
}

Adding blackout dates

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)))
            ]),
      ),
    ),
  );
}

Explore Flutter examples and demos

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.

Conclusion

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!