Flutter Date Picker


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.

dependencies:
  flutter:
    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

dev_dependencies:
  flutter_test:
    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 {
  @override
  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`
  @override
  _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.
  @override
  void initState() {
    super.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
    _scaffoldKey.currentState
        .showBottomSheet<Null>(
          (BuildContext context) {
            return DateOfBirth(
              key: dobKey,
              setDate: _setDateOfBirth,
            );
          },
        )
        .closed
        .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() {
    Navigator.of(context).pop();

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

  @override
  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: () {
            _showBottomSheet();
          },
        ),
      ),
    );
  }
}

//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. This feedback helps us gauge our progress.

Help me Grow.

I set myself some growth ambitions I desire to achieve by this year's end regarding this website and my youtube channel. Am halfway. Help me reach them by:




Recommendations


What do You Think


Previous Post Next Post