A Flutter widget that provides an extensive date and time range picker.
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.
Install the latest version from pub.dev.
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));
},
),
],
),
),
);
}
}
This widget is currently used in the US Debt Now app on Android and iOS, and as seen on It's All Widgets!.
All comments and pull requests are welcome.
Please sponsor or donate to the creator on Flattr or Patreon.