Flutter Date Picker

| Page Views: 2000

Flutter DatePicker Tutorial and Example

In this piece we see how to use DatePicker to pick and show dates using a nice bottomsheet in flutter.

The ability to pick dates is one of the most important aspects of any user interface framework. And certainly Flutter is a framework for android applications development. Flutter allows us be pick dates with various libraries out there we can use. One such is the flutter_date_picker which we use in this project.

Through it we will be able to pick dates and show in a snackbar.

Flutter DatePicker Example

Here's the landscape:

Flutter DatePicker Example

Video tutorial(ProgrammingWizards TV Channel)

Well we have a video tutorial as an alternative to this. If you prefer tutorials like this one then it would be good you subscribe to our YouTube channel. Basically we have a TV for programming where do daily tutorials especially android.

What is Flutter Date Picker

It's a Cupertino styled date picker component which works on both ios and android. This is a third party library we are using and will allow us to easily implement a nice beautiful datepicker.

You can find it here.

Here are the files we explore:

  1. pubspec.yaml
  2. lib/main.dart

(a). pubspec.yaml

This is where we add our dependencies:

name: mr_datetimepicker
description: A new Flutter project.

    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  flutter_date_picker: ^0.1.2

    sdk: flutter

You can see we've used the flutter_date_picker library.

(b). main.dart

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

// Our MyApp class.
class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue,),
      home: Home(),

// A widget that has mutable state.

class Home extends StatefulWidget {
  //Creates the mutable state for this widget at a given location in the tree.
  //We override this method to return a newly created instance of our `_HomeState`
  _HomeState createState() => _HomeState();

//Our HomeState
//State is information that can be read synchronously when the widget is built
//and might change during the lifetime of the widget.
class _HomeState extends State<Home> {
  //GlobalKey is allows us create a key that is unique across the entire app.
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  //`VoidCallback` is a Signature of callbacks that have no arguments and return no data
  // defined in the `dart.ui` package
  VoidCallback _showBottomSheetCallback;
  //boolean value
  bool showDatePicker = false;

  //`initState` will be called when this object is inserted into the tree.
  void initState() {
    _showBottomSheetCallback = _showBottomSheet;

  //let's show a SnackBar at the bottom of the scaffold.
  void _snackBar(String text) {
    //GlobalKey gives us the `currentState` property which allows invoke the `showSnackBar()`
    // hence showing State for the widget in the tree that currently has this global key.
    _scaffoldKey.currentState.showSnackBar(SnackBar(content: Text(text)));

  //our private `_showBottomSheet` method
  _showBottomSheet() {
    //Again Notify the framework that the internal state of this object has changed.
    setState(() {
      // disable the button
      _showBottomSheetCallback = null;
    //show bottom sheet
          (BuildContext context) {
            return DateOfBirth(
              key: dobKey,
              setDate: _setDateOfBirth,
        .whenComplete(() {
          //`State.mounted()` returns a boolean indicating whether this State object
          //is currently in a tree.
          if (mounted) {
            // `setState` will notify the framework that the internal state of
            // this object has changed
            setState(() {
              // re-enable the button
              _showBottomSheetCallback = _showBottomSheet;

  void _setDateOfBirth() {

    _snackBar(dobKey.currentState.dobStrMonth +
        ' ${dobKey.currentState.dobDate}' +
        ' ${dobKey.currentState.dobYear}');

  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        backgroundColor: Color(0xFFF98495),
        title: Text('Mr DatePicker'),
      body: Container(
        padding: EdgeInsets.all(10.0),
        alignment: Alignment.topCenter,
        child: RaisedButton(
          color: Color(0xFFF98495),
          child: Text('Choose Date'),
          onPressed: () {

//Top level main method
void main() => runApp(MyApp());

How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section.

About Me.

After completing his Software Engineering bachelors program, Oclemy(Clement Ochieng) these days is a man of two lives. At day he works for a startup in Nairobi, Kenya. At night he works tirelessly on building ProgrammingWizards TV, a tv channel for student coders and this website to help share the source code. In between he practices Meditation and Self actualization to help him keep balance. He also likes going for long solo walks to connect more with nature.


What do You Think

Previous Post Next Post