time_range 0.3.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 85

header.jpg

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.

time_range_example.gif

Properties #

PropertyTypeDescription
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.

TimeRange(
    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)),
  )

0.3.0 - 11/06/2020 #

  • Add parameters textStyle, activeTextStyle and activeBorderColor

0.2.1 - 04/06/2020 #

  • Fix error updating initialRange

0.2.0 - 04/05/2020 #

  • Modify selected time font weight
  • Update example

0.1.2 - 30/04/2020 #

  • Fix error time button does not fit theme font size

0.1.1 - 29/04/2020 #

  • Update documentation

0.1.0 - 15/04/2020 #

  • Resolve package suggestions

0.0.1 - 13/04/2020 #

  • Initial release

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:time_range/time_range.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  static const orange = Color(0xFFFE9A75);
  static const dark = Color(0xFF333A47);
  static const double leftPadding = 50;

  final _defaultTimeRange = TimeRangeResult(
    TimeOfDay(hour: 14, minute: 50),
    TimeOfDay(hour: 15, minute: 20),
  );
  TimeRangeResult _timeRange;

  @override
  void initState() {
    super.initState();
    _timeRange = _defaultTimeRange;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white70,
        body: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(top: 16, left: leftPadding),
                child: Text(
                  'Opening Times',
                  style: Theme.of(context)
                      .textTheme
                      .headline6
                      .copyWith(fontWeight: FontWeight.bold, color: dark),
                ),
              ),
              SizedBox(height: 20),
              TimeRange(
                fromTitle: Text(
                  'FROM',
                  style: TextStyle(
                    fontSize: 14,
                    color: dark,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                toTitle: Text(
                  'TO',
                  style: TextStyle(
                    fontSize: 14,
                    color: dark,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                titlePadding: leftPadding,
                textStyle: TextStyle(
                  fontWeight: FontWeight.normal,
                  color: dark,
                ),
                activeTextStyle: TextStyle(
                  fontWeight: FontWeight.bold,
                  color: orange,
                ),
                borderColor: dark,
                activeBorderColor: dark,
                backgroundColor: Colors.transparent,
                activeBackgroundColor: dark,
                firstTime: TimeOfDay(hour: 8, minute: 00),
                lastTime: TimeOfDay(hour: 20, minute: 00),
                initialRange: _timeRange,
                timeStep: 10,
                timeBlock: 30,
                onRangeCompleted: (range) => setState(() => _timeRange = range),
              ),
              SizedBox(height: 30),
              if (_timeRange != null)
                Padding(
                  padding: const EdgeInsets.only(top: 8.0, left: leftPadding),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        'Selected Range: ${_timeRange.start.hhmm()} - ${_timeRange.end.hhmm()}',
                        style: TextStyle(fontSize: 20, color: dark),
                      ),
                      SizedBox(height: 20),
                      MaterialButton(
                        child: Text('Default'),
                        onPressed: () => setState(() => _timeRange = _defaultTimeRange),
                        color: orange,
                      )
                    ],
                  ),
                ),
            ],
          ),
        ));
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  time_range: ^0.3.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:time_range/time_range.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
70
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
85
Learn more about scoring.

We analyzed this package on Jul 14, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.15
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • time_range that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.6.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test