search

syncfusion / flutter-widgets

Syncfusion Flutter widgets libraries include high quality UI widgets and file-format packages to help you create rich, high-quality applications for iOS, Android, and web from a single code base.
1.6k stars 783 forks source link

How to change the size of the month navigation arrows? #65

Closed ajaygautam closed 3 years ago

ajaygautam commented 3 years ago

Hello

Thanks for the date selector plugin. Question: How do I change the size of the arrow keys on the month navigation? (see attached screenshot)

iPhone_11_Pro_–_14_2_and_aip_app_–_tournaments-add_dart

My current widget config:

SfDateRangePicker(
                onSelectionChanged: _onDateSelectionChanged,
                enablePastDates: false,
                showNavigationArrow: true,
                headerStyle: DateRangePickerHeaderStyle(
                  textStyle: TextStyle(
                    color: appState.visualData.textColor,
                    fontWeight: FontWeight.w600,
                    fontSize: 20,
                  ),
                ),
                monthCellStyle: DateRangePickerMonthCellStyle(
                    textStyle: TextStyle(
                  fontWeight: FontWeight.w500,
                  fontSize: 20,
                )),
                monthViewSettings: DateRangePickerMonthViewSettings(
                    dayFormat: 'EEE',
                    viewHeaderStyle: DateRangePickerViewHeaderStyle(
                      textStyle: TextStyle(
                        fontWeight: FontWeight.w600,
                        fontSize: 13,
                      ),
                    )),
              ),
Indumathi1195R commented 3 years ago

Hi @ajaygautam,

Based on the provided information, we have checked your requirement “Changing the size of the month navigation arrow in SfDateRangePicker”. Date range picker doesn’t have support for changing the navigation arrow size. But your requirement can be achieved by hiding the default header using headerHeight property value as 0 and placing the custom header in the date range picker. We have a KB document for header customization. Please find the KB from the following link,

KB link: https://www.syncfusion.com/kb/11427/how-to-customize-the-header-view-of-the-flutter-date-range-picker

UG link: https://help.syncfusion.com/flutter/daterangepicker/headers#customize-the-header-height

We hope that the above helps you. Please let us know if you need further assistance.

Regards, Indumathi R