Description:

time dropper

TimeDropper #




Gorgeous, fully animated, round dial time picker inspired
by TimeDropperJS
Features #

Animated, round dial and fully customizable
Adapted with system theme and/or customizable with TimeDropperThemeData
3 different designs to choose from




TimeDropperStyle.outerFilled
TimeDropperStyle.innerFilled
TimeDropperStyle.bordered










Getting started #

Add time_dropper: <latest_version> to pubspec.yaml
Run flutter pub get in the terminal in the project directory or select pub get from
within pubspec.yaml file
Add import statement,

import 'package:time_dropper/time_dropper.dart';
copied to clipboard
Usage #
For full implementation, see example
_showTimeDropper(GlobalKey key) {
showTimeDropper(
context: context,
onDone: () {
// TODO: use this callback if you want time update only when the time dropper window closes
},
onTimeChanged: (time) {
setState(() {
_time = time;
});
// use this callback to get updates in real-time
},
containerKey: key,
// Pass the key so that time dropper dialog opens up near the container widget
// Opens in the center if null
initialTime: _time,
style: TimeDropperStyle.outerFilled,
// or TimeDropperStyle.innerFilled / TimeDropperStyle.bordered,
);
}
copied to clipboard
Additional information #
showTimeDropper() (function) #



Attributes
Type
Description




context
BuildContext
BuildContext


onTimeChanged
void Function(TimeOfDay)?
callback which returns TimeOfDay object as time is changed (realtime)


onDone
void Function(TimeOfDay)?
callback which returns TimeOfDay object when the dialog is closed


initialTime
TimeOfDay?
time to be selected by default (selects current time, if null)


containerKey
GlobalKey?
Pass the key so that time dropper dialog opens up near the container widget (opens in the center, if null)


barrierColor
Color?
color of the background behind the dialog (default: Colors.black12)


style
TimeDropperStyle
one of the 3 styles, TimeDropperStyle.outerFilled, TimeDropperStyle.innerFilled or TimeDropperStyle.bordered


themeData
TimeDropperThemeData?
customize the dialog as you wish



TimeDropperStyle (enum) #



Styles
Ref




TimeDropperStyle.outerFilled / TimeDropperStyle.innerFilled / TimeDropperStyle.bordered
View



TimeDropperThemeData #



Attributes
Type
Description




brightness
Brightness?
brightness of the dialog (light or dark), default to adapt app theme


primaryColor
Color?
color for all major highlight components, default to app theme colorScheme.secondary


canvasColor
Color?
dial background color, default to app theme canvasColor


handleColor
Color?
color of the sliding handle, default to primaryColor


handleDotsColor
Color?
color of the dots in sliding handle, default to Colors.white


innerColor
Color?
color of the border (TimeDropperStyle.bordered) or inner dial (TimeDropperStyle.innerFilled), default to primaryColor


selectedColor
Color?
color of the selected text (hour or minute), default to primaryColor


unSelectedColor
Color?
color of the unselected text (hour or minute), default to app theme hintColor


selectedHandColor
Color?
color of the selected hand (hour or minute hand), default to selectedColor.withOpacity(0.5)


unSelectedHandColor
Color?
color of the selected hand (hour or minute hand), default to unSelectedColor.withOpacity(0.5)


shadowColor
Color?
color of the elevated shadow, default to app theme hintColor


fontFamily
String?
font family of the widget, default to app's fontFamily

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter