Skip to content

Flutter widget that provides an extensive date and time range picker.

License

Notifications You must be signed in to change notification settings

larryaasen/extensive_date_range_picker

Repository files navigation

extensive_date_range_picker

codecov pub package Gift me a coffee

A Flutter widget that provides an extensive date and time range picker.

Overview

Works on Android, iOS, desktop, and web.

There are three types of date range inputs that are supported at all times: presets, relative, and date range. It uses an accordian style interface to switch between the types of date range input. This provides the user with the greatest range of choices in creating date ranges.

Presets

image

Relative

image

Date Range

image

Installation

Install the latest version from pub.dev.

Examples

The dialog can be displayed with this simple call to showDateRangeDialog.

showDateRangeDialog(context: context);

To get the results back from the dialog, use the range returned from the future.

DateTimeRangePhrase _selectedRange = DateTimeRangePreset.allTime;

onTap: () {
    DateTimeRangePhrase _selectedRange = DateTimeRangePreset.allTime;

    showDateRangeDialog(context: context, initialRange: _selectedRange)
        .then((range) => setState(() => _selectedRange = range ?? _selectedRange));
}

Here is a complete example.

class MyHomePage extends StatefulWidget {
  final String title;
  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTimeRangePhrase _selectedRange = DateTimeRangePreset.allTime;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CustomDropdownButton(
              hint: "Select date range",
              value: _selectedRange.phrase(),
              iconSize: 24,
              isDense: false,
              underline: Container(height: 1, color: Colors.blueAccent),
              onTap: () {
                showDateRangeDialog(context: context, initialRange: _selectedRange)
                    .then((range) => setState(() => _selectedRange = range ?? _selectedRange));
              },
            ),
          ],
        ),
      ),
    );
  }
}

Apps that use extensive_date_range_picker.dart

US Debt Now

This widget is currently used in the US Debt Now app on Android and iOS, and as seen on It's All Widgets!.

Contributing

All comments and pull requests are welcome.

Donations / Sponsor

Please sponsor or donate to the creator on Flattr or Patreon.

About

Flutter widget that provides an extensive date and time range picker.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published