LanarsInc/animated-bottom-navigation-bar-flutter

When I change the theme to dark mode, the background color does not change except when I press any button. Is there a solution?

RamiHI opened this issue · 1 comments

When I change the theme to dark mode, the background color does not change except when I press any button. Is there a solution?

You can try

class CustomColorsTheme extends ThemeExtension<CustomColorsTheme> {
  const CustomColorsTheme({
    required this.darkShadowColor,
    required this.lightShadowColor,
    required this.colorLabelColor,
  });

  final Color darkShadowColor;
  final Color lightShadowColor;
  final Color colorLabelColor;

  @override
  CustomColorsTheme copyWith({
    Color? darkShadowColor,
    Color? lightShadowColor,
    Color? colorLabelColor,
  }) {
    return CustomColorsTheme(
      darkShadowColor: darkShadowColor ?? this.darkShadowColor,
      lightShadowColor: lightShadowColor ?? this.lightShadowColor,
      colorLabelColor: colorLabelColor ?? this.colorLabelColor,
    );
  }

  @override
  CustomColorsTheme lerp(
    ThemeExtension<CustomColorsTheme>? other,
    double t,
  ) {
    if (other is! CustomColorsTheme) {
      return this;
    }
    return CustomColorsTheme(
      darkShadowColor: Color.lerp(darkShadowColor, other.darkShadowColor, t) ??
          darkShadowColor,
      lightShadowColor:
          Color.lerp(lightShadowColor, other.lightShadowColor, t) ??
              lightShadowColor,
      colorLabelColor: Color.lerp(colorLabelColor, other.colorLabelColor, t) ??
          colorLabelColor,
    );
  }
}

then

ThemeData().copyWith(
      extensions: [
        CustomColorsTheme(
          colorLabelColor: isLight ? Colors.grey : const Color(0xFF7A7FB0),
          lightShadowColor:
              isLight ? const Color(0xFFFFFAF8) : const Color(0xFF292E5B),
          darkShadowColor:
              isLight ? const Color(0x3DE8A891) : const Color(0xFF070A25),
        )
      ],
    )

and set this theme to MaterialApp