背景中的三个模糊圆圈 UI 设计挑战

Question

如何创建这种应用程序background.it 在屏幕的三个部分使用三个圆圈。如何创建这样的背景颜色？？？

Answer 1

请检查一下，我想这就是你需要的。如您所见，您可以将 Colors.transparent 设置为容器的 color，然后使用 box-shadow 创建类似该图片的东西。

class CustomScaffold extends StatelessWidget {
  const CustomScaffold({Key? key}) : super(key: key);

  coloredContainer(double size, Color color) => Container(
        width: size,
        height: size,
        decoration: BoxDecoration(
          color: Colors.transparent,
          boxShadow: [
            BoxShadow(color: color, blurRadius: 100),
          ],
          shape: BoxShape.circle,
        ),
      );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromARGB(255, 152, 204, 246),
      body: Stack(
        children: [
          Positioned(
            top: -100,
            left: -100,
            child:
                coloredContainer(500, const Color.fromARGB(255, 104, 136, 224)),
          ),
          Positioned(
            top: 700,
            left: 100,
            child:
                coloredContainer(400, const Color.fromARGB(255, 93, 128, 226)),
          ),
        ],
      ),
    );
  }
}

结果：

Answer 2

尝试使用

BackdropFilter

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFF3F6FE),
      body: Stack(
        children: [
          Positioned(
              top: -150,
              left: -150,
              child: Container(
                width: 300,
                height: 300,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(500),
                    color: Color(0xFFD8E4FC)),
              )),
          Positioned(
              top: 200,
              right: -150,
              child: Container(
                width: 300,
                height: 300,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(500),
                    color: Color(0xFFE8DCFC)),
              )),
          Positioned(
              bottom: -150,
              left: -150,
              child: Container(
                width: 300,
                height: 300,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(500),
                    color: Color(0xFFD8E4FC)),
              )),
          Container(
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 50.0, sigmaY: 50.0),
              child: Container(
                decoration: BoxDecoration(color: Colors.white.withOpacity(0.0)),
              ),
            ),
          )
        ],
      ),
    );
  }
}

结果：

背景中的三个模糊圆圈 UI 设计挑战

three blured circles in background UI design challenge

flutter

flutter-layout