Flutter TimePicker Example: A Complete Developer System Guide (With Code and AI Integration)
When building modern mobile applications, time selection is a surprisingly common requirement. Appointment booking apps. Alarm systems. Delivery scheduling tools. Habit trackers. Nearly every productivity-focused application needs a clean, intuitive way for users to select a specific time.
That’s where Flutter’s TimePicker widget comes into play.
Flutter provides a built-in dialog, showTimePicker(), that lets developers implement a native, elegant time-selection interface with just a few lines of code. Yet many tutorials only show the bare minimum. They present the widget but rarely explain how the system works internally, how it integrates into real applications, or how AI tools can accelerate development.
This guide goes deeper.
You’ll learn:
- How the Flutter TimePicker system works
- A complete Flutter timepicker example
- What the code actually does
- How to integrate the picker into real UI workflows
- How to use AI tools like ChatGPT or GitHub Copilot to generate and improve the system
By the end, you’ll understand not just how to use a time picker—but how to build a reusable Flutter time-selection system.
Understanding the Flutter TimePicker System
In Flutter, the TimePicker is not a standalone widget placed directly on the screen. Instead, it appears as a modal dialog triggered by an action such as pressing a button.
The core function is:
showTimePicker()
This function opens a dialog allowing users to select:
- Hour
- Minute
- AM/PM (depending on device settings)
The result is a TimeOfDay object that you can use throughout your app.
The system flow looks like this:
User taps the button
↓
showTimePicker() dialog opens
↓
User selects time
↓
Flutter returns a TimeOfDay value.
↓
App stores or displays the selected time
In other words, the TimePicker acts as an input interface, similar to a form field.
Flutter TimePicker Example: Basic Implementation
Let’s begin with a simple working example.
Create a Flutter Project
If you haven’t already:
flutter create timepicker_example
cd timepicker_example
Open the project in VS Code or Android Studio.
Full Flutter TimePicker Example Code
Below is a clean starter implementation.
import ‘package:flutter/material.dart’;
void main() {
runApp(TimePickerApp());
}
class TimePickerApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Flutter TimePicker Example’,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: TimePickerHome(),
);
}
}
class TimePickerHome extends StatefulWidget {
@override
_TimePickerHomeState createState() => _TimePickerHomeState();
}
class _TimePickerHomeState extends State<TimePickerHome> {
TimeOfDay selectedTime = TimeOfDay.now();
Future<void> pickTime(BuildContext context) 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(“Flutter TimePicker Example”),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
“Selected Time:”,
style: TextStyle(fontSize: 20),
),
SizedBox(height: 10),
Text(
selectedTime.format(context),
style: TextStyle(fontSize: 40),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () => pickTime(context),
child: Text(“Select Time”),
)
],
),
),
);
}
}
What This Flutter TimePicker Code Does
At first glance, the code seems simple. Under the hood, however, several important things are happening.
Let’s break it down.
Creating the App Entry Point
void main() {
runApp(TimePickerApp());
}
This is Flutter’s entry point.
runApp() launches the application and loads the root widget.
Building the Application UI
class TimePickerApp extends StatelessWidget
This class creates the overall app structure, including:
- Material theme
- Title
- Default screen
It directs the app to:
home: TimePickerHome()
This is where the actual TimePicker system lives.
Creating the Time State
Inside the state class, we define:
TimeOfDay selectedTime = TimeOfDay.now();
This variable stores the currently selected time.
If the user has not selected anything yet, the app defaults to the device’s current time.
Opening the TimePicker Dialog
The key function:
Future<void> pickTime(BuildContext context)
This function launches the picker.
Inside it:
Final TimeOfDay? picked = await showTimePicker(
context: context,
initialTime: selectedTime,
);
Important details:
- showTimePicker() opens the dialog
- initialTime determines what time appears first
- await pauses execution until the user selects a time
The returned value is:
TimeOfDay
Which contains:
hour
minute
Updating the UI
After the user selects a time:
setState(() {
selectedTime = picked;
});
setState() tells Flutter:
The UI has changed. Rebuild the interface.
This automatically updates the time displayed on the screen.
Displaying the Selected Time
The selected time is rendered with:
selectedTime.format(context)
This automatically formats the time according to device settings.
For example:
2:30 PM
or
14:30
depending on the user’s locale.
Advanced Flutter TimePicker Example (Custom Logic)
In real applications, you often want extra logic, such as:
- Restricting time selection
- Saving time selections
- Scheduling reminders
Example restriction:
if (picked.hour >= 9 && picked.hour <= 18) {
// allow working hours
}
You could enforce:
- Office scheduling
- Business hours
- Delivery windows
This transforms the picker from a simple input tool into a system component.
Creating a Reusable TimePicker Component
Instead of repeating the same code everywhere, you can create a reusable widget.
Example:
class CustomTimePicker extends StatelessWidget {
final TimeOfDay time;
final Function(TimeOfDay) onTimeSelected;
CustomTimePicker({
required this.time,
required this.onTimeSelected,
});
Future<void> _selectTime(BuildContext context) async {
Final TimeOfDay? picked = await showTimePicker(
context: context,
initialTime: time,
);
if (picked != null) {
onTimeSelected(picked);
}
}
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () => _selectTime(context),
child: Text(time.format(context)),
);
}
}
Now you can use the picker anywhere:
CustomTimePicker(
time: selectedTime,
onTimeSelected: (newTime) {
setState(() {
selectedTime = newTime;
});
},
)
This approach creates a clean architecture for larger applications.
Using AI to Build Flutter TimePicker Systems
One of the most powerful workflows today combines Flutter development with AI coding assistants.
Tools like:
- ChatGPT
- GitHub Copilot
- Codeium
- Cursor AI
can dramatically accelerate development.
Instead of writing everything manually, developers can generate working components instantly.
Example AI Prompt for Flutter TimePicker
Example prompt:
Create a Flutter widget that opens a time picker and stores the selected time. Display the selected time in a text widget and allow the time to be reset.
AI will generate something similar to:
Future<TimeOfDay?> pickTime(BuildContext context) async {
return await showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
);
}
You can then refine it with additional prompts.
Using AI to Add Features
AI can also help implement complex systems, such as:
Scheduling Notifications
Prompt:
Create a Flutter app that uses a time picker to schedule a daily notification for the selected time.
AI will combine:
- TimePicker
- Notification plugins
- Scheduling logic
Example plugin:
flutter_local_notifications
Example AI-Generated Reminder System
TimeOfDay selectedTime;
void scheduleReminder() {
final now = DateTime.now();
final scheduleTime = DateTime(
now.year,
now.month,
now, day
selectedTime.hour,
selectedTime.minute
);
}
AI can generate the entire reminder workflow.
AI Debugging for TimePicker Issues
AI tools are also extremely helpful when troubleshooting.
Example problems developers face:
- Time not updating
- Null errors
- UI not refreshing
Prompt example:
My Flutter time picker returns null and doesn’t update the UI. Here’s my code:
AI will quickly identify issues such as missing:
setState()
or incorrect null handling.
Best Practices When Using Flutter TimePicker
To create production-ready systems, follow these best practices.
Always Handle Null Values
Users may cancel the dialog.
Always check:
if (picked != null)
Store Time Properly
In real apps, store time as:
DateTime
or
ISO timestamps
This ensures compatibility with APIs.
Support Localization
Flutter automatically adjusts time formatting, but you should test:
- 12-hour format
- 24-hour format
Separate UI From Logic
Use a clean architecture:
UI
↓
Controller
↓
Service
This keeps the TimePicker system scalable.
Real App Use Cases
The Flutter TimePicker is used in many types of applications.
Appointment Booking
Users select:
Doctor visit time
Alarm Apps
TimePicker schedules alarms.
Habit Tracking
Users set daily reminder times.
Food Delivery
Customers schedule delivery windows.
Conclusion
The Flutter TimePicker widget might appear simple on the surface. Yet in real applications, it often becomes a core input system, responsible for scheduling events, triggering reminders, managing appointments, and coordinating time-based workflows.
Understanding how to implement it properly—and how to extend it with custom logic, reusable components, and AI-assisted development tools—turns a small UI feature into a powerful architectural building block.
Start with the basic showTimePicker() implementation. Then expand it.
Add validation. Connect it to APIs. Integrate notifications. Build reusable widgets. And when needed, let AI accelerate the process, helping you generate, debug, and refine code faster than ever before.
Because in modern Flutter development, the most efficient systems aren’t just coded—they’re designed intelligently and enhanced with AI assistance.
Leave a Reply