Full Article At Here How To Use Date Picker in Flutter
Hello Guys How are you all? Hope you all are fine. Today We are going to learn How To Use Date Picker in Flutter Complete Guide To Use DatePicker In Flutter.
Many Times We have to enter Date, Birthdate, Reservation date, Schedule date in Specific Field, etc. So How do we allow to the user to enter date with best User Experience in our Apps UI. we will use showDatePicker here
We must Have to use DatePicker there. As We know Flutter is All About Widget. So There is Los of way to use DatePicker in Flutter. so Lets Start this Tutorial without wasting your time.
How To Use Date Picker in Flutter
First of All Import material.dart in your main.dart file.
import 'package:flutter/material.dart';
Then, Define MyApp in your runApp.
void main() {
runApp(MyApp());
}
Now, define MyApp With StateLess Class. and pass home as Scaffold. in Scaffold use appbar, body, etc. I am Just pasting My Code here.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "DatePicker Example - FlutterCorner",
debugShowCheckedModeBanner: false,
theme: ThemeData(
cursorColor: Colors.grey,
dialogBackgroundColor: Colors.white,
colorScheme: ColorScheme.light(primary: Colors.black),
buttonTheme: ButtonThemeData(textTheme: ButtonTextTheme.primary),
highlightColor: Colors.grey[400],
textSelectionColor: Colors.grey,
),
home: Scaffold(
appBar: AppBar(
title: Text("DatePicker Example - FlutterCorner"),
backgroundColor: Colors.black,
),
body: DatePickerClass(),
),
);
}
}
Then After making StatefulWidget named DatePickerClass as I define in my body. You can use your custom name.
Then, let’s make a variable named selectedDate. We are passing default to date here.
DateTime selectedDate = DateTime.now();
Then After You have to implement where you want to define date picker. I am using RaisedButton to use DatePicker.
RaisedButton(
onPressed: () => _selectDate(context), // Refer step 3
child: Text(
'Pick Date',
style:
TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
),
color: Colors.black,
),
Lets Make Method to call showDatePicker function
_selectDate(BuildContext context) async {
final DateTime picked = await showDatePicker(
context: context,
initialDate: selectedDate,
firstDate: DateTime(2000),
lastDate: DateTime(2025),
);
if (picked != null && picked != selectedDate)
setState(() {
selectedDate = picked;
});
}
You can modify firstDate and lastDate as you need.
You can use This Variable to get Selected Date selectedDate.
Here is my full source code. for batter understanding.
Full Article At Here How To Use Date Picker in Flutter
Top comments (0)