透明卡片，但有高程阴影效果

问题描述

我在制作具有透明白色（不透明度 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))),)
 )

现在您可以编写代码了:)