How to center date text in cell?

[AriesVu]

Bug description

I am using the SfDateRangePicker widget but the UI is skewed to the left. Is there any way to fix it?

Steps to reproduce

syncfusion_flutter_calendar: ^20.3.58

Code sample

Stack(children: [ Container( margin: theme == theme6 || theme == theme5 ? const EdgeInsets.fromLTRB(0, 29.7, 0, 0) : null, decoration: bg1[theme], child: Container( decoration: theme == theme5 ? const BoxDecoration( image: DecorationImage( image: AssetImage('assets/images/theme_5/theme5_bg_sticky-1.png'), fit: BoxFit.cover)) : null, padding: theme == theme3 ? const EdgeInsets.only(left: 10, right: 10, top: 10) : null, child: Container( margin: theme != themeDefault ? EdgeInsets.only(top: theme == theme6 || theme == theme5 ? 10 : 38, bottom: 0, left: 2, right: 0) : null, decoration: bg2[theme], padding: const EdgeInsets.only(left: 10, right: 10, top: 10, bottom: 20), child: SfDateRangePicker( controller: pickerController, view: DateRangePickerView.month, selectionMode: DateRangePickerSelectionMode.multiRange, navigationDirection: DateRangePickerNavigationDirection.vertical, selectionTextStyle: const TextStyle(color: Colors.white), startRangeSelectionColor: HexColor(colorSettingCode['theme$theme'][int.parse(widget.colorSetting)]), endRangeSelectionColor: HexColor(colorSettingCode['theme$theme'][int.parse(widget.colorSetting)]), rangeSelectionColor: HexColor(colorSettingCode['theme$theme'][int.parse(widget.colorSetting)]), rangeTextStyle: const TextStyle(color: Colors.white, fontSize: 18), // cellBuilder : cellBuilder, monthViewSettings: DateRangePickerMonthViewSettings( // remove header viewHeaderHeight: theme != themeDefault ? 0 : 50, showTrailingAndLeadingDates: true, weekNumberStyle: const DateRangePickerWeekNumberStyle( ), viewHeaderStyle: DateRangePickerViewHeaderStyle( backgroundColor: theme != themeDefault ? Colors.transparent : const Color(0xFFFFE6E7), textStyle: TextStyle( fontFamily: 'FontsJp', color: theme == theme1 ? HexColor("#282828") : theme == theme2 ? Colors.white : Colors.red), ), ), initialSelectedRanges: _initial, monthCellStyle: DateRangePickerMonthCellStyle( trailingDatesTextStyle: theme != themeDefault ? const TextStyle(fontSize: 15, fontWeight: FontWeight.w100, color: Colors.grey) : null, leadingDatesTextStyle: theme != themeDefault ? const TextStyle(fontSize: 15, fontWeight: FontWeight.w100, color: Colors.grey) : null, todayTextStyle: theme != themeDefault ? const TextStyle(fontSize: 15, fontWeight: FontWeight.w100, color: Colors.blue) : null, weekendTextStyle: const TextStyle(color: Colors.red), todayCellDecoration: BoxDecoration( image: theme == theme2 ? const DecorationImage( image: AssetImage("assets/images/theme_2/theme2_calendar_week_day_bg.png"), fit: BoxFit.fill) : theme == theme4 ? const DecorationImage( image: AssetImage("assets/images/theme_4/theme4_calendar_month_day_bg.png"), fit: BoxFit.fill) : null, // : null, ), blackoutDatesDecoration: BoxDecoration( color: Colors.red, border: Border.all(color: const Color(0xFFF44436), width: 2), shape: BoxShape.circle, borderRadius: BorderRadius.zero, ), cellDecoration: BoxDecoration( image: theme == theme2 ? const DecorationImage( image: AssetImage("assets/images/theme_2/theme2_calendar_week_day_bg.png"), fit: BoxFit.fill) : theme == theme4 ? const DecorationImage( image: AssetImage("assets/images/theme_4/theme4_calendar_month_day_bg.png"), fit: BoxFit.fill) : null, borderRadius: const BorderRadius.all(Radius.circular(10)),

            ),
          ),
          onSelectionChanged: (DateRangePickerSelectionChangedArgs detail) {
            handleSelectionDate(detail);
          },
          selectionShape: theme != themeDefault
              ? DateRangePickerSelectionShape.rectangle
              : DateRangePickerSelectionShape.circle,
          onViewChanged: (DateRangePickerViewChangedArgs details) {
            title =
                '${DateFormat('yyy', 'ja').format(details.visibleDateRange.startDate!.add(const Duration(days: 8)))}年${DateFormat('MMM', 'ja').format(details.visibleDateRange.startDate!.add(const Duration(days: 8)))}';
            widget.onChangedMonth(title);
          },
        ),
      ),
    ),
  ),
]);

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Stack Traces

Stack Traces

```dart [Add the Stack Traces here] ```

On which target platforms have you observed this bug?

Android

Flutter Doctor output

Doctor output

```console [Add your output here] ```

[Syaba999]

I don't know what's broken in this version, but if you edit the source code in month_view.dart, on line 4499, removing the minWidth parameter, what would it look like

monthView._textPainter.layout(maxWidth: cellWidth);

then this will fix the problem

[Mugunthan-Ramalingam]

Hi @AriesVu,

We have analyzed your query, and the issue is replicating in version 20.3.58. However, it has been resolved in version 22.1.34. Therefore, To resolve the issue, we recommend updating your SfCalendar version to 22.1.34 or later version.

If you are still experiencing the issue, we request that you replicate it in the attached sample and provide us with more details regarding the specific scenario in which you are encountering this issue. This will help us to assist you more effectively.

gh_2110.zip

Regards, Mugunthan.