0

I got this weird looking shadow (blocky and not smooth), whenever I am using the darktheme. The custom BoxShadow is inside the themedata using themeextensions.

Hope anybody can explain to me, why this happens and how to fix it. If you need more info, feel free to ask!

Thank you very much!

Wrong shadow rendering

Themedata:

static final darkTheme = ThemeData.dark().copyWith(
    extensions: const <ThemeExtension<dynamic>>{
      AppColor(
        cardShadow: [
          BoxShadow(blurRadius: 100, color: Color.fromRGBO(68, 94, 113, 0.15))
        ],
      )
    },
  );
}

class AppColor extends ThemeExtension<AppColor> {
  const AppColor(
      {required this.cardShadow});

  final List<BoxShadow> cardShadow;

  @override
  AppColor copyWith({Color? basicShadow}) => AppColor(
        cardShadow: cardShadow,
      );

  @override
  ThemeExtension<AppColor> lerp(
      covariant ThemeExtension<AppColor>? other, double t) {
    if (other == null) {
      return this;
    }
    if (other is! AppColor) {
      throw ArgumentError(other);
    }
    return AppColor(
      cardShadow: cardShadow,
    );
  }
}

Container (Theme usage):

class NewsScreen extends StatelessWidget {
  const NewsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 150,
          height: 150,
          decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: Theme.of(context).extension<AppColor>()!.cardShadow),
        ),
      ),
    );
  }
}

0 Answers0