DatePicker Example In Flutter

In this tutorial, you’ll find out how to make a DatePicker in Flutter. you’ll use DatePicker in your app to present the user with a Calendar view. Users can then use this calendar view to either select one among the dates on the calendar or just check the chosen date.

Here Is My DatePicker Example In Flutter

DatePicker Example In Flutter, datepicker in flutter, how to use datepicker in flutter, flutter datepicker, What is the correct way to add date picker in flutter app?, Flutter how to display datepicker when textformfield is clicked, How to get flutter datepicker value to the textfield in flutter ?, How to customize a date picker flutter ?

Displays user’s current date and therefore the button to present DatePicker.

DatePicker Example In Flutter, datepicker in flutter, how to use datepicker in flutter, flutter datepicker, What is the correct way to add date picker in flutter app?, Flutter how to display datepicker when textformfield is clicked, How to get flutter datepicker value to the textfield in flutter ?, How to customize a date picker flutter ?

Displays calendar view to let users select the date.

DatePicker Example In Flutter, datepicker in flutter, how to use datepicker in flutter, flutter datepicker, What is the correct way to add date picker in flutter app?, Flutter how to display datepicker when textformfield is clicked, How to get flutter datepicker value to the textfield in flutter ?, How to customize a date picker flutter ?

Follow all below Step to use DatePicker in Your Code. Happy Coding.

Step 1 Create DateTime Variable

To present DatePicker with a current date selected thereon , we’ll first got to get the present date value. we’ll use this current date value when creating a DatePicker object.
To get the present date in Flutter we use the DateTime object then call it’s now() function.

DateTime currentDate = DateTime.now();

With the above code example, we’ve declared a replacement currentDate object of DateTime data type and that we will use it when creating an instance of DatePicker. the worth of currentDate are going to be relevant to the user’s countryside .

Step 2 Creating Function to point out DatePicker

Below may be a basic code to make a replacement DatePicker in Flutter. to make a DatePicker in Flutter we use an asynchronous showDatePicker() function.

The _selectDate() method below, will call the showDatePicker() and can wait until the user selects the date. If the user presses the Cancel button then the showDatePicker() will return null otherwise, it’ll return the DateTime object representing the worth selected on the Calendar.

Future<void> _selectDate(BuildContext context) async {
  final DateTime pickedDate = await showDatePicker(
      context: context,
      initialDate: currentDate,
      firstDate: DateTime(2015),
      lastDate: DateTime(2050));
  if (pickedDate != null && pickedDate != currentDate)
    setState(() {
      currentDate = pickedDate;
    });
}

The showDatePicker() function takes during a few parameters:
initialDate – may be a date value which will be selected when the Calendar is presented. Here we use the currentDate object that we’ve created within the very first code snippet above.
firstDate – will contain the minimum date that the user can select. for instance , if you’ve got set it to 2002 then the user can’t select a date before 2002.
lastDate – is that the opposite of to firstDate it’ll contain the last date which the user can select. for instance , if you’ve got set it to 2050 then the user can’t select after 2050.

Step 3 fixing The UI

Now, that you simply skills to make a DatePicker in Flutter, let’s see how we will display it to the user.

Most of the time date picker is presented when the user taps on a button. Below may be a very simple code example, that displays a button within the center of the screen. When the user taps on a button, it’ll call the _selectDate() function. The _selectDate() function will create and display the DatePicker.

Scaffold(
      appBar: AppBar(
        title: Text("DatePicker"),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text(currentDate.toString()),
            SizedBox(
              height: 20.0,
            ),
            RaisedButton(
              onPressed: () => _selectDate(context),
              child: Text('Select date'),
            ),
          ],
        ),
      ),
    );

Once user has selected the date on the calendar, the calendar will disappear and therefore the selected date are going to be set to a Text() widget that’s located next to a button.

The Text widget has the worth of currentDate. If the user has not yet picked the Date then it’ll show the present date. If the user has selected the date then the _selectDate() function will return the chosen date and therefore the Text widget are going to be updated with the chosen date.

My Complete Code Example Here

Below may be a complete code example that uses all the code snippets we’ve created during this tutorial.

import 'dart:async';
import 'package:flutter/material.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 currentDate = DateTime.now();

  Future<void> _selectDate(BuildContext context) async {
    final DateTime pickedDate = await showDatePicker(
        context: context,
        initialDate: currentDate,
        firstDate: DateTime(2015),
        lastDate: DateTime(2050));
    if (pickedDate != null && pickedDate != currentDate)
      setState(() {
        currentDate = pickedDate;
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("DatePicker"),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text(currentDate.toString()),
            RaisedButton(
              onPressed: () => _selectDate(context),
              child: Text('Select date'),
            ),
          ],
        ),
      ),
    );
  }
}

Once the user selects the date on the calendar, the calendar will disappear and therefore the selected date are going to be displayed within the Text Widget.
I hope this Flutter tutorial is useful to you. If you’re curious about learning Flutter, please check other Flutter tutorials on this site. a number of them have video tutorials included.
Happy learning!

Summery

So it’s all About All possible solutions. Hope this above all solution helped you a lot. Comment below Your thoughts and your queries. Comment Below on your suggestion.

Check Out Below Article

TypeError: this.getOptions is not a function in vue.js

Leave a Comment

x