Category / Section
How to restrict the view navigation in the Flutter Date Range Picker
1 min read
In the Flutter Date Range Picker, you can enable or disable the view navigation by using the navigationMode property. By setting the navigation mode as none you can’t swipe or scroll. Using the scroll, you can free scroll the picker and the snap allows to navigate to previous, next views.
In initState(), initialize the default values.
DateRangePickerNavigationMode _navigationMode =
DateRangePickerNavigationMode.scroll;
List<String> _viewNavigationMode = <String>[
'None',
'Scroll',
'Snap',
];
@override
void initState() {
super.initState();
}
By using PopUpMenuItem select the navigation mode.
appBar: AppBar(
title: Text("Select navigation mode"),
actions: <Widget>[
IconButton(icon: Icon(Icons.arrow_forward), onPressed: () {}),
PopupMenuButton<String>(
icon: Icon(Icons.party_mode),
itemBuilder: (BuildContext context) {
return _viewNavigationMode.map((String choice) {
return PopupMenuItem<String>(
value: choice,
child: Text(choice),
);
}).toList();
},
onSelected: (String value) {
setState(() {
if (value == 'None') {
_navigationMode = DateRangePickerNavigationMode.none;
} else if (value == 'Scroll') {
_navigationMode = DateRangePickerNavigationMode.scroll;
} else if (value == 'Snap') {
_navigationMode = DateRangePickerNavigationMode.snap;
}
});
},
),
],
),
body: Card(
margin: const EdgeInsets.fromLTRB(50, 100, 50, 120),
child: SfDateRangePicker(
view: DateRangePickerView.month,
navigationMode: _navigationMode,
),
),
