Flutter show container on other container-CodePudding

I want to show container on top right of other container but its showing inside of it.

My code

      Stack(
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
            color: Color(0xffd1e6f5),
            borderRadius: BorderRadius.all(Radius.circular(10))
          ),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: SvgPicture.asset(
                  "assets/icon/notification.svg",
                ),
          ),
        ),
        new Positioned(  // draw a red marble
          top: 0.0,
          right: 0.0,
          child: Container( decoration: BoxDecoration(
            color: Color(0xff009fe1),
            borderRadius: BorderRadius.all(Radius.circular(10))
          ),
          child: Padding(
            padding: const EdgeInsets.all(3.0),
            child: Text('01'),
          ),),
        )
      ]
    )

I want to show it outside a light container like this

CodePudding user response：

You need an external container to simulate the overlap effect. Check the behavior of that component and try replicate your desired behavior.

 Container(
          height: 140.0,
          width: 140.0,
          color: Colors.amber, // set as transparent.
          child: Stack(
            children: [
              Align(
                alignment: Alignment.center,
                child: Container(
                  height: 100.0,
                  width: 100.0,
                  decoration: const BoxDecoration(
                    color: Colors.red,
                    borderRadius: BorderRadius.all(Radius.circular(10))
                   ),
                ),
              ),
              Align(
                alignment: Alignment.topRight,
                child: Container(
                    width: 40.0, height: 40.0, 
                  decoration: const BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.all(Radius.circular(10))
                   )
                ),
              ),
            ],
          ),
        ),

CodePudding user response：

In addition to the answer of Marcos. I would like to tell you about this package

You can also use Badge package