DateRangePicker Widget With Flutter 1.20 Release

· 4 min read
DatePicker Widget with Flutter 1.20
DatePicker Widget with Flutter 1.20

Flutter lets you create beautiful, natively compiled applications. The reason Flutter can do this is that Flutter loves Material Design. Material Design is a design system that helps build high-quality, digital experiences. As UI design continues to evolve, Material continues to update its components, motion, and design system. In this article, we will discuss DateRangePicker Widget, DatePicker Widget, TimePicker Widget with example.

To enable you to build Flutter apps that are ever more beautiful, 1.20  release has several UI enhancements, including the long-awaited features like listed below:

  • Support for autofill
  • Jank Improvements
  • A new way to layer your widgets to support pan and zoom
  • New mouse cursor support
  • Updates to old favorite Material widgets such as the time and date pickers.
  • A whole new responsive license page for the About box in your desktop and mobile form-factor Flutter apps.
  • Null safety has been added to dart.dev

In this article, we will discuss DateRangePicker Widget, DatePicker Widget, TimePicker Widget in detail.

  • DatePicker Widget will have code snippet like below:

Create a DatePicker function using below code snippet:

datePicker() async {
   DateTime picked = await showDatePicker(
     context: context,
     initialDate: DateTime.now(),
     firstDate: DateTime(DateTime.now().year - 5),
     lastDate: DateTime(DateTime.now().year + 5),
   );
   print(picked);
 }

Now create a RaisedButton Widget which will give us a DatePicker Widget.

RaisedButton(
        onPressed: () {
          datePicker();
        },
        child: Text("Date picker"),
      ),

We will get output like below:

DatePicker Widget

DatePicker Widget

  • TimePicker Widget has a completely new updated design. Code Snippet will look like below:
timePicker() async {
  TimeOfDay picked = await showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
  );
  print(picked);
}

Create a RaisedButton Widget like below:

RaisedButton(
       onPressed: () {
         timePicker();
       },
       child: Text("Time picker"),
     ),

We will get output like below:

Time Picker Widget

Time Picker Widget

  • DateRangePicker Widget will has code snippet like below:

Code Snippet will look like below:

dateTimeRangePicker() async {
  DateTimeRange picked = await showDateRangePicker(
    context: context,
    firstDate: DateTime(DateTime.now().year - 5),
    lastDate: DateTime(DateTime.now().year + 5),
    initialDateRange: DateTimeRange(
      end: DateTime(
          DateTime.now().year, DateTime.now().month, DateTime.now().day + 13),
      start: DateTime.now(),
    ),
  );
  print(picked);
}

Now we will call the above function onPressed() method of a RaisedButton Widget.

RaisedButton(
        onPressed: () {
          dateTimeRangePicker();
        },
        child: Text("DateRange Picker"),
      ),

We will get output like below:

DateRange Picker Widget

DateRangePicker Widget

Thanks for reading it out.

In the next article, we will go through the Slider Widget and RangeSlider Widget.

Do let us know your valuable feedback to serve you better.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.