75

I need to stack widgets like this:

coins

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

8 Answers 8

135

You can use a Stack with Positioned to achieve this:

enter image description here

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:

enter image description here

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

            ],
          ),
        ),
      )
    ;
  }
}
5
  • let's say we want to make this in the center of the screen ? we need to change the left property in every Positioned Widget .right ? new Center(child: new StackExample()) Apr 15, 2018 at 6:55
  • I am not sure why it is happening but when I try to set alignment: FractionalOffset.center, It is centered but it is being overflowed by some other element Apr 15, 2018 at 7:14
  • i got the same problem, now i am trying to use Positioned.fromRelativeRect Apr 15, 2018 at 7:18
  • 7
    Ah I know why, we need to explicitly set overflow: Overflow.visible, in the Stack Apr 15, 2018 at 7:18
  • Ok so i am using this on my app. I have a listview (vertically scrollable) and each element has these stacked elements which needs to be horizontally scrollable. How would i achieve that?
    – Ashok
    Oct 22, 2020 at 11:50
44

As of November 2019 I'd like to add a second solution:

Using package: https://pub.dev/packages/assorted_layout_widgets

var widget1 = ...;
var widget2 = ...;

RowSuper(  
  children: [widget1, widget2],    
  innerDistance: -20.0,
  );

This will overlap row cells by 20 pixels.

The difference from this solution to the one using Stack is that Positioned widgets in a Stack don't occupy space. So you can't make the Stack the size of its contents, unless you know their sizes in advance. However, the RowSuper will have the size of all of its children widgets.

Note, there is also a ColumnSuper. Also note I am the author of this package.

4
  • 1
    This help me to reduce spacing between Column elements. Thanks a lot. Apr 21, 2020 at 21:23
  • 1
    Works perfect! Thanks!
    – penguru
    Feb 15, 2021 at 8:59
  • 1
    This is filthy and I love it. Thank you.
    – Dave
    Jul 13, 2021 at 16:53
  • 1
    the easiest. so far haven't seen any troubles with this approach
    – Diana
    Aug 29 at 10:15
32

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<Widget> stackLayers = List<Widget>.generate(items.length, (index) {
      return Padding(
        padding: EdgeInsets.fromLTRB(index.toDouble() * overlap, 0, 0, 0),
        child: items[index],
      );
    });

    return Stack(children: stackLayers);
  }
4
  • IMHO this solution is much cleaner than the others Aug 17, 2020 at 11:53
  • Such a nice solution!
    – okihnjo
    May 7, 2021 at 9:57
  • Lol! This is much better than the recommended ones. Appreciate @Lee Higgins.
    – 4xMafole
    Nov 19, 2021 at 23:19
  • This gives you all the flexibility you need without an external library. Thanks. Feb 7 at 19:28
2

You could try my package (signed_spacing_flex). It's exactly the same as a normal Row (or Column and Flex). But it also lets you set negative spacing which causes its children to overlap. You can also set which children should be on top when they overlap.

In your case it would be something like:

SignedSpacingRow(
  spacing: -12.0,
  stackingOrder: StackingOrder.lastOnTop,
  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),
    ),
  ],
),

It also works with expanded children if you need.

2
  • 1
    This worked great for me, because I am using expanded children, thanks!
    – psyched
    Nov 21, 2022 at 12:08
  • This worked great for me, great drop in replacement. The options with Stack or the assorted_layout_widgets weren't ideal because they didn't support crossAxisAlignement or Expanded children as easily.
    – Rik
    Jun 4 at 1:15
1

Here is my code on Profile Picture overlapped by camera image in flutter.

Output: Click here to view output image

Container(
    constraints: new BoxConstraints(
      maxHeight: 200.0,
      maxWidth: 200.0
    ),
    padding: new EdgeInsets.only(left: 16.0, bottom: 8.0, right: 16.0),
    decoration: new BoxDecoration(
      shape: BoxShape.circle,
      image: new DecorationImage(
        image: new AssetImage('assets/images/profile.png'),
        fit: BoxFit.cover,
      ),
    ),
    child: Stack(
      children: [
        new Positioned(
          right: 0.0,
          bottom: 3.0,
          child: Container(
            constraints: new BoxConstraints(
                maxHeight: 50.0,
                maxWidth: 50.0
            ),
            decoration: new BoxDecoration(
              boxShadow: [
                BoxShadow(
                  color:Color(0xFFdedede),
                  offset: Offset(2,2)
                ),
              ],
              color: Colors.white,
              shape: BoxShape.circle,
            ),
            child: GestureDetector(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Icon(
                  Icons.photo_camera,
                  size: 34,
                  color: Color(0xFF00cde7),
                ),
              ),
            ),
          ),
        ),
      ],
    ),
  )
1

Wraping your elements with OverflowBox and giving the maxWidth value will achieve this effect.

The following can be used in a row or a listview

 return SizedBox(
            width: 35, //--> list children will be 35 in width
            child: OverflowBox(
              maxWidth: 50, // --> allowing the child to overflow will cause overlap between elements
              child: Container(
                width: 50,
                child: Text((index + 1).toString()),
              ),
            ),
          );
    
1

Reverse variant based on @Lee Higgins

const size = 32.0;
const overlap = size - 6.0;
final containers = [
  Container(
    decoration: BoxDecoration(
      color: Colors.grey[300],
      shape: BoxShape.circle,
    ),
    width: size,
    height: size,
  ),
  Container(
    decoration: BoxDecoration(
      color: Colors.grey[400],
      shape: BoxShape.circle,
    ),
    width: size,
    height: size,
  ),
];
List<Widget> stackLayers = List<Widget>.generate(containers.length, (index) {
  return Padding(
    padding: EdgeInsets.fromLTRB(0, 0, index * overlap, 0),
    child: containers[index],
  );
});
return Stack(alignment: AlignmentDirectional.topEnd, children: stackLayers);
1

You can just use Padding in Stack, If you want to previous avatar to overlap next avatar, you can do like this

Stack(
    children: [
        Padding(
            padding: const EdgeInsets.only(left: 40),
            child: Image.asset('assets/icons/avatar3.png'),
        ),
        Padding(
            padding: const EdgeInsets.only(left: 20),
            child: Image.asset('assets/icons/avatar2.png'),
        ),
        Padding(
            padding: const EdgeInsets.only(left: 0),
            child: Image.asset('assets/icons/avatar1.png'),
        ),
    ],
)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.