How to show date picker in Flutter? -Flutter showDatePicker function

The showDatePicker() function in Flutter displays a dialog with a Material Design date picker. Let’s see how we can use this function.

How to show date picker in flutter?

You call the showDatePicker() function like this –

DateTime date = DateTime.now();
showDatePicker(
                    context: context,
                    initialDate: date,
                    firstDate: DateTime(2012),
                    lastDate: DateTime(2025));

Let’s know about the initialDate parameter. When you open a dialogue to select a date in an app, you see the dialogue appears with a pre-selected date with month of the pre-selected date. Something like the image below. Here, Oct 2 is pre-selected.

We do this in flutter by passing the initialDate parameter to the showDatePicker() function (See the code above). In our case, I’m displaying the current date. You get the current date by calling the DateTime.now() function.

Now, what are firstDate and lastDate parameters?

What if you don’t want the user to select a date before the year 2012 and after the year 2025? You can do this by passing the firstDate and the lastDate parameters to the showDatePicker() function. I passed 2012 as the firstDate and 2025 as the lastDate. See the images below. I can’t select a date before 2012 or a date after 2025.

Here’s the code for it.

The showDatePicker() function returns a Future. The returned Future resolves to the date the user selects when the user confirms the dialog. If the user cancels the dialog, null is returned.

You can see the above code that I simply used toString() on the date object. I didn’t format the date here. See the output below.

Now, we want to format the date and show the date like the image below.

To do this first we need to add a dependency to our project’s pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  intl: ^0.17.0

Import the package:

import 'package:intl/intl.dart';

Now, you can format the date like this:

DateFormat('d/M/y').format(date)

Here’s the code.

Now, here’s the full code.

import 'dart:async';
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: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime date = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Date picker example"),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text(DateFormat('d/M/y').format(date)),
            SizedBox(
              height: 20.0,
            ),
            RaisedButton(
              onPressed: () async {
                    DateTime? pickedDate = await showDatePicker(
                    context: context,
                    initialDate: date,
                    firstDate: DateTime(2012),
                    lastDate: DateTime(2025));
                if (pickedDate != null) {
                  setState(() {
                    date = pickedDate;
                  });
                }
              },
              child: Text('Select date'),
            ),
          ],
        ),
      ),
    );
  }
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: