Flutter show container on other container - flutter

Question

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

Answer 1

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

Answer 2

In addition to the answer of Marcos. I would like to tell you about this package badges
Example Usage
Badge(
badgeContent: Text('3'),
child: Icon(Icons.settings),
)

Answer 3

Try below code hope its helpful to you.
Container(
height: 100.0,
width: 100.0,
child: Stack(
children: [
Align(
alignment: Alignment.center,
child: Container(
height: 50.0,
width: 50.0,
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
child: Icon(
Icons.notifications,
color: Colors.white,
),
),
),
Positioned(
top: 17,
right: 17,
child: Container(
width: 25.0,
height: 25.0,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blue[200],
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
child: Text(
'01',
),
),
),
],
),
),
Your result screen ->
You can also use Badge package here
Badge(
badgeColor: Colors.blue,
animationType: BadgeAnimationType.slide,
toAnimate: true,
position: BadgePosition.topEnd(
top: -10,
end: -10,
),
badgeContent: Text(
'01',
),
child: Container(
height: 50.0,
width: 50.0,
decoration: const BoxDecoration(
color: Color(0xffd1e6f5),
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
child: Icon(
Icons.notifications,
color: Colors.white,
),
),
),
Your result screen using package ->