How to Create TimePicker in Flutter: Simple Guide

In Flutter, you create a time picker using the showTimePicker function which displays a dialog for the user to select a time. You call this function inside an async method and handle the selected time to update your UI or state.

Syntax

The showTimePicker function requires a BuildContext and an initial TimeOfDay value. It returns a Future<TimeOfDay?> that completes when the user picks a time or cancels.

• context: The widget context to show the dialog.
• initialTime: The time initially selected in the picker.
• builder (optional): Customize the dialog appearance.

dart

Future<TimeOfDay?> showTimePicker({required BuildContext context, required TimeOfDay initialTime, WidgetBuilder? builder})

Example

This example shows a button that opens a time picker dialog. When the user selects a time, it updates the displayed text with the chosen time.

dart

import 'package:flutter/material.dart';

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

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

class TimePickerExample extends StatefulWidget {
  @override
  _TimePickerExampleState createState() => _TimePickerExampleState();
}

class _TimePickerExampleState extends State<TimePickerExample> {
  TimeOfDay _selectedTime = TimeOfDay.now();

  Future<void> _pickTime() async {
    final TimeOfDay? picked = await showTimePicker(
      context: context,
      initialTime: _selectedTime,
    );
    if (picked != null && picked != _selectedTime) {
      setState(() {
        _selectedTime = picked;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('TimePicker Example')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Selected time: ${_selectedTime.format(context)}'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickTime,
              child: Text('Pick Time'),
            ),
          ],
        ),
      ),
    );
  }
}

Output

A screen with a button labeled 'Pick Time' and text showing the selected time. Tapping the button opens a time picker dialog. After selecting a time, the text updates to show the chosen time.

Common Pitfalls

• Not awaiting showTimePicker causes the app to miss the selected time.
• Not checking for null when the user cancels the picker leads to errors.
• Using TimeOfDay.now() inside build() can reset the initial time every rebuild.

dart

/// Wrong: Not awaiting and no null check
void pickTimeWrong(BuildContext context) {
  showTimePicker(context: context, initialTime: TimeOfDay.now()).then((picked) {
    print(picked!.format(context)); // Can throw if picked is null
  });
}

/// Right: Await and null check
Future<void> pickTimeRight(BuildContext context) async {
  final picked = await showTimePicker(context: context, initialTime: TimeOfDay.now());
  if (picked != null) {
    print(picked.format(context));
  }
}

Quick Reference

Remember these tips when using showTimePicker:

• Always await the picker to get the result.
• Check if the result is null before using it.
• Use TimeOfDay to represent time without date.
• Use format(context) to display time in user locale format.

Key Takeaways

Use showTimePicker with await to get the selected time asynchronously.

Always check if the user canceled the picker by verifying the result is not null.

Use TimeOfDay to represent and format the selected time properly.

Avoid calling TimeOfDay.now() inside build to prevent resetting initial time on rebuild.

Wrap showTimePicker call in a method inside a StatefulWidget to update UI on selection.