A Customizable Progressive Time Picker for Flutter

  clock, Time Tracking

progressive_time_picker

A Customizable Progressive Time Picker for Flutter. This plugin allow us to customize time picker based on our requirements for selecting a specific range from time picker and it’s supports multiple platforms.

Key Features

  • supports selection of both picker handler.
  • easy customization for decorating a time picker.
  • gives feature to show clock numbers in both 12 or 24 hours format and also supports customization for it.

Preview

progressive_time_picker

Basic Usage

Import it to your project file

import 'package:progressive_time_picker/progressive_time_picker.dart';

And add it in its most basic form like it:

  TimePicker(
    initTime: PickedTime(h: 0, m: 0),
    endTime: PickedTime(h: 8, m: 0),
    onSelectionChange: (a, b) =>
        print(
            'onSelectionChange => init : ${a.h}:${a.m}, end : ${b.h}:${b.m}'),
    onSelectionEnd: (a, b) =>
        print(
            'onSelectionEnd => init : ${a.h}:${a.m}, end : ${b.h}:${b.m}'),
  );

Required parameters of TimePicker


ParameterDescription
PickedTime initTimethe init PickedTime value in the selection
PickedTime endTimethe end PickedTime value in the selection
onSelectionChangecallback function when init and end PickedTime change
onSelectionEndcallback function when init and end PickedTime finish

Optional parameters of TimePicker


ParameterDefaultDescription
double height220height of the canvas
double width220width of the canvas
int primarySectors0the number of primary sectors to be painted
int secondarySectors0the number of secondary sectors to be painted
Widget childContainerwidget that would be mounted inside the circle
TimePickerDecoration decorationused to decorate our TimePicker widget

Required parameters of TimePickerDecoration


ParameterDescription
TimePickerSweepDecoration sweepDecorationused to decorate our sweep part or a part between our init and end point with various options
TimePickerHandlerDecoration initHandlerDecorationused to decorate our init or end handler of time picker
TimePickerHandlerDecoration endHandlerDecorationused to decorate our init or end handler of time picker

Optional parameters of TimePickerDecoration


ParameterDefaultDescription
Color baseColorcyanAccentdefines the background color of the picker
double pickerBaseCirclePadding0.0to add extra padding for picker base or outer circle
TimePickerSectorDecoration primarySectorsDecorationused to decorate the primary sectors of out time picker
TimePickerSectorDecoration secondarySectorsDecorationused to decorate the secondary of out time picker
TimePickerClockNumberDecoration clockNumberDecorationProvides decoration options which will get applied to the internal clock’s numbers when enable

Guideline for contributors


  • Contribution towards our repository is always welcome, we request contributors to create a pull request for development.

Guideline to report an issue/feature request


It would be great for us if the reporter can share the below things to understand the root cause of the issue.

  • Library version
  • Code snippet
  • Logs if applicable
  • Device specification like (Manufacturer, OS version, etc)
  • Screenshot/video with steps to reproduce the issue
  • Library used

Download Time Picke app source code on GitHub

https://github.com/Mindinventory/progressive_time_picker