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 like the image above?

Row(   children: <Widget>[     Icon(       Icons.monetization_on, size: 36.0,        color: const Color.fromRGBO(218, 165, 32, 1.0),     ),     Icon(       Icons.monetization_on, size: 36.0,       color: const Color.fromRGBO(218, 165, 32, 1.0),     ),   ], ), 

Answer 1

You can use a Stack with Positioned to achieve this:

class StackExample extends StatelessWidget {   @override   Widget build(BuildContext context) {     return new Scaffold(       appBar: new AppBar(),       body:  new Container(         padding: const EdgeInsets.all(8.0),           height: 500.0,           width: 500.0,           // alignment: FractionalOffset.center,           child: new Stack(             //alignment:new Alignment(x, y)             children: <Widget>[               new Icon(Icons.monetization_on, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0)),               new Positioned(                 left: 20.0,                 child: new Icon(Icons.monetization_on, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0)),               ),               new Positioned(                 left:40.0,                 child: new Icon(Icons.monetization_on, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0)),               )              ],           ),         ),       )     ;   } } 

And this how you get some nice shadow drop so the icon stands out more:

class StackExample extends StatelessWidget {   @override   Widget build(BuildContext context) {     return new Scaffold(       appBar: new AppBar(),       body:  new Container(         padding: const EdgeInsets.all(8.0),           height: 500.0,           width: 500.0,           // alignment: FractionalOffset.center,           child: new Stack(             //alignment:new Alignment(x, y)             children: <Widget>[               new Container(                 decoration: new BoxDecoration(                   borderRadius: BorderRadius.circular(25.0),                   boxShadow: [                     new BoxShadow(                       blurRadius: 5.0,                       offset: const Offset(3.0, 0.0),                       color: Colors.grey,                     )                   ]                 ),                 child: new Icon(Icons.monetization_on, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0))),               new Positioned(                 left: 20.0,                 child: new Container(                   decoration: new BoxDecoration(                   borderRadius: BorderRadius.circular(25.0),                   boxShadow: [                     new BoxShadow(                       blurRadius: 5.0,                       offset: const Offset(3.0, 0.0),                       color: Colors.grey,                     )                   ]                 ),                   child: new Icon(Icons.monetization_on, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0))),               ),               new Positioned(                 left:40.0,                 child: new Container(                   decoration: new BoxDecoration(                   borderRadius: BorderRadius.circular(25.0),                   boxShadow: [                     new BoxShadow(                       blurRadius: 5.0,                       offset: const Offset(3.0, 0.0),                       color: Colors.grey,                     )                   ]                 )                   ,child: new Icon(Icons.monetization_on, size: 36.0, color: const Color.fromRGBO(218, 165, 32, 1.0))),               )              ],           ),         ),       )     ;   } }