Blog

In this post, I will show you how to use a flutter datepicker. The flutter datepicker needs one more extra flutter package.

Package name:- Intl.

Why we used “Intl” package…?

This package provides internationalization and localization facilities, including message translation, plurals and genders, date/number formatting and parsing, and bidirectional text.

For more information, you can find this package into Flutter official package website. I used the latest version of this package.

1)intl: ^0.16.1(Add this into your pubspec.yaml file)

2)import ‘package:intl/intl.dart’;

1)main.dart

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

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DatePicker(),
    );
  }
}

2)datePicker.dart

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

class DatePicker extends StatefulWidget {
  DatePicker({showDate});
  @override
  _DatePickerState createState() => _DatePickerState();
}

class _DatePickerState extends State<DatePicker> {
  DateTime selected;

  _showDateTimePicker() async {
    selected = await showDatePicker(
      context: context,
      initialDate: new DateTime.now(),
      firstDate: new DateTime(1960),
      lastDate: new DateTime(2050),
    );
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {

    var showDate = new Column(
      children: <Widget>[
        selected != null
            ? new Text(
          new DateFormat('EEE MMM d').format(selected),
          style: new TextStyle(
              color: Colors.white,
              fontSize: 20.0,
              fontWeight: FontWeight.bold),
        ): new SizedBox(
          width: 0.0,
          height: 0.0,
        ),
      ],
    );

  return Scaffold(
     appBar: AppBar(
       title: Text("Date and Time"),
       centerTitle: true,
       backgroundColor: Color(0xFF38819C),
       ),
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            // Where the linear gradient begins and ends
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Color(0xFF38819C),
              Color(0xFF51B9E1),
            ],
          ),
        ),
        child:Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(Icons.arrow_left,size: 40,color: Colors.white),
                SizedBox(width: 10),
                showDate,                 // date
                SizedBox(width: 10),
                Icon(Icons.arrow_right,size: 40,color: Colors.white),
              ],
            ),
            SizedBox(height: 20),
            IconButton(icon: FaIcon(FontAwesomeIcons.solidCalendarAlt,
                  color: Colors.white,
                  size: 30,
                ),
                onPressed: () => _showDateTimePicker())
          ],
        ),
      ),
    );
  }
}

Output