The flutter, syncfusion date range picker is a widget that is used to select single or multiple dates along with the range between two dates. The use of this library makes the navigation between dates, weeks, months, years, and even centuries simple and easy.
The following are the key features of DatePicker:
1. Multiple Picker View:
This feature allows the user to navigate between dates, months, year, and centuries with ease as shown below:
2. Multi Date Picker View:
It supports selecting single and multiple dates and also supports selecting a range between two dates as shown below:
3. RLT support:
This feature is helpful for users who interact in a language that is written in Right to left manners like Arabic and Hebrew as shown below:
4. Globalization:
It also displays the current date-time according to global standards.
Now let's look into its implementation in a flutter application by building a simple application. To build the app, follow the below steps:
- Add the dependency to the pubspec.yaml file
- Import the dependency to the main.dart file
- Structure an app with a StatefulWidget
- Set the state for the dates
- Call the SfDateRangePicker method in the body of the app
Now, let's look into the steps in detail:
Adding the Dependency:
Add syncfusion_flutter_datepicker, in the dependencies section of the pubspec.yaml file as shown below:
Importing the dependency:
To import the dependency in the main.dart file, use the below line of code:
import 'package:syncfusion_flutter_datepicker/datepicker.dart';
Structuring the Application:
Use a StatefulWidget, and extend it to an appbar and a body for getting a simple app structure as shown below:
Dart
class MyApp extends StatefulWidget {
@override
MyAppState createState() => MyAppState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('GeeksForGeeks'),
backgroundColor: Colors.green,
),
body:
));
}
}
Setting the State:
The set that we will set up in the app will be responsible for storing the selected date/dates and information regarding the range if two dates are selected. It can be done as shown below:
Dart
class MyAppState extends State<MyApp> {
String _dateCount;
String _range;
@override
void initState() {
_dateCount = '';
_range = '';
super.initState();
}
void _onSelectionChanged(DateRangePickerSelectionChangedArgs args) {
setState(() {
if (args.value is PickerDateRange) {
_range =
DateFormat('dd/MM/yyyy').format(args.value.startDate).toString() +
' - ' +
DateFormat('dd/MM/yyyy')
.format(args.value.endDate ?? args.value.startDate)
.toString();
} else if (args.value is DateTime) {
} else if (args.value is List<DateTime>) {
_dateCount = args.value.length.toString();
}
});
}
Calling the SFDateRangePicker method:
The SFDateRangePicker method is an inbuilt method provided by the syncfusion_flutter_datepicker library to get the range between two dates. This method will be called inside the body of the application as shown below:
Dart
child: SfDateRangePicker(
onSelectionChanged: _onSelectionChanged,
selectionMode: DateRangePickerSelectionMode.range,
initialSelectedRange: PickerDateRange(
DateTime.now().subtract(const Duration(days: 4)),
DateTime.now().add(const Duration(days: 3))),
),
Complete Source Code:
Dart
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:syncfusion_flutter_datepicker/datepicker.dart';
void main() {
return runApp(MyApp());
}
/// app root
class MyApp extends StatefulWidget {
@override
MyAppState createState() => MyAppState();
}
/// app state
class MyAppState extends State<MyApp> {
String _dateCount;
String _range;
@override
void initState() {
_dateCount = '';
_range = '';
super.initState();
}
void _onSelectionChanged(DateRangePickerSelectionChangedArgs args) {
setState(() {
if (args.value is PickerDateRange) {
_range =
DateFormat('dd/MM/yyyy').format(args.value.startDate).toString() +
' - ' +
DateFormat('dd/MM/yyyy')
.format(args.value.endDate ?? args.value.startDate)
.toString();
} else if (args.value is DateTime) {
} else if (args.value is List<DateTime>) {
_dateCount = args.value.length.toString();
}
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('GeeksForGeeks'),
backgroundColor: Colors.green,
),
body: Stack(
children: <Widget>[
Positioned(
left: 0,
top: 80,
right: 0,
bottom: 0,
child: SfDateRangePicker(
onSelectionChanged: _onSelectionChanged,
selectionMode: DateRangePickerSelectionMode.range,
initialSelectedRange: PickerDateRange(
DateTime.now().subtract(const Duration(days: 4)),
DateTime.now().add(const Duration(days: 3))),
),
)
],
)));
}
}
Output:
Similar Reads
Flutter - Choice Chip ChoiceChips represent a single choice from a set. Choice chips contain related descriptive text or categories. Choice chip can be used in selecting the categories and in filtering the data, Code going to be simple to implement, there is no need to add the package into your pubspec yaml file, Syntax:
2 min read
DatePicker in Kotlin The Android DatePicker is a user interface component that allows users to select a date, including the day, month, and year. This control helps ensure that users select valid dates in an application. DatePicker offers two display modes:Calendar View: Displays a complete calendar for date selection.S
3 min read
Flutter - Dice Roller App Here, we will be building a simple dice app that rolls on click. For this, we will add a GestureDetector widget and when we click on it, the dice should roll. We can achieve this by wrapping the Image Widget in a GestureDetector Widget and changing dice images randomly in a callback function, which
4 min read
Flutter - CupertinoPicker Widget The CupertinoPicker widget in Flutter is part of the Cupertino-themed widgets that mimic the design and behavior of iOS widgets. It's specifically designed to create a scrollable list of items, allowing the user to select one item from the list by scrolling or picking it directly. In this article, w
5 min read
Camera Access in Flutter To add images from the camera in Flutter, we'll use the image_picker package. For this, you'll need to use your real device.Follow the below steps to display the images from the cameraStep 1: Create a new Flutter ApplicationCreate a new Flutter application using the command Prompt. To create a new a
3 min read
Flutter - Dialogs The dialog is a type of widget which comes on the window or the screen which contains any critical information or can ask for any decision. When a dialog box is popped up all the other functions get disabled until you close the dialog box or provide an answer. We use a dialog box for a different typ
5 min read
Slider Date Picker in Android Slider Date Picker is one of the most popular features that we see in most apps. We can get to see this Slider date picker in most of the travel planning applications, Ticket booking services, and many more. Using Slider date Picker makes it efficient to pick the date. In this article, we are going
3 min read
Format Dates in Flutter The Dart in-built method, for formatting, dates in Flutter according to the requirements is very limited and restrictive. While dealing with dates it should be in human-readable format but unfortunately, there's no way of formatting dates in flutter unless you make use of a third-party package.In th
3 min read
Flutter - CheckboxListTile CheckboxListTile is a built-in widget in flutter. We can say it a combination of CheckBox with a ListTile. Its properties such as value, activeColor, and checkColor are similar to the CheckBox widget, and title, subtitle, contentPadding, etc are similar to the ListTile widget. We can tap anywhere on
6 min read
DatePicker in Android DatePicker dialog is seen used in many android applications where we have to select the date. This widget is mostly seen in the hotel reservation applications for travel booking applications. With the help of this widget, we can simply pick the date from the DatePicker dialog. In this article, we wi
3 min read