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

1 min read

In the Flutter date range picker, you can add the custom fonts for headerStyle, viewHeaderStyle, monthCellStyle, yearCellStyle.

STEP 1: Create a font folder and add the required custom fonts.

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

Month view

month