time_range_picker

Description:

time range picker

Time Range Picker #
A time range picker for flutter.
Getting Started #

Time Range Picker

Getting Started

Installation
Basic Usage
Examples

Simple
Interval
Filled Style
Disabled Timeframe
Background Widget
Rotated Clock
Max Duration
Min Duration
Default Widget
Custom Dialog
Custom Dialog iOS Style


Parameters





Installation #
Add

time_range_picker : any

copied to clipboard
to your pubspec.yaml, and run
flutter packages get
copied to clipboard
in your project's root directory.
Basic Usage #
import 'package:flutter/material.dart';

import 'package:time_range_picker/time_range_picker.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}

class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blueGrey,
body: Center(
child: RaisedButton(
onPressed: () async {
TimeRange result = await showTimeRangePicker(
context: context,
);
print("result " + result.toString());
},
child: Text("Pure"),
),
));
}
}
copied to clipboard
Examples #
Simple

Interval

Filled Style

Disabled Timeframe

Background Widget

Rotated Clock

Max Duration

Min Duration

Default Widget

Custom Dialog

Custom Dialog iOS Style

Parameters #



type
param
default
description





TimeOfDay
start
TimeOfDay.now()
preselected start time



TimeOfDay
end
now + 3h
preselected end time



TimeRange
disabledTime

disabled time range (this time cannot be selected)



Color
disabledColor
Colors.red.withOpacity(0.5)
the color for the disabled section



PaintingStyle
paintingStyle
PaintingStyle.stroke
Style of the arc (filled or stroke)



Function(TimeOfDay)
onStartChange





Function(TimeOfDay)
onEndChange





Duration
interval
Duration(minutes: 5)
Minimum time steps that can be selected



String
fromText
"From"
label for start time



String
toText
"To"
label for end time



bool
use24HourFormat
true
use 24 hours or am / pm



double
padding
36
the padding of the ring



double
strokeWidth
12
the thickness of the ring



Color
strokeColor
primaryColor
the color of the active arc from start time to end time



double
handlerRadius
12
the radius of the handler to drag the arc



Color
handlerColor
primaryColor
the color of a handler



Color
selectedColor
primaryColorLight
the color of a selected handler



Color
backgroundColor
Colors.grey[200]
the color of the circle outline



Widget
backgroundWidget

a widget displayed in the background, use e.g. an image



int
ticks

number of ticks displayed



double
ticksOffset
0
the offset for ticks



double
ticksLength
strokeWidth
ticks length



double
ticksWidth
1
ticks thickness



Color
ticksColor
Colors.white
Color of ticks



bool
snap
false
Snap time bar to interval



List
labels

Show labels around the circle (start at 0 hours)



double
labelOffset
20
Offset of the labels



bool
rotateLabels
true
rotate labels



bool
autoAdjustLabels
true
flip labels if the angle woulb be upside down (only if rotate labels is active)



TextStyle
labelStyle

Style of the labels



TextStyle
timeTextStyle

TextStyle of the time texts



TextStyle
activeTimeTextStyle

TextStyle of the currently moving time text



bool
hideTimes
false
hide the time texts



double
clockRotation
0
rotate the clock around angle



Duration
maxDuration
null
maximum Duration that can be picked



Duration
minDuration
Duration(minutes: 30)
minimum Duration that can be picked



bool
barrierDismissible
true
barrierDismissible false = user must tap button to close time range picker