Reputation: 244
I'm trying to reproduce this layout button
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:
Upvotes: 1
Views: 1814
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