Category / Section
How to change the selection shape in the Flutter Date Range Picker (SfDateRangePicker)?
2 mins read
In the Flutter date range picker, we can change the shape of the selections using the `selectionShape` property of the `SfDateRangePicker`.
Step 1:
Use the `selectionShape` property for changing the selection shape of the date range picker.
body: Card( margin: const EdgeInsets.fromLTRB(40, 150, 40, 150), child: SfDateRangePicker( controller: _controller, selectionShape: DateRangePickerSelectionShape.rectangle, selectionMode: DateRangePickerSelectionMode.range, allowViewNavigation: false, )),
Step 2:
Please find the entire code snippet for selection shape in date range picker.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
import 'package:syncfusion_flutter_datepicker/datepicker.dart';
void main() => runApp(SelectionShape());
class SelectionShape extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: SelectionShapeInPicker(),
);
}
}
class SelectionShapeInPicker extends StatefulWidget {
@override
State<StatefulWidget> createState() => PickerState();
}
class PickerState extends State<SelectionShapeInPicker> {
final DateRangePickerController _controller = DateRangePickerController();
final List<String> views = <String>['Month', 'Year', 'Decade', 'Century'];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: PopupMenuButton<String>(
icon: Icon(Icons.calendar_today),
itemBuilder: (BuildContext context) => views.map((String choice) {
return PopupMenuItem<String>(
value: choice,
child: Text(choice),
);
}).toList(),
onSelected: (String value) {
if (value == 'Month') {
_controller.view = DateRangePickerView.month;
} else if (value == 'Year') {
_controller.view = DateRangePickerView.year;
} else if (value == 'Decade') {
_controller.view = DateRangePickerView.decade;
} else if (value == 'Century') {
_controller.view = DateRangePickerView.century;
}
},
),
),
body: Card(
margin: const EdgeInsets.fromLTRB(40, 150, 40, 150),
child: SfDateRangePicker(
controller: _controller,
selectionShape: DateRangePickerSelectionShape.rectangle,
selectionMode: DateRangePickerSelectionMode.range,
allowViewNavigation: false,
)),
);
}
}
View the Github Sample here.
Screenshots
|
|
|
|



