copyWith method

  1. @useResult
FThemeData copyWith({
  1. FAccordionStyle? accordionStyle,
  2. FAlertStyles? alertStyles,
  3. FAvatarStyle? avatarStyle,
  4. FBadgeStyles? badgeStyles,
  5. FBottomNavigationBarStyle? bottomNavigationBarStyle,
  6. FButtonStyles? buttonStyles,
  7. FCalendarStyle? calendarStyle,
  8. FCardStyle? cardStyle,
  9. FCheckboxStyle? checkboxStyle,
  10. FDialogStyle? dialogStyle,
  11. FDividerStyles? dividerStyles,
  12. FHeaderStyles? headerStyle,
  13. FLabelStyles? labelStyles,
  14. FPopoverStyle? popoverStyle,
  15. FPopoverMenuStyle? popoverMenuStyle,
  16. FProgressStyle? progressStyle,
  17. FRadioStyle? radioStyle,
  18. FResizableStyle? resizableStyle,
  19. FScaffoldStyle? scaffoldStyle,
  20. FSelectGroupStyle? selectGroupStyle,
  21. FSelectMenuTileStyle? selectMenuTileStyle,
  22. FSliderStyles? sliderStyles,
  23. FSwitchStyle? switchStyle,
  24. FTabsStyle? tabsStyle,
  25. FTextFieldStyle? textFieldStyle,
  26. FTileGroupStyle? tileGroupStyle,
  27. FTooltipStyle? tooltipStyle,
})

Returns a copy of this FThemeData with the given properties replaced.

final theme = FThemeData(
  alertStyles: ...,
  avatarStyle: ...,
);

final copy = theme.copyWith(avatarStyle: bar);

print(theme.alertStyles == copy.alertStyles); // true
print(theme.avatarStyle == copy.avatarStyle); // false

To modify colorScheme, typography, and/or style, create a new FThemeData using FThemeData.inherit first. This allows the global theme data to propagate to widget-specific theme data.

@override
Widget build(BuildContext context) {
  final theme = FThemeData.inherit(
    colorScheme: FThemes.zinc.light.colorScheme.copyWith(
      primary: const Color(0xFF0D47A1), // dark blue
      primaryForeground: const Color(0xFFFFFFFF), // white
    ),
    typography: FThemes.zinc.light.typography.copyWith(
      defaultFontFamily: 'Roboto',
    ).scale(sizeScalar: 0.8),
    style: FThemes.zinc.light.style.copyWith(
      borderRadius: BorderRadius.zero,
    ),
  );

  return FTheme(
    data: theme.copyWith(
      cardStyle: theme.cardStyle.copyWith(
        decoration: theme.cardStyle.decoration.copyWith(
          borderRadius: const BorderRadius.all(Radius.circular(8)),
        ),
      ),
    ),
    child: const FScaffold(...),
  );
}

Implementation

@useResult
FThemeData copyWith({
  FAccordionStyle? accordionStyle,
  FAlertStyles? alertStyles,
  FAvatarStyle? avatarStyle,
  FBadgeStyles? badgeStyles,
  FBottomNavigationBarStyle? bottomNavigationBarStyle,
  FButtonStyles? buttonStyles,
  FCalendarStyle? calendarStyle,
  FCardStyle? cardStyle,
  FCheckboxStyle? checkboxStyle,
  FDialogStyle? dialogStyle,
  FDividerStyles? dividerStyles,
  FHeaderStyles? headerStyle,
  FLabelStyles? labelStyles,
  FPopoverStyle? popoverStyle,
  FPopoverMenuStyle? popoverMenuStyle,
  FProgressStyle? progressStyle,
  FRadioStyle? radioStyle,
  FResizableStyle? resizableStyle,
  FScaffoldStyle? scaffoldStyle,
  FSelectGroupStyle? selectGroupStyle,
  FSelectMenuTileStyle? selectMenuTileStyle,
  FSliderStyles? sliderStyles,
  FSwitchStyle? switchStyle,
  FTabsStyle? tabsStyle,
  FTextFieldStyle? textFieldStyle,
  FTileGroupStyle? tileGroupStyle,
  FTooltipStyle? tooltipStyle,
}) =>
    FThemeData(
      colorScheme: colorScheme,
      typography: typography,
      style: style,
      accordionStyle: accordionStyle ?? this.accordionStyle,
      alertStyles: alertStyles ?? this.alertStyles,
      avatarStyle: avatarStyle ?? this.avatarStyle,
      badgeStyles: badgeStyles ?? this.badgeStyles,
      bottomNavigationBarStyle: bottomNavigationBarStyle ?? this.bottomNavigationBarStyle,
      buttonStyles: buttonStyles ?? this.buttonStyles,
      calendarStyle: calendarStyle ?? this.calendarStyle,
      cardStyle: cardStyle ?? this.cardStyle,
      checkboxStyle: checkboxStyle ?? this.checkboxStyle,
      dialogStyle: dialogStyle ?? this.dialogStyle,
      dividerStyles: dividerStyles ?? this.dividerStyles,
      headerStyle: headerStyle ?? this.headerStyle,
      labelStyles: labelStyles ?? this.labelStyles,
      popoverStyle: popoverStyle ?? this.popoverStyle,
      popoverMenuStyle: popoverMenuStyle ?? this.popoverMenuStyle,
      progressStyle: progressStyle ?? this.progressStyle,
      radioStyle: radioStyle ?? this.radioStyle,
      resizableStyle: resizableStyle ?? this.resizableStyle,
      scaffoldStyle: scaffoldStyle ?? this.scaffoldStyle,
      selectGroupStyle: selectGroupStyle ?? this.selectGroupStyle,
      selectMenuTileStyle: selectMenuTileStyle ?? this.selectMenuTileStyle,
      sliderStyles: sliderStyles ?? this.sliderStyles,
      switchStyle: switchStyle ?? this.switchStyle,
      tabsStyle: tabsStyle ?? this.tabsStyle,
      textFieldStyle: textFieldStyle ?? this.textFieldStyle,
      tileGroupStyle: tileGroupStyle ?? this.tileGroupStyle,
      tooltipStyle: tooltipStyle ?? this.tooltipStyle,
    );