颤动渐变彩虹轮廓和模糊答案

【问题标题】：Flutter gradient rainbow outline and blur颤动渐变彩虹轮廓和模糊
【发布时间】：2021-06-30 10:18:33
【问题描述】：

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

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

【问题讨论】：

你需要BackdropFilter小部件

标签： flutter flutter-layout gradient

【解决方案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),
          )),
        ),
      ),
    );
  }

输出应如下所示：

【讨论】：