How to have badge on a ListView's children withou clipping in flutter?

Viewed 29

Hello I want badges on children of a ListView but the badges are clipped because of their right neighbor ? How can I get this to work ?

Here is the code:

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
        scrollDirection: Axis.horizontal,
        clipBehavior: Clip.none,
        itemCount: 10,
        itemBuilder: (context, index) {
          return Stack(
            alignment: Alignment.topRight,
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  width: 100,
                  color: Colors.blue,
                ),
              ),
              Positioned(
                right: -10,
                child: Container(
                  height: 40,
                  width: 40,
                  decoration: const BoxDecoration(color: Colors.red, shape: BoxShape.circle),
                ),
              )
            ],
          );
        },
      ),
    );
  }

Here is a screen:

enter image description here

Thanks for answering

1 Answers

On your stack widget use Clip.none, default is Clip.hardEdge

 return Stack(
    clipBehavior: Clip.none,

enter image description here

Related