How To Use Date Picker in Flutter

Hello Guys How are you all? Hope you all are fine. Today We are going to learn How To Use Date Picker in Flutter Complete Guide To Use DatePicker In Flutter.

Many Times We have to enter Date, Birthdate, Reservation date, Schedule date in Specific Field, etc. So How do we allow to the user to enter date with best User Experience in our Apps UI. we will use showDatePicker here

We must Have to use DatePicker there. As We know Flutter is All About Widget. So There is Los of way to use DatePicker in Flutter. so Lets Start this Tutorial without wasting your time.

How To Use Date Picker in Flutter

• First of All Import material.dart in your main.dart file.

import 'package:flutter/material.dart';

• Then, Define MyApp in your runApp.

void main() {
  runApp(MyApp());
}

• Now, define MyApp With StateLess Class. and pass home as Scaffold. in Scaffold use appbar, body, etc. I am Just pasting My Code here.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "DatePicker Example - FlutterCorner",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        cursorColor: Colors.grey,
        dialogBackgroundColor: Colors.white,
        colorScheme: ColorScheme.light(primary: Colors.black),
        buttonTheme: ButtonThemeData(textTheme: ButtonTextTheme.primary),
        highlightColor: Colors.grey[400],
        textSelectionColor: Colors.grey,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("DatePicker Example - FlutterCorner"),
          backgroundColor: Colors.black,
        ),
        body: DatePickerClass(),
      ),
    );
  }
}

• Then After making StatefulWidget named DatePickerClass as I define in my body. You can use your custom name.
• Then, let’s make a variable named selectedDate. We are passing default to date here.

  DateTime selectedDate = DateTime.now();

• Then After You have to implement where you want to define date picker. I am using RaisedButton to use DatePicker.

          RaisedButton(
            onPressed: () => _selectDate(context), // Refer step 3
            child: Text(
              'Pick Date',
              style:
                  TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
            ),
            color: Colors.black,
          ),

Lets Make Method to call showDatePicker function

  _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
      context: context,
      initialDate: selectedDate,
      firstDate: DateTime(2000),
      lastDate: DateTime(2025),
    );
    if (picked != null && picked != selectedDate)
      setState(() {
        selectedDate = picked;
      });
  }

• You can modify firstDate and lastDate as you need.

• You can use This Variable to get Selected Date selectedDate.

• Here is my full source code. for batter understanding.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "DatePicker Example - FlutterCorner",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        cursorColor: Colors.grey,
        dialogBackgroundColor: Colors.white,
        colorScheme: ColorScheme.light(primary: Colors.black),
        buttonTheme: ButtonThemeData(textTheme: ButtonTextTheme.primary),
        highlightColor: Colors.grey[400],
        textSelectionColor: Colors.grey,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("DatePicker Example - FlutterCorner"),
          backgroundColor: Colors.black,
        ),
        body: DatePickerClass(),
      ),
    );
  }
}

class DatePickerClass extends StatefulWidget {
  @override
  _DatePickerClassState createState() => _DatePickerClassState();
}

class _DatePickerClassState extends State<DatePickerClass> {
  DateTime selectedDate = DateTime.now();

  _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
      context: context,
      initialDate: selectedDate,
      firstDate: DateTime(2000),
      lastDate: DateTime(2025),
    );
    if (picked != null && picked != selectedDate)
      setState(() {
        selectedDate = picked;
      });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            "${selectedDate.toLocal()}".split(' ')[0],
            style: TextStyle(fontSize: 55, fontWeight: FontWeight.bold),
          ),
          SizedBox(
            height: 20.0,
          ),
          RaisedButton(
            onPressed: () => _selectDate(context), // Refer step 3
            child: Text(
              'Pick Date',
              style:
                  TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
            ),
            color: Colors.black,
          ),
        ],
      ),
    );
  }
}

Faq

Summery

So Guys That’s It For How to Create TabBar in Flutter Complete Guide To Make TabBar. Hope you like our tutorial. Comment below Your thoughts and your queries. And Also Comment below your suggestion here.

Also Check Out Below Tutorials

• How to make an AlertDialog in Flutter?
• How to Generate SHA-1 for Flutter/React-Native/Android-Native app? 3 Method Explained
• Also Read How to Create TabBar in Flutter Complete Guide To Make TabBar
• How to Change the App DisplayName in Flutter Application? 2 Method Explained
• How to set Background Color of a Screen in Flutter