Denis Ken
Denis Ken

Reputation: 244

Flutter: How to overflow a button inside of a box?

I'm trying to reproduce this layout button enter image description here

I created a Stack with a Container and a Positioned button, but I can't set the button out of the box.

                  Stack(children: <Widget>[
                    Container(
                      decoration: new BoxDecoration(
                        shape: BoxShape.rectangle,
                        border: new Border.all(
                        color: Colors.black,
                        width: 1 
                        )
                      ),
                      child: Text("League of legends")
                    ),
                    Positioned(
                      right: 0,
                      bottom: 0,
                      child: Container(
                        width: 9,
                        height: 9,
                        child: new Container(
                          width: 9,
                          height: 9,
                          decoration: new BoxDecoration(
                            color: Colors.white,
                            shape: BoxShape.circle,
                          ),
                        ),
                      )
                    )
                  ])

I tried add Padding but without success.

The result of my code is this: enter image description here

Upvotes: 1

Views: 1814

Answers (1)

kaboc
kaboc

Reputation: 844

The constructor of Stack has the overflow argument, which enables you to choose whether to paint its children outside of its boundary.

By passing in Overflow.visible to overflow and setting negative values in right and bottom in Positioned(), you can make the circle stick out of the box.

Stack(
  overflow: Overflow.visible,
  children: <Widget>[
    Container(
      decoration: ...,
      child: ...,
    ),
    Positioned(
      right: -4,
      bottom: -4,
      child: Container(
        width: 9,
        height: 9,
        decoration: new BoxDecoration(
          color: Colors.white,
          shape: BoxShape.circle,
        ),
      ),
    )
  ],
)

I've reduced redundantly nested Containers into one.

Upvotes: 1

Related Questions