It’s human nature to relate things when we embark on a journey to learn something new. We all do it by taking the reference of our knowledge to easily understand the new concepts of the entire new world. If you are an Android developer and trying to shift to the Flutter world (btw it’s a good choice), then trying to find the equivalent of wrap_content and match_parent is no different thing. So in this tutorial, we’ll learn how you can implement the wrap_content and match_parent for the Container in Flutter.
Here’s what we’ll cover:
- How Layout Works in Flutter
- An Equivalent of Wrap_content and Match_parent for the Container in Flutter
How Layout Works in Flutter
In Flutter, the widget provides the Constraints to its children (i.e minimum width, maximum width, minimum height, and maximum height). Using these constraints the child widget determines its own dimension and gives its final size back to the parent. Then a parent can determine its own size and pass it further in the upward direction in the widget tree.
In short:
A parent doesn’t have a size until the child has a size — Ian Hickson
It’s better to memorize the following rule in Flutter:
Constraints go down. Sizes go up. Parent sets position — Marcelo
Learn more about how the layout works in Flutter here.
Although it may take some time for you to understand the layout rule, things will become more clear as you spend more time developing the UI in Flutter.
An Equivalent of Wrap_content and Match_parent for the Container in Flutter
To implement the equivalent of wrap_content and match_parent for the container in Flutter, we can wrap the Container inside the Column or Row (to mimic the behavior of vertical LinearLayout and horizontal LinearLayout). Because most of the time you would be showing widgets sequentially either in a vertical or horizontal fashion. Then you can adjust your widget to have the equivalent version of wrap_content and match_parent.
For Vertical LinearLayout
Let’s try implementing the vertical LinearLayout by wrapping the widget inside the Column widget.
The idea is to use the Expanded widget and double.infinity to implement the equivalent version of wrap_content and match_parent.
width: wrap_content, height: wrap_content
Container(
color: Colors.red,
child: const Text(
'Flutter',
style: TextStyle(fontSize: 45),
),
),width: match_parent, height: wrap_content
Container(
width: double.infinity, // < -- SEE HERE
color: Colors.orange,
child: const Text(
'Flutter',
style: TextStyle(fontSize: 45),
),
),width: wrap_content, height: match_parent
Expanded( // < -- SEE HERE
child: Container(
color: Colors.purpleAccent,
child: const Text(
'Flutter',
style: TextStyle(fontSize: 45),
),
),
),width: match_parent, height: match_parent
Expanded( // < -- SEE HERE
child: Container(
width: double.infinity, // < -- SEE HERE
color: Colors.lightBlueAccent,
child: const Text(
'Flutter',
style: TextStyle(fontSize: 45),
),
),
),Output:
For Horizontal LinearLayout
Similarly, you can apply the same principle after wrapping your widget inside the Row widget.
Conclusion
In this tutorial, we learned how to implement the wrap_content and match_parent for the Container in Flutter with practical examples. We also learned about how the Layout system works in Flutter and saw the Layout Rule to be memorized.
Would you like to check other interesting Flutter tutorials?
