flutterdartflutter-containerflutter-column

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


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 ,

enter image description here

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