I have a Column which has a 2 items : 1- badge and 2- container . I want to place the half of the badge inside the container , the image will be more clear ,
and here is the parts of code :
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
badges.Badge(
badgeContent:
Icon(Icons.check, color: Colors.white, size: 10),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Triggered')
),
),
Container(
width: double.infinity,
decoration: containerRadius(Colors.grey[200], 12),
margin: EdgeInsets.all(4),
child: Text('Description')
),
],
);
is there any idea how can I place half of the badge inside the container above the three dots ? thanks
You can use Stack widget, make sure use clipBehavior: Clip.none,
on Stack and wrap children with positional widget like Align, Positioned widget.
Stack(
clipBehavior: Clip.none,
children: [
Positioned(
right: -10, // negative means outside
top: -10,
child: badges.Badge(
badgeContent:
Icon(Icons.check, color: Colors.white, size: 10),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Triggered')),
),
),
Positioned.fill(
child: Container(
// decoration: containerRadius(Colors.grey[200], 12),
margin: EdgeInsets.all(4),
child: Text('Description')),
),
],
),