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 sample in GitHub