Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (145).NET Core  (23)Angular  (40)ASP.NET  (47)ASP.NET Core  (54)ASP.NET MVC  (84)Azure  (28)Blazor  (57)DocIO  (18)Essential JS 2  (65)Essential Studio  (160)Flutter  (61)JavaScript  (135)Microsoft  (97)PDF  (50)React  (30)Succinctly series  (119)Syncfusion  (428)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (26)Webinar  (14)Windows Forms  (52)WPF  (98)Xamarin  (107)XlsIO  (20)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (100)Chart  (40)Cloud  (9)Company  (445)Dashboard  (5)Data Science  (3)Data Validation  (3)DataGrid  (31)Development  (238)Doc  (7)eBook  (90)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (14)Extensions  (8)File Manager  (3)Gantt  (7)Gauge  (4)Git  (3)Grid  (25)HTML  (8)Installer  (1)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (151)Mobile MVC  (9)OLAP server  (1)Orubase  (12)Partners  (20)PDF viewer  (18)Performance  (2)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (15)SfDataGrid  (7)Silverlight  (21)Sneak Peek  (12)Solution Services  (2)Spreadsheet  (2)SQL  (4)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (27)UI  (79)Uncategorized  (68)Unix  (2)User interface  (57)Visual State Manager  (1)Visual Studio  (14)Visual Studio Code  (8)Web  (120)What's new  (78)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
What’s New in 2020 Volume 4 : Flutter Date Range Picker

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!

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top