https://github.com/mindinventory/progressive_time_picker
A Customizable Progressive Time Picker for Flutter.
https://github.com/mindinventory/progressive_time_picker
android dart flutter flutter-library flutter-plugin ios picker timepicker websupport
Last synced: about 1 year ago
JSON representation
A Customizable Progressive Time Picker for Flutter.
- Host: GitHub
- URL: https://github.com/mindinventory/progressive_time_picker
- Owner: Mindinventory
- License: mit
- Created: 2021-08-19T06:49:42.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-12-23T13:05:18.000Z (over 1 year ago)
- Last Synced: 2025-04-02T05:09:12.209Z (about 1 year ago)
- Topics: android, dart, flutter, flutter-library, flutter-plugin, ios, picker, timepicker, websupport
- Language: Dart
- Homepage: https://www.mindinventory.com/flutter-app-development.php
- Size: 101 MB
- Stars: 70
- Watchers: 2
- Forks: 14
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# progressive_time_picker
A Customizable Progressive Time Picker for Flutter. This package 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 selecting either a single picker handler or both simultaneously.
* Provides easy customization options for decorating the time picker.
* Offers the ability to display clock numbers in both 12-hour and 24-hour formats, with full customization support.
* Allows disabling specific time ranges for more control.
# Preview
### progressive time picker
### progressive time picker with disabled ranges
## Basic Usage
Import it to your project file
```dart
import 'package:progressive_time_picker/progressive_time_picker.dart';
```
And add it in its most basic form like it:
```dart
TimePicker(
initTime: PickedTime(h: 0, m: 0),
endTime: PickedTime(h: 8, m: 0),
onSelectionChange: (start, end, isDisableRange) =>
print(
'onSelectionChange => init : ${start.h}:${start.m}, end : ${end.h}:${end.m}, isDisableRangeRange: $isDisableRange'),
onSelectionEnd: (start, end, isDisableRange) =>
print(
'onSelectionEnd => init : ${start.h}:${start.m}, end : ${end.h}:${end.m},, isDisableRangeRange: $isDisableRange'),
);
```
And for the DisabledRanges:
```dart
TimePicker(
initTime: PickedTime(h: 0, m: 0),
endTime: PickedTime(h: 8, m: 0),
disabledRanges: [
DisabledRange(
initTime: PickedTime(h: 12, m: 0),
endTime: PickedTime(h: 20, m: 0),
),
],
disabledRangesColor: Colors.grey,
disabledRangesErrorColor: Colors.red,
onSelectionChange: (start, end, isDisableRange) => print(
'onSelectionChange => init : ${start.h}:${start.m}, end : ${end.h}:${end.m}, isDisableRangeRange: $isDisableRange'),
onSelectionEnd: (start, end, isDisableRange) => print(
'onSelectionEnd => init : ${start.h}:${start.m}, end : ${end.h}:${end.m},, isDisableRangeRange: $isDisableRange'),
);
```
## 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 |
| bool isInitHandlerSelectable | true | used to enabled or disabled Selection of Init Handler |
| bool isEndHandlerSelectable | true | used to enabled or disabled Selection of End Handler |
| bool isSelectableHandlerMoveAble | true | used to enabled or disabled the Movement of Init and End Handler when its not Selectable (disable the dragging of both handlers) |
| List disabledRanges | null | used to disable Selection ranges, If null so there is no disable time ranges |
| Color disabledRangesColor | Colors.grey | defines the color for the disabled range |
| Color disabledRangesErrorColor | Colors.red | defines the color for the error in disabled range |
| bool drawInitHandlerOnTop | false | used to set priority to draw init or end handler on the top |
## 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 |
| SystemMouseCursor mouseCursor | - | Used to set SystemMouseCursor for PanGestureRecognizer |
## 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.](https://github.com/Mindinventory/progressive_time_picker/blob/main/LICENSE)
## Let us know!
We’d be really happy if you send us links to your projects where you use our open-source libraries.
Just send an email to [sales@mindinventory.com](mailto:sales@mindinventory.com) And do let us know
if you have any questions or suggestion regarding our work.
Visit our website [mindinventory.com](https://www.mindinventory.com)
Let us know if you are interested to building Apps or Designing Products.
