How do I stack widgets overlapping each other in flutter

Question

I need to stack widgets like this:

I wrote the code below. However the coins are coming one after another with some default padding. How can I get something l

Answer 1

I wanted something without dependencies and without hardcoded layout. You could enhance by making overlap use a media query to overlap in terms of %.

 Widget overlapped() {
    final overlap = 10.0;
    final items = [
      CircleAvatar(child: Text('1'), backgroundColor: Colors.red),
      CircleAvatar(child: Text('2'), backgroundColor: Colors.green),
      CircleAvatar(child: Text('3'), backgroundColor: Colors.blue),
    ];

    List stackLayers = List.generate(items.length, (index) {
      return Padding(
        padding: EdgeInsets.fromLTRB(index.toDouble() * overlap, 0, 0, 0),
        child: items[index],
      );
    });

    return Stack(children: stackLayers);
  }