How to add custom fonts in the Flutter Date Range Picker (SfDateRangePicker)

In the Flutter date range picker, you can add the custom fonts to various style elements including headerStyle, viewHeaderStyle, monthCellStyle, and yearCellStyle.

STEP 1: Create a 'fonts' directory in your project root and add your custom font files.

fonts

STEP 2: Specify custom fonts in Pubspec.yaml file.

fonts:
  - family: Roboto
    fonts:
      - asset: fonts/Roboto-Italic.ttf
        weight: 700
  - family: SyneTactile
    fonts:
      - asset: fonts/SyneTactile-Regular.ttf
        weight: 700

STEP 3: Apply the custom fonts in headerStyle, viewHeaderStyle, monthCellStyle, yearCellStyle of the calendar.

child: SfDateRangePicker(
  view: DateRangePickerView.month,
  headerStyle: DateRangePickerHeaderStyle(
      textStyle: TextStyle(
          fontFamily: 'SyneTactile', color: Colors.black)),
  monthViewSettings: DateRangePickerMonthViewSettings(
    viewHeaderStyle: DateRangePickerViewHeaderStyle(
        textStyle: TextStyle(
            fontFamily: 'SyneTactile', color: Colors.black)),
  ),
  monthCellStyle: DateRangePickerMonthCellStyle(
      textStyle:
          TextStyle(fontFamily: 'SyneTactile', color: Colors.black),
      todayTextStyle: TextStyle(
          fontFamily: 'SyneTactile', color: Colors.black)),
  yearCellStyle: DateRangePickerYearCellStyle(
    textStyle:
        TextStyle(fontFamily: 'SyneTactile', color: Colors.black),
    disabledDatesTextStyle: const TextStyle(
        fontFamily: 'SyneTactile', color: Colors.black),
    todayTextStyle:
        TextStyle(fontFamily: 'SyneTactile', color: Colors.black),
    leadingDatesTextStyle:
        TextStyle(fontFamily: 'SyneTactile', color: Colors.black),
  ),
),

View the Github Sample here.

Month view

month