flutter - correct way to create a box that starts at minHeight, grows to maxHeight
I have a container that I want to start off at a minimum size and grow (if its contents grow while user is adding content) to a maximum size, then stop.
The correct widget for this seems to be ConstrainedBox, like so:
new ConstrainedBox(
constraints: new BoxConstraints(
minHeight: 35.0,
maxHeight: 60.0,
),
child: ...child with growing content (has default height 25.0)...
),
however, this starts the box off at the maxHeight.
I tried to use hasBoundedHeight, but can not seem to construct the correct syntax for it or find an example in documentation.
What is the best way to get the box working as described?
There's no notion of "Starts from max/min size".
The thing is, ContrainedBox
only add constraints to it's child. But in the end, it doesn't pick a size.
If you want your child to hit minSize, then they have to not expend. Which translate into not having a width/height of double.INFINITY
. Fact is that double.INFINITY
is the default value of many widgets, including Container
.
On the other hand, some widgets such as DecoratedBox
have a default size of 0.
Which means that this code :
return new ConstrainedBox(
constraints: new BoxConstraints(
minHeight: 5.0,
minWidth: 5.0,
maxHeight: 30.0,
maxWidth: 30.0,
),
child: new DecoratedBox(
decoration: new BoxDecoration(color: Colors.red),
),
);
Will render a 5.0*5.0 red square.
Below Example will help you to grow Size of the widget as required
Container(
color: Colors.blueAccent,
constraints: BoxConstraints(
minHeight: 100, minWidth: double.infinity, maxHeight: 400),
child: ListView(
shrinkWrap: true,
children: <Widget>[
...List.generate(
10, // Replace this with 1, 2 to see min height works.
(index) => Text(
'Sample Test: ${index}',
style: TextStyle(fontSize: 60, color: Colors.black),
),
),
],
),
),
Output for Min Height for Single Item:
Output for Min Height for 10 Items:
Note: This will show widgets as per mentioned max-height.
Blog: https://medium.com/flutterworld/flutter-how-to-set-the-minimum-height-to-widget-36967b310ffe
You can use deviceWidth and deviceHeight to check for min and max condition. Use the following code to get the deviceWidth and deviceHeight in build method.
double deviceWidth = MediaQuery.of(context).size.width;
double deviceHeight = MediaQuery.of(context).size.height;
In width
and height
property of Container
use deviceWidth
and deviceHeight
to form your condition.
Container(
width: deviceWidth<200?50:deviceWidth*0.5,
height: deviceHeight<500?50:deviceHeight>800?200:deviceHeight*0.2,
child: //child,
)
Note: Only Ternary Operator ?:
works for specifying condition for height and width
ConstrainedBox(
constraints: BoxConstraints(
minWidth: 70,
minHeight: 70,
maxWidth: 150,
maxHeight: 150,
),
child: Container(color: Colors.red, width: 10, height: 10),
)
You might guess that the Container
has to be between 70 and 150 pixels, but you would be wrong. The ConstrainedBox
only imposes additional constraints from those it receives from its parent.
Here, the screen forces the ConstrainedBox
to be exactly the same size as the screen, so it tells its child Container
to also assume the size of the screen, thus ignoring its constraints
parameter.