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!
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),
),
),
);
}
}