time_range 1.0.3 icon indicating copy to clipboard operation
time_range: ^1.0.3 copied to clipboard

Flutter widget for selecting a time range. You can specify the steps between the hours, time blocks that the range must meet and widget colors.


Flutter package for selecting a time range with time blocks.

Getting Started #

You can use this package when you need to add a time range selector to your application. You can indicate the size of the steps of the initial time and the blocks of time that the range must contain. You can also customize the component styles.


Properties #

fromTitleWidgetWidget displayed as the start time selector title
toTitleWidgetWidget displayed as the end time selector title
titlePaddingdoubleLeft padding applied to fromTitle and toTitle
borderColorColorTime selection button border color color
activeBorderColorColorTime selection button border color selected color
textStyleTextStyleTime selection button textstyle
activeTextStyleTextStyleTime selection button selected textstyle
backgroundColorColorTime selection button background color
activeBackgroundColorColorTime selection button selected background color
firstTimeTimeOfDayPicker start time
lastTimeTimeOfDayPicker end time
initialRangeTimeRangeResultInitial range selected
timeStepdoubleMinutes jumps between initial selector hours
timeBlockdoubleSize in minutes of time blocks. The final selector will be recalculated depending on the selected start time for the user to select a range that contains a multiple of this time range
onRangeCompletedvoid Function(TimeRangeResult)Callback that notifies a change in the selected range. If, with a selected range, an initial time is selected again, the callback will return null.

Use example #

You can review the example folder for a complete example of using the widget.

    fromTitle: Text('From', style: TextStyle(fontSize: 18, color: gray),),
    toTitle: Text('To', style: TextStyle(fontSize: 18, color: gray),),
    titlePadding: 20,
    textStyle: TextStyle(fontWeight: FontWeight.normal, color: Colors.black87),
    activeTextStyle: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
    borderColor: dark,
    backgroundColor: Colors.transparent,
    activeBackgroundColor: orange,
    firstTime: TimeOfDay(hour: 14, minute: 30),
    lastTime: TimeOfDay(hour: 20, minute: 00),
    timeStep: 10,
    timeBlock: 30,
    onRangeCompleted: (range) => setState(() => print(range)),
pub points


verified publisher iconcodigobase.es

Flutter widget for selecting a time range. You can specify the steps between the hours, time blocks that the range must meet and widget colors.

Repository (GitHub)


API reference


Icon for licenses.MIT (LICENSE)




Packages that depend on time_range