在容器上颤动叠加圆

Question

我正尝试实施此设计

我尝试放入另一个容器，但结果不同。 这是代码

        child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        SizedBox(height: 10),
        Container(
          padding: EdgeInsets.all(20),
          width: ScreenUtil().setWidth(800),
          height: ScreenUtil().setHeight(600),
          decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(30.0),
              boxShadow: [
                BoxShadow(
                    color: Color(0xFF6078ea).withOpacity(.3),
                    offset: Offset(0.0, 4.0),
                    blurRadius: 4.0)
              ]),
          child: Column(
            children: <Widget>[
              Text(
                'Login',
                textAlign: TextAlign.center,
                style: TextStyle(fontWeight: FontWeight.bold),
                textScaleFactor: 2,
              ),
            ],
          ),
        ),
        Container(
            child: SizedBox(
              height: 100,
              width: 100,
            ),
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(180.0),
                boxShadow: [
                  BoxShadow(
                      color: Color(0xFF6078ea).withOpacity(.3),
                      offset: Offset(0.0, 4.0),
                      blurRadius: 4.0)
                ])),
      ],
    ),

这就是我在考虑实现此设计的想法。有什么更好的方法吗？

Answer 1

您需要使用 ClipPath 小部件来获得该形状。创建自己的类以获取自定义形状。

这是您入门的链接 Custom ClipPath Example 您只需要了解设备Check this for more details

上的x和y轴

Answer 2

使用Stack重叠圆圈按钮。