DatePicker is a material widget in a flutter that lets the user select a date. Since there is no widget available for creating a date picker we will use showDatePicker() function.
It will display a Material Design date picker in a dialog by calling flutter’s inbuilt function. We will use it in instances like booking a movie ticket, train ticket, etc.
A date picker is a helpful addition to your UI that makes it easy for your app users to select dates from a calendar.
Whether you’re adding a date of birth field to a registration form or offering time slots for users to book an appointment, you can use a date picker library to simplify the process.
You may also check our flutter app development services
Date Picker in Flutter
The Flutter Datetime Picker is easy to customize, supporting date and time selection in multiple languages. Flutter Datetime Picker is simple to install and provides a sleek, user-friendly interface.
Lets Start implementation
Add package
|
1 2 3 4 |
dependencies: flutter: sdk: flutter intl: ^0.17.0 |
Code to pick date
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
DateTime? pickedDate = await showDatePicker( context: context, initialDate: DateTime.now(), firstDate: DateTime(1950), //DateTime.now() - not to allow to choose before today. lastDate: DateTime(2100)); if (pickedDate != null) { print( pickedDate); //pickedDate output format => 2021-03-10 00:00:00.000 String formattedDate = DateFormat('yyyy-MM-dd').format(pickedDate); print( formattedDate); //formatted date output using intl package => 2021-03-16 setState(() { dateInput.text = formattedDate; //set output date to TextField value. }); } else {} |
Complete Code for Date Picker In Flutter
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: "Date Picker", home: HomePage(), ); } } class HomePage extends StatefulWidget { @override State<StatefulWidget> createState() { return _HomePage(); } } class _HomePage extends State<HomePage> { TextEditingController dateInput = TextEditingController(); @override void initState() { dateInput.text = ""; //set the initial value of text field super.initState(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("DatePicker in Flutter"), backgroundColor: Colors.redAccent, //background color of app bar ), body: Container( padding: EdgeInsets.all(15), height: MediaQuery.of(context).size.width / 3, child: Center( child: TextField( controller: dateInput, //editing controller of this TextField decoration: InputDecoration( icon: Icon(Icons.calendar_today), //icon of text field labelText: "Enter Date" //label text of field ), readOnly: true, //set it true, so that user will not able to edit text onTap: () async { DateTime? pickedDate = await showDatePicker( context: context, initialDate: DateTime.now(), firstDate: DateTime(1950), //DateTime.now() - not to allow to choose before today. lastDate: DateTime(2100)); if (pickedDate != null) { print( pickedDate); //pickedDate output format => 2021-03-10 00:00:00.000 String formattedDate = DateFormat('yyyy-MM-dd').format(pickedDate); print( formattedDate); //formatted date output using intl package => 2021-03-16 setState(() { dateInput.text = formattedDate; //set output date to TextField value. }); } else {} }, )))); } } |
Thanks for reading this article ❤
I hope this blog will help you to learn about the DatePicker in Flutter and you will be able to implement it.
For more updates, make sure to keep following Mobikul Blogs to learn more about mobile app development.
Happy Learning ✍️
4 comments
Your’s welcome.
You will get other useful blogs from Mobikul Blogs.
Reference Link-> https://mobikul.com/blog/