Clock time picker is we mostly use when needed to fetch time from user side. Todays article is gonna be fun, because I will show you how we can create an attractive time picker using library provided by material design itself. No extra packages needed to do this task.

Recently I was working on it as I need it for my project. I will create a step-by-step guide on how you can also implement time picker in your future projects. This tutorial is beginner friendly but you are required to have a little prior knowledge about flutter.

Before stating let me tell you what we are going to use showTimePicker function provided by material.dart package. So lets get into coding.

Step 1 – Importing material.dart

Usually in all flutter projects we import built-in material.dart package. This package contains tons of pre-made widgets that work both for Android and IOS.

import 'package:flutter/material.dart';

Step 2 – Creating Stateless Widget

Next we are going to create a stateless widget that is gonna wrap our stateful widget containing picker function

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Time Picker"),
        ),
        body: Center(child: PickerWidget()),
      ),
    );
  }
}

PickerWidget() is a custom widget that is stateful class.

Step 2 – Creating Clock Time Picker Widget

This widget will contain all the heavy lifting of time picker function. In this widget

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

  @override
  State<PickerWidget> createState() => _PickerWidgetState();
}

class _PickerWidgetState extends State<PickerWidget> {


  @override
  Widget build(BuildContext context) {
    return ElevatedButton(onPressed: (){}, child: Text("Get Time"));
  }
}

We will create a async function that will wait for user to provide response.

I also recommend: Request Permissions In Flutter Using Permission Handler

Step 3 – Creating displayTimeDialog()

This is an async function. Why we need to use async function? You can read documentation. In simple words async function provide us capability to stop execution until some event happens. In our case that event is use input. So our code will stop execution until user enters time.

Future<void> displayTimeDialog() async {
    final TimeOfDay? time =
        await showTimePicker(context: context, initialTime: TimeOfDay.now());
   
  }

ShowTimerPicker() takes two arguments

  • Context (Context of page)
  • InitialTime (Default time of picker)

By using TimeOfDay.now(), we are providing current system time as initial time. time variable will get user selected time and we can use it anywhere we want. Lets just pass this function to elevated button.

ElevatedButton(onPressed: displayTimeDialog, child: Text("Get Time"));

After applying some logic our main.dart file will look like

import 'dart:async';

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Time Picker"),
        ),
        body: Center(child: PickerWidget()),
      ),
    );
  }
}

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

  @override
  State<PickerWidget> createState() => _PickerWidgetState();
}

class _PickerWidgetState extends State<PickerWidget> {
  String? getuserTime;

  Future<void> displayTimeDialog() async {
    final TimeOfDay? time =
        await showTimePicker(context: context, initialTime: TimeOfDay.now());
    if (time != null) {
      setState(() {
        getuserTime = time.format(context);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(onPressed: displayTimeDialog, child: Text(getuserTime!=null ? "$getuserTime": "Get Time"));
  }
}
Beautiful Clock Time Picker Widget Example Flutter

That is how can use beautiful material design time picker in our projects. If you have any quires you can comment below.