A Customizable Progressive Time Picker for Flutter.

Related tags

Templates android dart ios timepicker picker flutter websupport flutter-plugin flutter-library
Overview

progressive_time_picker

Flutter Website Dart Website

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

Parameter Description
PickedTime initTime the init PickedTime value in the selection
PickedTime endTime the end PickedTime value in the selection
onSelectionChange callback function when init and end PickedTime change
onSelectionEnd callback function when init and end PickedTime finish

Optional parameters of TimePicker

Parameter Default Description
double height 220 height of the canvas
double width 220 width of the canvas
int primarySectors 0 the number of primary sectors to be painted
int secondarySectors 0 the number of secondary sectors to be painted
Widget child Container widget that would be mounted inside the circle
TimePickerDecoration decoration - used to decorate our TimePicker widget

Required parameters of TimePickerDecoration

Parameter Description
TimePickerSweepDecoration sweepDecoration used to decorate our sweep part or a part between our init and end point with various options
TimePickerHandlerDecoration initHandlerDecoration used to decorate our init or end handler of time picker
TimePickerHandlerDecoration endHandlerDecoration used to decorate our init or end handler of time picker

Optional parameters of TimePickerDecoration

Parameter Default Description
Color baseColor cyanAccent defines the background color of the picker
double pickerBaseCirclePadding 0.0 to add extra padding for picker base or outer circle
TimePickerSectorDecoration primarySectorsDecoration - used to decorate the primary sectors of out time picker
TimePickerSectorDecoration secondarySectorsDecoration - used to decorate the secondary of out time picker
TimePickerClockNumberDecoration clockNumberDecoration - Provides 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

LICENSE!

progressive_time_picker is MIT-licensed.

Let us know!

We’d be really happy if you send us links to your projects where you use our component. Just send an email to [email protected] And do let us know if you have any questions or suggestion regarding our work.

Comments
  • Request for new functionality

    Request for new functionality

    Thanks for providing such awesome, customizable and easy to use time picker.

    Functionality Request:

    to be able to mark specific time ranges disabled and enabled for selection. For Ex:- suppose between (12 - 3 am), I want to disable time range (1 - 1:30 am), such that user won't be able to select this specific time range, only the remaining time ranges that are (12 - 1 am and 1:30 - 3 am).

    enhancement 
    opened by Phantom586 1
  • Questions and clarifications

    Questions and clarifications

    First, thank you for providing such a great time picker! I'm looking forward to sending you the link for my app when it's done.

    Second, some questions:

    1. Is it possible to limit the secondarySectors to only show within the active time? I'm trying to find away to make custom markers on the clock. I want to show reminder times during the active/awake time.

    2. Is it possible to change the time increment when dragging the start/stop handles? I find it really hard to get the handle to stop at the right time - like instead of 6:00 it's 5:55 or 6:05.

    3. Is it possible to change the secondarySectors to be double instead of an int? In other words, I want to use minutes instead of whole hours. (Or is there another way to accomplish this?)

    opened by NightSkyDev 1
  • Mouse cursor for web on handlers

    Mouse cursor for web on handlers

    The cursor behavior on web is a bit unexpected, usually when an action can "change" something, the cursor reflects that. I believe SystemMouseCursors.click would be appropriate for the handlers

    opened by cedvdb 0
  • Prefer start handler on top for same hour selection

    Prefer start handler on top for same hour selection

    When the start handler and the end handler are on top of each other, the end handler is show, but the start handler is the one that actually moves.

    image

    Imo, the start handler should be shown because it is selecting a whole day range, and the icon for start would be more appropriate

    opened by cedvdb 0
  • Input should not move inside the disabledRange

    Input should not move inside the disabledRange

    This is a bit subjective but I believe, from an UX standpoint, that the handlers should not move inside the disabled range at all.

    Adding an option to disable going into that range would be nice.

    opened by cedvdb 0
  • [Bug] onSelectionEnd was not triggered when bothHandler moves

    [Bug] onSelectionEnd was not triggered when bothHandler moves

    Thank for the plugin. I use the onSelectionEnd callback function to get final value. When I drag and drop the middle bar, it was not triggered. Especially it becomes more visible while clockIncrementTimeFormat is SIXTYMIN.

    I debugged, I realize that when isPanEnd variable is true, newValueInit value is still the same as widget.init value. I hope that helpful.

    https://user-images.githubusercontent.com/7497369/203127409-f4a0f43b-51dd-4b19-89f1-f90cda23b393.mov

    Plugin version: 0.0.7 Device: Iphone 11 emulator, IOS 16.1

    opened by akurnaz 0
  • Add option to show more clock numbers using ClockIncrementHourFormat

    Add option to show more clock numbers using ClockIncrementHourFormat

    This is a request for a new functionality, basically we would have a ClockIncrementHourFormat class, just like the existing one: ClockIncrementTimeFormat, this class would be passed to the existing clockNumberDecoration, so we could have more times displayed visually, for example:

    image

    So basically it would show text showing the time every two hours: 0h 2h 4h 6h 8h 10h 12h 14h 16h 18h 20h 22h

    opened by danielmessi13 0
