3.4 C
New York
Wednesday, February 1, 2023

Flutter Date Picker example

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:Advertisements

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.


Related Articles


Please enter your comment!
Please enter your name here

Latest Articles