how to a place half of the widget outside of another widget in flutter?

Issue

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

Solution

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

Answered By – Md. Yeasin Sheikh

Answer Checked By – Senaida (FlutterFixes Volunteer)