Show the Date picker on TextField in flutter

Introduction

In this article, I will be showing you how you can show the android or IOS date picker dialog and then display the value in a text field widget in Flutter, you will also learn how you can format the value to your liking.

The Flutter date picker dialog is a material widgetthat allows your user to select a date based on the reason you give them, for example, to enter their date of birth, Book a ticket, Make a restaurant reservation, Schedule a meeting, etc.

The original source of this article can be found here.

What is Flutter:

A brief explanation is quoted by the official flutter website which says Flutter is an open-source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase. To learn more about flutter you can check out the official flutter website and the official flutter doc.

So before we continue we will take this in a step-by-step approach so it can be very simple to grab even for a beginner 😊, so let's begin.

Install The Needed Package:

Before we can even begin it is best will install a single package from the pub website, this package let us format the date value which we will get from the date picker dialog to our desired format. you first need to open a terminal pointing to your project folder path, then in the terminal input this command below and press enter

flutter pub add intl

This will install the latest version of the intl package (also known as the flutter favorite), don't forget to run pub get in case your flutter project can't find the intl package path. after installing the intl package you will have to import the package path to your flutter project, use this snippet below to do so

import 'package:intl/intl.dart';

now let's head on to the next part.

Creating a Simple Text Feild:

Without wasting our time I will create the text-field widget and I will explain what each line of code does, here is the code snippet below

TextEditingController datePickerController = TextEditingController();
TextField(
    controller: datePickerController,
    readOnly: true,
    decoration: const InputDecoration(hintText: "Click here to select date"),
    onTap: () => onTapFunction(context: context),
)

So here is what am doing, first of all, I create a TextEditingController variable called datePickerController, and then I created a text field widget and in the text field widget I added 4 parameters, I will list the below

• The controller parameters (this lets us add value to the text field and lots more, the controller value is the value I first specified above the text field widget)
• The readOnly parameters (I bet you didn't know this one exist. If this is set to true, it stops the text field from accepting a value)
• The decoration parameters (This does a lot but am only using it to add a placeholder text to the text field)
• The onTap parameters (This lets us run any functions we can any time the text field dictates a tap event from the users)

From the snippet above you will notice that the onTap event passes 1 parameter to a function called onTapFunction (we are about to create this function), The parameter is the BuildContext the date picker material widget need for it to display itself.

So now lets us see how the above flutter snippet will look on our Android or IOS phone (This also works for the web at least I think so). Preview below

Creating The On Tap Function:

I will now create a function that will handle the tap event from the text field widget after that I will explain what the snippet does so here is the code snippet below

onTapFunction({required BuildContext context}) async {
  DateTime? pickedDate = await showDatePicker(
    context: context,
    lastDate: DateTime.now(),
    firstDate: DateTime(2015),
    initialDate: DateTime.now(),
  );
  if (pickedDate == null) return;
  datePickerController.text = DateFormat('yyyy-MM-dd').format(pickedDate);
}

From the above snippet, we created a function called onTapFunction this function will be called any time the text field widget detects a tap event, note that this function is an async (asynchronous) function, so this function will bring up the date picker material widget and then you will have to select a date, so to make sure this does not gives us any error as we can't be so sure our user might actually select a date, we put in an if statement that checks if the returned value from the date picker is null is so then it won't do anything (in you case you might decide to show your user some warning telling them to select a date), but if the returned value is not empty them it will set the text field value to the value of the date picker. Do you also notice how we formatted the returned value to a "year, month, day" format (this is the work of the intl package we installed earlier)? anyways here is a quick preview below

For those of you that are lazy 😅, here is the full code snippet below, you can just copy and paste it into your main file and run it

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: MyHomePage());
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: TextField(
        controller: datePickerController,
        readOnly: true,
        decoration:
            const InputDecoration(hintText: "Click here to select date"),
        onTap: () => onTapFunction(context: context),
      ),
    );
  }
}

TextEditingController datePickerController = TextEditingController();
onTapFunction({required BuildContext context}) async {
  DateTime? pickedDate = await showDatePicker(
    context: context,
    lastDate: DateTime.now(),
    firstDate: DateTime(2015),
    initialDate: DateTime.now(),
  );
  if (pickedDate == null) return;
  datePickerController.text = DateFormat('yyyy-MM-dd').format(pickedDate);
}

Conclusion

We have hereby come to the end of this article, and by now I do believe you much have archived what you came here for, if not so then do comment below on the error you faced and I will do my possible best to help you on it but if you have archived what you came here for then do share this article as that will encourage us to do more better. Thanks and take care 💓.