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

Question

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

}

我的代码输出：

我期待的是：

Answer 1

嗨Christophorus Anindityo N

为容器的 BoxShadow 属性创建一个 class。

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;
  }
}

并在容器

中使用这个class

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))),
  )
 )

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

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

Transparent card but with shadow effect from elevation

flutter

dart

material-design

opacity

elevation