showDatePicker

Shows a dialog containing a Material Design date picker. The returned Future resolves to the date selected by the user when the user confirms the dialog. If the user cancels the dialog, null is returned.

When the date picker is first displayed, it will show the month of initialDate, with initialDate selected.

The firstDate is the earliest allowable date. The lastDate is the latest allowable date. initialDate must either fall between these dates, or be equal to one of them. For each of these DateTime parameters, only their dates are considered. Their time fields are ignored. They must all be non-null.

An optional selectableDayPredicate function can be passed in to only allow certain days for selection. If provided, only the days that selectableDayPredicate returns true for will be selectable. For example, this can be used to only allow weekdays for selection. If provided, it must return true for initialDate.

Optional strings for the cancelText, confirmText, errorFormatText, errorInvalidText, fieldHintText, fieldLabelText, and helpText allow you to override the default text used for various parts of the dialog:

Example

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(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime selectedDate = DateTime.now();

  Future<Null> _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
        context: context,
        initialDate: selectedDate,
        firstDate: DateTime(2015, 8),
        lastDate: DateTime(2101)
    );
    if (picked != null && picked != selectedDate)
      setState(() {
        selectedDate = picked;
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text("${selectedDate.toLocal()}".split(' ')[0]),
            SizedBox(height: 20.0,),
            RaisedButton(
              onPressed: () => _selectDate(context),
              child: Text('Select date'),
            ),
          ],
        ),
      ),
    );
  }
}

showTimePicker

Shows a dialog containing a material design time picker.

The returned Future resolves to the time selected by the user when the user closes the dialog. If the user cancels the dialog, null is returned.

The initialTime parameter can be used to provide a initial time that will be selected when the time picker is opened.

The builder parameter can be used to wrap the dialog widget to add inherited widgets like Localizations.override, Directionality, or MediaQuery.

Future<TimeOfDay> selectedTime = showTimePicker(
  initialTime: TimeOfDay.now(),
  context: context,
);

Example

Future<Null> _selectTime(BuildContext context) async {
    TimeOfDay selectedTime =TimeOfDay.now();

    final TimeOfDay picked_s = await showTimePicker(
        context: context,
        initialTime: selectedTime, 
        builder: (BuildContext context, Widget child) {
          return MediaQuery(
            data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: false),
            child: child,
          );
        },
    );

    if (picked_s != null && picked_s != selectedTime )
      setState(() {
        selectedTime = picked_s;
      });
}