TimePicker in Flutter

437

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.

Constructor

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);

  @override
  State<TimePickerPage> createState() => _TimePickerPageState();
}

class _TimePickerPageState extends State<TimePickerPage> {
  TimeOfDay timeOfDay = TimeOfDay.now();
  @override
  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: [
            Text(
              '$hours:$minutes',
              style:
                  const TextStyle(fontSize: 26.0, fontWeight: FontWeight.bold),
            ),
            const SizedBox(
              height: 20.0,
            ),
            ElevatedButton(
              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),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Outputs

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:

https://github.com/NilamPathak578/flutterHopeProjects/tree/Date

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.