如何解决透明卡片,但有高程阴影效果
我在制作具有透明白色(不透明度 0.4)的卡片时遇到问题。但是,有来自高程效果的阴影。
如果我移除高程,则没有阴影效果并且卡片看起来是透明的。但是,如果我添加一些高度,透明效果就毁了。这是我尝试过的:
Widget cardMenu(String title) {
return Container(
padding: EdgeInsets.symmetric(horizontal: UIComponent.componentPadding),child: Stack(
alignment: Alignment.topCenter,children: [
Positioned(
top: -100,child: Container(
child: Container(
height: 200,width: 200,decoration: Boxdecoration(
color: Colors.white,shape: BoxShape.circle,),child: Center(
child: Text(
title,style: TextStyle(color: Colors.transparent),)
),Align(
alignment: Alignment.bottomCenter,child: Card(
elevation: 0,color: Colors.white.withOpacity(0.4),shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(UIComponent.cardButtonRadius),child: Container(
height: 350,width: 180,child: Column(
mainAxisSize: MainAxisSize.min,mainAxisAlignment: MainAxisAlignment.end,children: [
Container(
padding: EdgeInsets.all(UIComponent.widgetPadding),child: Text(
title,style: TextStyle(
fontWeight: FontWeight.bold,fontSize: UIComponent.h1,color: UIComponent.neutralDark,)
],)
],);
}
我的期望是:
解决方法
嗨Christophorus Anindityo N
为容器的 BoxShadow 属性创建一个类。
class CustomBoxShadow extends BoxShadow {
final BlurStyle blurStyle;
const CustomBoxShadow({
Color color = const Color(0xFF000000),Offset offset = Offset.zero,double blurRadius = 0.0,this.blurStyle = BlurStyle.normal,}) : super(color: color,offset: offset,blurRadius: blurRadius);
@override
Paint toPaint() {
final Paint result = Paint()
..color = color
..maskFilter = MaskFilter.blur(this.blurStyle,blurSigma);
assert(() {
if (debugDisableShadows)
result.maskFilter = null;
return true;
}());
return result;
}
}
并在容器中使用这个类
Container(
child: Center(
child: Container(
height: 200.0,width: 300.0
decoration: BoxDecoration(
boxShadow: [
CustomBoxShadow(
color: Colors.black,offset: Offset(5.0,5.0),blurRadius: 5.0,blurStyle: BlurStyle.outer
)
],),child: Text("Transparent Card with Shadow",style:TextStyle(fontSize:15))),)
)
现在您可以编写代码了:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。