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

Question

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

Try with Stack widget. https://api.flutter.dev/flutter/widgets/Stack-class.html — Niladri Raychaudhuri, Apr 13 '23 at 14:43

score 2 · Accepted Answer · answered Apr 13 '23 at 14:52

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

There is also transform can be used but you may not it `Transform.translate(offset: const Offset(-10, -10),child: badges.Badge(` — Md. Yeasin Sheikh, Apr 13 '23 at 14:55

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

1 Answers1