Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Expand widgets inside the Stack widget

Tags:

flutter

I have a stack widgets with two widgets inside. One of them draws the background, the other one draws on top of that. I want both widgets to have the same size.

I want the top widget, which is a column, to expand and fill the stack vertically to the size that is set by the background widget. I tried setting the MainAxis mainAxisSize: MainAxisSize.max but it didn't work.

How can I make it work?

like image 380
Arash Avatar asked Feb 23 '19 03:02

Arash


People also ask

How do I expand widgets in stack Flutter?

In the Stack widget, the fit property is set to StackFit. expand which will force all its children widgets to take maximum space available to them. The clip property is set to antiAliasWithSaveLayer, which avoid any bleeding edges. And the overflow is set to visible, to make the overflowing parts visible.

What is stack widget?

iOS 14 brought new types of widgets to the iPhone Home screen, including something called “Smart Stack.” This feature allows you to cycle through the widgets chosen by the system, but that's not all—you can also create and customize your own widget stack.

What is the difference between expanded and flexible widgets?

Flexible is a built-in widget in flutter which controls how a child of base flex widgets that are Row, Column, and Flex will fill the space available to it. The Expanded widget in flutter is shorthand of Flexible with the default fit of FlexFit.


1 Answers

Use Positioned.fill

    Stack(       children: [         Positioned.fill(           child: Column(             children: [               //...             ],           ),         ),         //...       ],     );  

More info about Positioned in Flutter Widget of the Week

How does it work?

This is all about constraints. Constraints are min/max width/height values that are passed from the parent to its children. In the case of Stack. The constraints it passes to its children state that they can size themselves as small as they want, which in the case of some widgets means they will be their "natural" size. After being sized, Stack will place its children in the top left corner.
Positioned.fill gets the same constraints from Stack but passes different constraints to its child, stating the it (the child) must be of exact size (which meant to fill the Stack).

Positioned.fill() is the same as:

Positioned(   top: 0,   right: 0,   left: 0,   bottom:0,   child: //... ) 

For even more examples and info: How to fill a Stack widget and why? and Understanding constraints.

like image 96
Alex.F Avatar answered Sep 24 '22 10:09

Alex.F