Owner
MindInventory
MindInventory works with Enterprises, Startups, and Agencies since 2011 providing web, mobile app development, enterprise mobility solutions & DevOps services.
MindInventory
GitHub https://www.mindinventory.com/flutter-app-development.php
Dartness is a progressive dart framework for building efficient and scalable server-side applications

Dartness is a framework for building efficient, scalable dart server-side applications. It provides an easy and quick way to develop modern standalone server.

Ricardo Romero 33 Dec 12, 2022
🦜 Parrot - A progressive Dart framework for building efficient, reliable and scalable server-side applications.

?? Parrot A progressive Dart framework for building efficient, reliable and scalable server-side applications. What is Parrot? Parrot is a Dart framew

Odroe 8 Nov 11, 2022
A Flutter widget to set time with spinner instead of material time picker

flutter_time_picker_spinner Time Picker widget with spinner instead of a material time picker. 12H format 24H format 24H format with second Custom sty

Bobby Stenly Irawan 34 Aug 8, 2022
Z time ago - A simple Flutter z time ago package used to change date to time ago for english, arabic and kurdish languages

This package is used to get time duration from now and given time for kurdish, a

Zakarya Muhammad 2 May 19, 2022
Color picker for Flutter, based on the Google Docs color picker.

Material ColorPicker Color picker for Flutter, based on the Google Docs color picker. Getting Started You can embed into your material app or use it o

Razvan Lung 103 Oct 30, 2022
Form builder image picker - Form builder image picker for flutter

form_builder_image_picker Field for picking image(s) from Gallery or Camera for

Ferri Sutanto 0 Jan 28, 2022
Nepali date picker - Material Style Date Picker with Bikram Sambat(Nepali) Calendar Support

Nepali Date Picker + Calendar Material and Cupertino Styled Date Picker, Date Range Picker and Calendar with Bikram Sambat(Nepali) Support. Nepali Dat

Sarbagya Dhaubanjar 35 Jan 3, 2023
A highly customizable Flutter color picker.

FlexColorPicker FlexColorPicker is a customizable color picker for Flutter. The ColorPicker can show six different types of color pickers, three of wh

Rydmike 132 Dec 14, 2022
A highly customizable Flutter color picker.

FlexColorPicker FlexColorPicker is a customizable color picker for Flutter. The ColorPicker can show six different types of color pickers, three of wh

Rydmike 132 Dec 14, 2022
A Dart package that provides a customizable country phone code picker for your Flutter application

A Flutter package that provides an easy and customizable country phone code picker widget! Features This package comes with a lot of customization all

Samit Kapoor 1 Oct 1, 2022
Flutter-world-time-practice - World Time Tutorial App For Flutter

world_time Result of Flutter Tutorial for Beginners Navigation: pushNamed, pop r

Seonghyeon Cho 1 Feb 7, 2022
World Time App - World time application made using flutter

World Time App Flutter Application to view time in different parts of world. This was my first app built while learning flutter App Screenshots Loadin

Akash Rajpurohit 0 Jan 17, 2020
Flutter-journey - A package helps you run one-time migrations in your app incrementally, while trying to reduce impact on app start-up time as much as possible

Journey As soon as your app is published it goes on this wild journey and likely

Jordy Langen 2 Feb 15, 2022
A Funtioning basic Clock UI APP with extra functionalities such as displaying thecurrent time location being used and checking time for other timezones simultaneosly.

clock_UI A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Anjola Favour Ayomikun 0 Dec 28, 2021
Simple project that consumes the World Time APi and displays the time for the chosen location.

World Time App Simple project that consumes the World Time APi and displays the time for the chosen location. Web Api WorldTime Technologies Flutter A

Mario Vieria 1 Jan 20, 2022
Time Table application specifically aimed towards students. Share Time-Tables. Suggest Updates.

Time-Table-App Time Table application specifically aimed towards students. Tech stack Project is created by: Flutter: 2.8.1 Dart: 2.15.1 Planned Featu

PEC ACM CSS 8 Oct 7, 2022
World-time - A simple application that tells time from different locations by using worldtime api

world_time A new Flutter project. Getting Started This project is a starting poi

Ryan Egbejule-jalla 1 Feb 6, 2022
Colorpicker flutter - This Color picker for flutter apps provide picking facility for both single and multiple color choosing

This Color picker for flutter apps provide picking facility for both single and

null 0 Feb 2, 2022
Sample Flutter Drawing App which allows the user to draw onto the canvas along with color picker and brush thickness slider.

DrawApp Sample Flutter Drawing App which allows the user to draw onto the canvas along with color picker and brush thickness slider. All code free to

Jake Gough 226 Nov 3, 2022