颤振中的自定义颜色背景

Question

我该怎么做这个背景之王： https://dribbble.com/shots/14805280-Wallet-app

我尝试了渐变，但不仅仅是一个简单的渐变，我还尝试了使用 3 个容器的 ShaderMask，这样做的正确方法是什么？

Answer 1

这是我通过简单实现得到的最接近的结果，包含模糊效果和一些容器。有一些 issues 带有裁剪模糊的边界，如果它解决了，它会与您的实例更加相似。

codepen link 也可用

class FancyBlurBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
          child: ClipRRect(
            borderRadius: BorderRadius.circular(15),
            child: SizedBox(
              width: 200,
              height: 120,
              child: Stack(
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Expanded(
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: [
                            Expanded(
                                child: Container(color: Color(0xFF7dccf3))),
                            Expanded(
                                child: Container(color: Color(0xFF695bf4))),
                          ],
                        ),
                      ),
                      Expanded(
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: [
                            Expanded(
                                child: Container(color: Color(0xFFde536f))),
                            Expanded(
                                child: Container(color: Color(0xFFf6c37f))),
                          ],
                        ),
                      ),
                    ],
                  ),
                  Transform.translate(
                    offset: Offset(10, 10),
                    child: BackdropFilter(
                      filter: ImageFilter.blur(sigmaX: 30.0, sigmaY: 30.0),
                      child: Container(color: Colors.white.withOpacity(0.0)),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      );
  }
}