Flutter Date Picker example

Last updated on March 7, 2022 Augustus Loading... Post a comment

Flutter has a built-in function named showDatePicker that can help us easily implement a date picker.



The complete code with explanations in lib/main.dart:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return const MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Flutter Example',
      home: MyHomePage(),

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  _MyHomePageState createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
  DateTime? _selectedDate;

  void _presentDatePicker() {
    // showDatePicker is a pre-made funtion of Flutter
            context: context,
            initialDate: DateTime.now(),
            firstDate: DateTime(2020),
            lastDate: DateTime.now())
        .then((pickedDate) {
      // Check if no date is selected
      if (pickedDate == null) {
      setState(() {
        // using state so that the UI will be rerendered when date is picked
        _selectedDate = pickedDate;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Example'),
      body: Column(children: [
        // Show the Date Picker when this button clicked
            onPressed: _presentDatePicker, child: const Text('Select Date')),

        // display the selected date
          padding: const EdgeInsets.all(30),
          child: Text(
            _selectedDate != null
                ? _selectedDate.toString()
                : 'No date selected!',
            style: const TextStyle(fontSize: 30),

Further reading:

You can also check out our Flutter category page or Dart category page for the latest tutorials and examples.

Notify of
Inline Feedbacks
View all comments

Related Articles