How to Create DatePicker in Flutter: Simple Guide

To create a DatePicker in Flutter, use the showDatePicker function which opens a calendar dialog for date selection. You call it inside an async function and await the user's choice, then update your UI with the selected date.

Syntax

The showDatePicker function requires a BuildContext, an initial date, a first date, and a last date to define the selectable range. It returns a Future<DateTime?> that completes with the selected date or null if canceled.

• context: The widget context to show the picker.
• initialDate: The date initially selected when the picker opens.
• firstDate: The earliest date the user can pick.
• lastDate: The latest date the user can pick.

dart

Future<DateTime?> showDatePicker({
  required BuildContext context,
  required DateTime initialDate,
  required DateTime firstDate,
  required DateTime lastDate,
})

Example

This example shows a button that opens a date picker dialog. When the user selects a date, it updates the text on screen to show the chosen date.

dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DatePickerExample(),
    );
  }
}

class DatePickerExample extends StatefulWidget {
  @override
  _DatePickerExampleState createState() => _DatePickerExampleState();
}

class _DatePickerExampleState extends State<DatePickerExample> {
  DateTime? _selectedDate;

  Future<void> _pickDate() async {
    final DateTime? picked = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2000),
      lastDate: DateTime(2100),
    );
    if (picked != null && picked != _selectedDate) {
      setState(() {
        _selectedDate = picked;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter DatePicker Example')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              _selectedDate == null
                  ? 'No date selected.'
                  : 'Selected date: ${_selectedDate!.toLocal()}'.split(' ')[0],
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickDate,
              child: Text('Pick a date'),
            ),
          ],
        ),
      ),
    );
  }
}

Output

App with a button labeled 'Pick a date'. When tapped, a calendar dialog appears. After selecting a date, the text updates to show 'Selected date: YYYY-MM-DD'.

Common Pitfalls

• Not awaiting showDatePicker causes the app to miss the selected date.
• Using initialDate outside the firstDate and lastDate range throws an error.
• Not calling setState after picking a date means the UI won't update.
• Ignoring null result when user cancels the picker can cause crashes.

dart

/* Wrong: Not awaiting and not handling null */
void _pickDateWrong() {
  showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(2000),
    lastDate: DateTime(2100),
  );
  // No await, no setState, no null check
}

/* Right: Await, check null, update state */
Future<void> _pickDateRight() async {
  final picked = await showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(2000),
    lastDate: DateTime(2100),
  );
  if (picked != null) {
    setState(() {
      _selectedDate = picked;
    });
  }
}

Quick Reference

DatePicker Tips:

• Always provide valid initialDate, firstDate, and lastDate.
• Use await to get the selected date.
• Check for null to handle cancel action.
• Call setState to refresh UI after date selection.

Key Takeaways

Use showDatePicker with context, initialDate, firstDate, and lastDate to open a date picker dialog.

Always await showDatePicker and check for null to handle user cancellation safely.

Call setState after picking a date to update the UI with the new selection.

Ensure initialDate is within the allowed date range to avoid errors.

Use a button or gesture to trigger the date picker in your Flutter app.