DateRangePicker: adding `cellBuilder` makes selected date square

[joachimbulow]

Bug description

version: ^27.2.5

This may not be a bug, but as soon as i provide a custom cellBuilder my selected date cell is enforced with square properties on the overlay.

Not sure if there is a way to override this?
Pretty odd behaviour imo.

Tried looking into selectionShape, adding hard properties to the cell builder function, to no avail

Steps to reproduce

Step 1: Add a default SfDateRangePicker to your app.
Step 2: Add a cellBuilder returning a circular container with the date text inside.
Step 3: Select a date. The Overlayed color is square instead of circle.

Code sample

Code sample

[Add your code here]

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Stack Traces

Stack Traces

[Add the Stack Traces here]

On which target platforms have you observed this bug?

iOS

Flutter Doctor output

Doctor output

[Add your output here]

[joachimbulow]

You also conveniently leave that out from e.g.

https://support.syncfusion.com/kb/article/10750/how-to-customize-the-special-dates-using-builder-in-the-flutter-date-range-picker?isInternalRefresh=False

(https://github.com/SyncfusionExamples/customize-special-dates-using-builder-flutter-date-picker/blob/main/lib/main.dart)

Am i trippin?
Noone wants a square selection 😭

[joachimbulow]

Also seems like selectionColor is broken. At least i could NOT get it to work in single mode.

Instead i had to resort to overriding selectionColor getter from the theme.

// Having to create a custom theme just to color a selection is a bit sad, i must admit...
//
// This related to my original question, because my workaround will be to color the selection transparent when necessary :/
//
class CustomDateRangePickerThemeData extends SfDateRangePickerThemeData {
  final BuildContext context;

  CustomDateRangePickerThemeData(this.context);

  @override
  Color? get selectionColor => Colors.red;
}

[BPraveenBalu]

Hi Joachimbulow,

As per the current implementation of the SfDateRangePicker, there is no direct support for modifying the shape of the selected cells while using cellBuilder. However, we have already logged feature request for the requested feature in our feedback portal.

We will prioritize the features of every release based on demand and priority. So, this feature will be available in any of our upcoming releases. You can also track the status of the feature with the feedback below.

FR Link: Provide support to customize the selected cells shape while using cellBuilder.

Regards,
Praveen Balu.

[joachimbulow]

Roger that.

For other people's reference I have extended the SfDateRangePickerThemeData to make it transparent, allowing me to custom draw the cell when selected.

/// For some reason, when using cellBuilder, the selection becomes a large square with no way to change it.
///
/// To alleviate this issue, while still using cellBuilder, we can simply disable the selection color
class DisabledSelectionColorPickerThemeData extends SfDateRangePickerThemeData {
  final BuildContext context;
  final Color? selectedColor;

  const DisabledSelectionColorPickerThemeData(
    this.context, {
    this.selectedColor,
  });

  @override
  Color? get selectionColor => selectedColor ?? context.customColors.primary;
}

Whic can then be used in the date picker like:

return SfDateRangePickerTheme(
      data: DisabledSelectionColorPickerThemeData(
        context,
        selectedColor: shouldUseCustomCell ? Colors.transparent : null,
      ),

[joachimbulow]

Wait I already mentioned that - oh well 🤷

[joachimbulow]

Actually will reopen - close it when you merge the request

Since it’s an unplanned feature request, we are closing this issue. For more details, please follow the FR and add details in FR comments.

FR link: https://www.syncfusion.com/feedback/59673/provide-support-to-customize-the-selected-cells-shape-while-using-cellbuilder