--- title: "What’s New in 2020 Volume 4: Flutter Date Range Picker" published_at: "2021-01-05T11:48:28+00:00" modified_at: "2024-11-20T10:03:48+00:00" url: "https://www.syncfusion.com/blogs/post/whats-new-in-2020-volume-4-flutter-date-range-picker" excerpt: "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..." taxonomy_category: - "Flutter" - "Mobile" - "Syncfusion" - "UI" - "Web" - "What's new" taxonomy_post_tag: - "Android" - "Custom control" - "Flutter" - "iOS" - "Mobile" - "What's New" --- # What’s New in 2020 Volume 4: Flutter Date Range Picker [Nijamudeen](https://www.syncfusion.com/blogs/author/nijamudeensulaiman) ![What’s New in 2020 Volume 4 : Flutter Date Range Picker](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/What%E2%80%99s-New-in-2020-Volume-4-Flutter-Date-Range-Picker.png) The Flutter [Date Range Picker](https://www.syncfusion.com/flutter-widgets/flutter-daterangepicker) is packed with many awesome new features in our [Essential Studio® 2020 Volume 4 release](https://www.syncfusion.com/forums/160733/essential-studio-2020-volume-4-release-v18-4-0-30-is-available-for-download) . The [Date Range Picker](https://www.syncfusion.com/flutter-widgets/flutter-daterangepicker) 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](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Hijiri-Calendar-in-Date-Range-Picker-1.png) 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 { 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: [ 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](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Custom-Cell-Builder-in-Date-Range-Picker-1.png) 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](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Vertical-Picker-Feature-in-Date-Range-Picker.png) 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](https://www.syncfusion.com/flutter-widgets/flutter-daterangepicker) , available with our [2020 Volume 4 release](https://www.syncfusion.com/forums/160733/essential-studio-2020-volume-4-release-v18-4-0-30-is-available-for-download) . You can explore other features in the Date Range Picker [documentation](https://help.syncfusion.com/flutter/daterangepicker/overview) , 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](https://www.syncfusion.com/account/downloads) page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out our available features. Please feel free to try out the samples available in our [GitHub location](https://github.com/syncfusion/flutter-examples) and share your feedback or ask questions in the comments section. You can also contact us through our [support forum](https://www.syncfusion.com/forums) , [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents) , or [feedback portal](https://www.syncfusion.com/feedback/home) . We are always happy to assist you!