TimePicker in Flutter


In flutter, TimePicker is a widget to select a time. It allows you to select a date by hours, and minute but doesn’t allows to select a seconds.

In this article, we will discuss about TimePicker in flutter. Here, we will discuss each and every steps by example.


Future<TimeOfDay?> showTimePicker({
  required BuildContext context,
  required TimeOfDay initialTime,
  Widget Function(BuildContext, Widget?)? builder,
  bool useRootNavigator = true,
  TimePickerEntryMode initialEntryMode = TimePickerEntryMode.dial,
  String? cancelText,
  String? confirmText,
  String? helpText,
  String? errorInvalidText,
  String? hourLabelText,
  String? minuteLabelText,
  RouteSettings? routeSettings,

Code Implementation

import 'package:flutter/material.dart';

class TimePickerPage extends StatefulWidget {
  const TimePickerPage({Key? key}) : super(key: key);

  State<TimePickerPage> createState() => _TimePickerPageState();

class _TimePickerPageState extends State<TimePickerPage> {
  TimeOfDay timeOfDay = TimeOfDay.now();
  Widget build(BuildContext context) {
    final hours = timeOfDay.hour.toString().padLeft(2, '0');
    final minutes = timeOfDay.minute.toString().padLeft(2, '0');
    return Scaffold(
      appBar: AppBar(
        title: const Text("Time Picker Example"),
        centerTitle: true,
        elevation: 0,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
                  const TextStyle(fontSize: 26.0, fontWeight: FontWeight.bold),
            const SizedBox(
              height: 20.0,
              onPressed: () async {
                TimeOfDay? newTime = await showTimePicker(
                    context: context,
                    initialTime: timeOfDay,
                    initialEntryMode: TimePickerEntryMode.input);
                if (newTime == null) return;
                setState(() {
                  timeOfDay = newTime;
              child: const Padding(
                padding: EdgeInsets.all(16.0),
                child: Text(
                  "Select a Time",
                  style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w800),


This shows the current time. To change the time, click on select a time button.

After selecting the hours and minute, you must click to ok button to change the time. Given below page shows a selected time.

When we make initialEntryMode: TimePickerEntryMode.input then it shows the time in given below format.

Here is the github link of this project:


Thank you for reading this article. If you have any queries regarding any topic, feel free to share with us. We will try to solve your problems.

Happy Learning.

Leave A Reply

Your email address will not be published.