Question

我正在重新审视 Flutter 并想构建我的小型测试应用程序。我选择了具有良好渐变对比度的暗模式。

想问一下如何在Flutter中实现带有外部模糊效果的彩虹轮廓。 Apple M1 标志是我寻找的一个很好的例子。任何人都可以建议如何做到这一点？？

Answer 1

如果阴影定位得当，可以通过 BoxShadow 内的 BoxDecoration 来完成，因为您可以放置尽可能多的阴影。

我只是举一个简单的例子，如何用 4 种颜色来处理它：

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        decoration: BoxDecoration(boxShadow: [
          BoxShadow(
            offset: Offset(-20, 20),
            color: Colors.red,
            blurRadius: 15,
            spreadRadius: -10,
          ),
          BoxShadow(
            offset: Offset(-20, -20),
            color: Colors.orange,
            blurRadius: 15,
            spreadRadius: -10,
          ),
          BoxShadow(
            offset: Offset(20, -20),
            color: Colors.blue,
            blurRadius: 15,
            spreadRadius: -10,
          ),
          BoxShadow(
            offset: Offset(20, 20),
            color: Colors.deepPurple,
            blurRadius: 15,
            spreadRadius: -10,
          )
        ]),
        child: Container(
          width: 200,
          height: 200,
          color: Colors.black,
          child: Center(
              child: Text(
            'Text',
            style: TextStyle(color: Colors.white, fontSize: 40),
          )),
        ),
      ),
    );
  }

输出应如下所示：

颤动渐变彩虹轮廓和模糊

1 个答案: