ludy2015 / flutter_time_range_picker

A time range picker for Flutter

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
    • Parameters

Installation

Add

time_range_picker : any

to your pubspec.yaml, and run

flutter packages get

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"),
          ),
        ));
  }
}

Examples

Simple

Interval

Filled Style

Disabled Timeframe

Background Widget

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	26	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