flutter date time picker example

flutter date time picker example

Hi flutter developer, Welcome to codeplayon, In this Flutter Tutorial we gonna discuss the flutter date time picker. So let’s do that flutter date time picker example an essayist way to implement with dependency. A date-time picker is a widget library using which you’re in flutter app user can easily select date or time. Like you want to add some of the fields in your project that wants to show date and time. When you click on these show date and time and the user can select it.

date time picker form field flutter.

So friends lest make the example just follow some simple steps. First, you can open your project if you have an existing otherwise you can create a new one.  Then add the following date time picker dependencies, what this does is that it downloads all the required packages into our flutter project as External Libraries. Add dependency in your pubspec.yaml  file. After adding the dependencies just click on Packages Get.

dependencies:
 flutter_datetime_picker: ^1.3.5 //add this line

 

The next step let’s do to making UI and implement of date picker and time picker. Flutter date time picker library with the example below see full source code. Open your main.dart file and clear all code and user below code if you create a new project. if you add in your existing project create the method and used the below code.

Main.dart File full Source code.

import 'package:flutter/material.dart';
import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  var pickeddate;
  var pickedtime;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Flutter Date time Picker"),
        ),
        body: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              SizedBox(
                height: 50.0,
              ),
              FloatingActionButton.extended(
                onPressed: () {
                  DatePicker.showTime12hPicker(context,
                      showTitleActions: true,
                      currentTime: DateTime.now(), onConfirm: (time) {
                        setState(() {
                          pickedtime =
                          "Picked time is : ${time.hour} : ${time.minute} : ${time.second}";
                        });
                      });
                },
                label: Text("Set Time"),
                icon: Icon(Icons.timer),
              ),
              SizedBox(
                height: 25,
              ),
              FloatingActionButton.extended(
                onPressed: () {
                  DatePicker.showDatePicker(context,
                      showTitleActions: true,
                      minTime: DateTime(2018, 3, 5),
                      maxTime: DateTime(2026, 6, 7), onChanged: (date) {
                        print('change $date');
                        setState(() {
                          pickeddate = "${date.day}";
                        });
                      }, onConfirm: (date) {
                        print('confirm $date');
                        setState(() {
                          pickeddate =
                          "Picked Date is : ${date.day}/${date.month}/${date.year}";
                        });
                      }, currentTime: DateTime.now(), locale: LocaleType.en);
                },
                label: Text("Set Date"),
                icon: Icon(Icons.date_range),
              ),
              SizedBox(
                height: 50,
              ),
              Container(
                child: (pickeddate == null)
                    ? Text("Select a date Please")
                    : Text("$pickeddate"),
              ),
              SizedBox(
                height: 30,
              ),
              Container(
                child: (pickedtime == null)
                    ? Text("Select a time Please")
                    : Text("$pickedtime"),
              ),
            ],
          ),
        ));
  }
}

after adding the code you can run your project and see output good if happy with the tutorial learn more flutter tutorial click here

Facebooktwitterredditpinterestlinkedinmail