Flutter overlay circle over a container

Question

im trying to implement this design

i tried putting another container but i got different results . here is the code

        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)
                ])),
      ],
    ),

that's what i was thinking of to implement this design. is there is any better way to do it?

Answer 1

You need to use ClipPath Widget to get that shape. Create your own class to get the custom shapes.

Here is a link for you to get started Custom ClipPath Example You just need to understand x and y axis on the device Check this for more details

Answer 2

使用堆栈覆盖圆圈按钮。