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.
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.
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;
});
}
}
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
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' ),
),
],
),
),
);
}
} |