GitLocker: The Coding Marketplace

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