Flutter – Set MIN and MAX Selectable Dates in DatePicker
In Flutter, a DatePicker is a widget that provides a user interface for selecting dates. It allows users to choose a specific date from a calendar-like interface. Flutter doesn’t have a built-in DatePicker widget, but you can create a date picker using the showDatePicker function, which displays a date picker dialog to select a date. In this article, we are going to set a MIN Date and MAX Date to the DatePicker showing that the user cannot select a date below the MIN Date and select beyond the MAX Date. Here the min date is 01/2023 and the max date is 12/2023. A sample video is given below to get an idea about what we are going to do in this article.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Import the Package
First of all import material.dart file.
import 'package:flutter/material.dart';
Step 3: Execute the main Method
Here the execution of our app starts.
Dart
void main() => runApp(MyApp()); |
Step 4: Create MyApp Class
In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.
Dart
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.green, // Set the app's primary theme color ), debugShowCheckedModeBanner: false , home: MyDatePicker(), ); } } |
Step 5: Create MyDatePicker Class
- This class contains a Future _selectDate function is responsible for showing the date picker dialog when called.This function takes the current BuildContext, the initialDate, firstDate, and lastDate as parameters. It displays a dialog that allows the user to select a date within the specified range and awaits the user’s selection.
- This class also contains a DateTime variable named selectedDate, which holds the currently selected date. It initially gets set to the current date and time using DateTime.now().
- When the user selects a date from the date picker dialog, the picked variable will be set to the chosen date if it’s not null. If a date is selected, the setState method is called to update the selectedDate variable with the chosen date.
- Here the min date is 01/2023 and the max date is 12/2023 .
Comments are added for better understanding.
// Function to show the date picker dialog
Future<void> _selectDate(BuildContext context) async {
// Display the date picker and await user selection
final DateTime? picked = await showDatePicker(
context: context,
initialDate:
selectedDate, // Set the initial date to the currently selected date
firstDate: DateTime(2023, 1), // Set the minimum selectable date
lastDate: DateTime(2023, 12), // Set the maximum selectable date
);
if (picked != null) {
// If a date is selected, update the selectedDate variable and rebuild the UI
setState(() {
selectedDate = picked;
});
}
}
Dart
class MyDatePicker extends StatefulWidget { @override _MyDatePickerState createState() => _MyDatePickerState(); } class _MyDatePickerState extends State<MyDatePicker> { // Declare a variable to store the selected date DateTime selectedDate = DateTime.now(); // Function to show the date picker dialog Future< void > _selectDate(BuildContext context) async { // Display the date picker and await user selection final DateTime? picked = await showDatePicker( context: context, initialDate: selectedDate, // Set the initial date to the currently selected date firstDate: DateTime(2023, 1), // Set the minimum selectable date lastDate: DateTime(2023, 12), // Set the maximum selectable date ); if (picked != null) { // If a date is selected, update the selectedDate variable and rebuild the UI setState(() { selectedDate = picked; }); } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( 'Date Picker Example' ), ), body: Center( child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ // Display the selected date in a large text widget Text( "${selectedDate.toLocal()}" .split( ' ' )[0], style: TextStyle(fontSize: 55, fontWeight: FontWeight.bold), ), SizedBox( height: 20.0, ), // Button to open the date picker dialog ElevatedButton( onPressed: () => _selectDate(context), child: Text( 'Select date' ), ), ], ), ), ); } } |
Here is the full Code of main.dart file
Dart
import 'package:flutter/material.dart' ; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.green, // Set the app's primary theme color ), debugShowCheckedModeBanner: false , home: MyDatePicker(), ); } } class MyDatePicker extends StatefulWidget { @override _MyDatePickerState createState() => _MyDatePickerState(); } class _MyDatePickerState extends State<MyDatePicker> { // Declare a variable to store the selected date DateTime selectedDate = DateTime.now(); // Function to show the date picker dialog Future< void > _selectDate(BuildContext context) async { // Display the date picker and await user selection final DateTime? picked = await showDatePicker( context: context, initialDate: selectedDate, // Set the initial date to the currently selected date firstDate: DateTime(2023, 1), // Set the minimum selectable date lastDate: DateTime(2023, 12), // Set the maximum selectable date ); if (picked != null) { // If a date is selected, update the selectedDate variable and rebuild the UI setState(() { selectedDate = picked; }); } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( 'Date Picker Example' ), ), body: Center( child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ // Display the selected date in a large text widget Text( "${selectedDate.toLocal()}" .split( ' ' )[0], style: TextStyle(fontSize: 55, fontWeight: FontWeight.bold), ), SizedBox( height: 20.0, ), // Button to open the date picker dialog ElevatedButton( onPressed: () => _selectDate(context), child: Text( 'Select date' ), ), ], ), ), ); } } |