Flutter：将框阴影添加到透明容器 [英] Flutter: Add box shadow to a transparent Container

问题描述

我正在尝试制作一个呈现此图像。它是带有阴影的透明圆圈。圆圈应显示应用于父容器的任何颜色或背景图像。圆圈是透明的，但我看到的是此：黑匣子阴影而不是背景父级的颜色。有什么建议吗？

I'm trying to make a widget that renders one of the circles shown in this image. It is a transparent circle with a box-shadow. The circle should show whichever color or background image that is applied to the parent container. The circle is transparent but what I see is this: a black box shadow and not the background color of the parent. Any suggestions?

这是我到目前为止的内容：

Here is what I have so far:

class TransParentCircle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: new Center(
          child: new Container(
            decoration: new BoxDecoration(
              border: new Border.all(width: 1.0, color: Colors.black),
              shape: BoxShape.circle,
              color: Colors.transparent,
              boxShadow: <BoxShadow>[
                BoxShadow(
                  color: Colors.black,
                  offset: Offset(1.0, 6.0),
                  blurRadius: 40.0,
                ),
              ],
            ),
            padding: EdgeInsets.all(16.0),
          ),
        ),
        width: 320.0,
        height: 240.0,
        margin: EdgeInsets.only(bottom: 16.0));
  }
}

推荐答案

As您可以在 BoxShadow 类中看到，它们将 toPaint（）方法的子类化为这样：

As you can see in the BoxShadow class, they subclass the toPaint() method like this :

Paint toPaint() {
  final Paint result = Paint()
    ..color = color
    ..maskFilter = MaskFilter.blur(BlurStyle.normal, blurSigma);
  assert(() {
    if (debugDisableShadows)
      result.maskFilter = null;
    return true;
  }());
  return result;
}

...和 BlurStyle.normal 而不是我们想要的 BlurStyle.outer 。

... with BlurStyle.normal instead of BlurStyle.outer as we wanted.

让我们创建一个自定义 BoxShadow ，它使用 BlurStyle 作为参数。

Let's just create a custom BoxShadow that takes the BlurStyle as parameter.

import 'package:flutter/material.dart';

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

现在我们可以像这样使用它了：

Now we can use it like this :

new CustomBoxShadow(
  color: Colors.black,
  offset: new Offset(5.0, 5.0),
  blurRadius: 5.0,
  blurStyle: BlurStyle.outer
)

这篇关于Flutter：将框阴影添加到透明容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！