extensive_date_range_picker 1.2.0

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

extensive_date_range_picker

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

Relative

Date Range

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.