I was trying to achieve an effect of allowing a widget to overflow to another widget
as seen here
The code I've this far is this:
@override
Widget build(BuildContext context) {
Size screenSize = MediaQuery.of(context).size;
return new Column(children: <Widget>[
new Container(
color: Colors.blue,
height: screenSize.height / 2,
width: screenSize.width,
child: new Center(
child: new Container(
margin: const EdgeInsets.only(top: 320.0),
color: Colors.red,
height: 40.0,
width: 40.0,
),
))
]);
}
This resulted in the following, the square is cut off by the container.
Is there another approach to this?
In Flutter, the overlay lets you print visual elements on top of other widgets by inserting them into the overlay's stack. You insert a widget into the overlay using an OverlayEntry and you use Positioned and AnimatedPositioned to choose where the entry is positioned within the overlay.
TextOverFlow Parameters Ellipsis: Use an Ellipsis (. . .) to indicate that text is overflow. Code: Text( 'Wanted Text', overflow: TextOverflow. ellipsis, ), Fade: Overflowed Text show as Transparent.
Generally speaking you should never overflow in flutter.
If you want a specific layout, you'll need to explicitly separate the "overflowing" widget on a different layer.
One solution for that is Stack
widget, which allow widgets to be above each others.
In the end to achieve this :
the flutter code would be
new Stack(
fit: StackFit.expand,
children: <Widget>[
new Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Expanded(
child: new Container(
color: Colors.blue,
),
),
new Expanded(
child: new Container(
color: Colors.white,
),
),
],
),
new Center(
child: new Container(
color: Colors.red,
height: 40.0,
width: 40.0,
),
)
],
);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With