What’s New in 2020 Volume 4: Flutter Date Range Picker | Syncfusion Blogs
Detailed Blog page Skeleton loader
What’s New in 2020 Volume 4 : Flutter Date Range Picker

The Flutter Date Range Picker is packed with many awesome new features in our Essential Studio 2020 Volume 4 release.

The Date Range Picker is a lightweight widget that allows users to easily select a single date, multiple dates, or a range of dates. It provides month, year, decade, and century views to quickly navigate to a desired date. It supports minimum, maximum, and disabled dates feature to restrict date selection.

Let’s see its new features!

Hijri calendar

Along with the Gregorian calendar, the Flutter Date Range Picker allows you to display the Hijri calendar. It is an Islamic calendar and you can display it using the SfHijriDateRangePicker property in the Date Range Picker package.

Refer to the following code example.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(body: SfHijriDateRangePicker()),
  );
}
Hijiri Calendar in Date Range Picker
Hijiri Calendar in Date Range Picker

Cell builder

This feature allows you to design your own custom view for the month and year cells by customizing the cellBuilder property.

Refer to the following code.

class MyAppState extends State<MyApp> {
  DateRangePickerController _controller;

  @override
  void initState() {
    _controller = DateRangePickerController();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: SfDateRangePicker(
              controller: _controller,
			  cellBuilder:
                (BuildContext context, DateRangePickerCellDetails details) {
              final bool isToday = isSameDate(details.date, DateTime.now());
              final bool isBlackOut = isBlackedDate(details.date.day);
              final bool isSpecialDate = isSpecialDay(details.date.day);
              return Container(
                margin: EdgeInsets.all(2),
                padding: EdgeInsets.only(top: kIsWeb ? 5 : 10),
                decoration: BoxDecoration(
                    color: Colors.blueAccent,
                    border: isToday
                        ? Border.all(color: Colors.black, width: 2)
                        : null),
                child: Column(
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Text(
                      details.date.day.toString(),
                      style: TextStyle(
                        fontSize: kIsWeb ? 11 : 15,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    isBlackOut
                        ? Icon(
                            Icons.block_sharp,
                            size: 13,
                          )
                        : isSpecialDate
                            ? Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Icon(
                                    Icons.cake,
                                    size: 13,
                                  ),
                                  Icon(
                                    Icons.celebration,
                                    size: 13,
                                  ),
                                  Icon(
                                    Icons.audiotrack,
                                    size: 13,
                                  )
                                ],
                              )
                            : Container()
                  ],
                ),
              );
            },
              )),
    );
  }
}
Custom Cell Builder in Date Range Picker
Custom Cell Builder in Date Range Picker

Vertical picker

You can arrange two date range pickers vertically using the enableMultiView and navigationDirection properties.

Refer to the following code.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
        body: SfDateRangePicker(
      enableMultiView: true,
      navigationDirection: DateRangePickerNavigationDirection.vertical,
      viewSpacing: 10,
    )),
  );
}
Vertical Picker Feature in Date Range Picker
Vertical Picker Feature in Date Range Picker

Conclusion

In this blog post, we walked you through the new features in our Flutter Date Range Picker, available with our 2020 Volume 4 release. You can explore other features in the Date Range Picker documentation, where you can find detailed explanations and code examples.

For existing customers, the newest version of Essential Studio is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out our available features.

Please feel free to try out the samples available in our GitHub location and share your feedback or ask questions in the comments section. You can also contact us through our support forumDirect-Trac, or feedback portal. We are always happy to assist you!

googleplay.png

Be the first to get updates

Nijamudeen

Meet the Author

Nijamudeen

Nijamudeen is the product manager for the Syncfusion Xamarin and Flutter platforms, who build highly scalable custom controls that drive Syncfusion's product vision forward.