Understanding Constraints - Flutter

Get started with Flutter 2.2.
See
What's new in docs, including a list of the new instructor-led video workshops!
Get started keyboard_arrow_down

Understanding constraints

Samples & tutorials keyboard_arrow_down

keyboard_arrow_down Docs chevron_right Development chevron_right UI chevron_right Layout chevron_right Understanding constraints
Development
arrow_drop_downUser interface
Introduction to widgets
arrow_drop_downBuilding layouts
Layouts in Flutter
Tutorial
Creating adaptive and responsive

apps
Building adaptive apps [NEW]
Box constraints
Adding interactivity
Assets and images

arrow_drop_down arrow_drop_down arrow_drop_down
Navigation & routing
Animations
Advanced UI
Widget catalog
arrow_drop_down arrow_drop_down arrow_drop_down arrow_drop_down arrow_drop_down arrow_drop_down arrow_drop_down
Data & backend
Accessibility & internationalization
Platform integration
Packages & plugins
Add Flutter to existing app
Tools & features
Migration notes
When someone learning Flutter asks you why some widget
with width:100 isn’t 100 pixels wide,
the default answer is to tell them
put that widget
inside of a Center, right?
Testing & debugging keyboard_arrow_down
Don’t do that.
Performance & optimization keyboard_arrow_down
If you do, they’ll come back again and again,
asking why some FittedBox isn’t working,
why that Column is overflowing, or what
Deployment keyboard_arrow_down IntrinsicWidth is supposed to be doing.
Instead, first tell them that Flutter layout is very different

from HTML layout (which is probably where they’re coming from),
and th
Resources keyboard_arrow_down make them memorize the following rule:
keyboard_arrow_down
Reference
Constraints go down. Sizes go up. Parent sets position.
Who is Dash?
Flutter layout can’t really be understood without knowing
this rule, so Flutter developers should learn it early on.
Widget index
In more detail:
API reference

flutter CLI reference A widget gets its own constraints from its parent.
A constraint is just a set of 4 doubles:
a minimum and maximum width, a
Package site

minimum and maximum height.
Then the widget goes through its own list of children.
One by one, the widget tells its children what their
constraints are (wh
can be different for each child),
and then asks each child what size it wants to be.
Then, the widget positions its children
(horizontally in the x axis, and vertically in the y axis),
one by one.
And, finally, the widget tells its parent about its own size
(within the original constraints, of course).
For example, if a composed widget contains a column

with some padding, and wants to lay out its two children
as follows:
The negotiation goes something like this:
Widget: “Hey parent, what are my constraints?”
Parent: “You must be from 80 to 300 pixels wide,

and 30 to 85 tall.”
Get started keyboard_arrow_down Widget: “Hmmm, since I want to have 5 pixels of padding,
then my children can have at most 290 pixels of width
and 75 pixels of
height.”
keyboard_arrow_down Widget: “Hey first child, You must be from 0 to 290
pixels wide, and 0 to 75 tall.”
Development
First child: “OK, then I wish to be 290 pixels wide,
and 20 pixels tall.”
arrow_drop_down User interface
Introduction to widgets Widget: “Hmmm, since I want to put my second child below the
first one, this leaves only 55 pixels of height for
my second child.”
arrow_drop_downBuilding layouts Widget: “Hey second child, You must be from 0 to 290 wide,
and 0 to 55 tall.”
Layouts in Flutter
Second child: “OK, I wish to be 140 pixels wide,
and 30 pixels tall.”
Tutorial
Creating adaptive and responsive Widget: “Very well. My first child has position x: 5 and y: 5,
and my second child has x: 80 and y: 25.”
apps
Widget: “Hey parent, I’ve decided that my size is going to be 300
pixels wide, and 60 pixels tall.”
Limitations
Box constraints
Assets and images

As a result of the layout rule mentioned above,
Flutter’s layout engine has a few important limitations:
Animations
A widget can decide its own size only within the
constraints given to it by its parent.
This means a widget usually can’t have
Advanced UI size it wants.
Widget catalog
A widget can’t know and doesn’t decide its own position
in the screen, since it’s the widget’s parent who decides
the positio
Data & backend

the widget.
Since the parent’s size and position, in its turn,
also depends on its own parent, it’s impossible to
precisely define the size an
position of any widget
without taking into consideration the tree as a whole.
Packages & plugins
Add Flutter to existing app If a child wants a different size from its parent and the parent doesn’t have enough information to align it,
then the child’s siz
might be ignored.
Be specific when defining alignment.
Tools & features
Migration notes
Testing & debugging keyboard_arrow_down Examples

For an interactive experience, use the following DartPad.
Use the numbered horizontal scrolling bar to switch between
29 differen
Deployment keyboard_arrow_down examples.
Resources keyboard_arrow_down Dar t Install SDK Format Reset play_arrow Run

keyboard_arrow_down UI Output
Reference
1123
Who is Dash? file_copy other
'Instead, it defines the Expanded width according to the
Widget index

API reference 1

flutter CLI reference import 'package:flutter/material.dart';

Package site

void main() => runApp(const HomePage());
const red = Colors.red;
const green = Colors.green;
7
Console expand_less Null safety no issue
If you prefer, you can grab the code from

this GitHub repo.
The examples are explained in the following sections.
Example 1
keyboard_arrow_down
Development
Introduction to widgets Container(color: red)
Layouts in Flutter The screen is the parent of the Container, and it
forces the Container to be exactly the same size as the screen.
Tutorial
So the Container fills the screen and paints it red.
apps
Building adaptive apps [NEW] Example 2

Box constraints
Assets and images

Animations
Advanced UI
Widget catalog
Data & backend
Container(width: 100, height: 100, color: red)
Packages & plugins

The red Container wants to be 100 × 100,
but it can’t, because the screen forces it to be
exactly the same size as the screen.
Tools & features So the Container fills the screen.
Migration notes
Testing & debugging keyboard_arrow_down Example 3

Deployment keyboard_arrow_down
Resources keyboard_arrow_down
keyboard_arrow_down
Reference
Who is Dash?
Widget index
API reference

flutter CLI reference

Center(
child: Container(width: 100, height: 100, color: red),
Package site

The screen forces the Center to be exactly the same size

as the screen, so the Center fills the screen.
The Center tells the Container that it can be any size it

wants, but not bigger than the screen. Now the Container
can indeed be 1
100.
Example 4
Align(
alignment: Alignment.bottomRight,
child: Container(width: 100, height: 100, color: red),
)
This is different from the previous example in that it uses
Align instead of Center.
Samples & tutorials keyboard_arrow_down Align also tells the Container that it can be any size it
wants, but if there is empty space it won’t center the Container.
Instead, it
keyboard_arrow_down aligns the container to the bottom-right of the
available space.
Development
arrow_drop_downUser interface Example 5

Layouts in Flutter
Tutorial

apps
Box constraints
Assets and images

Center(

child: Container(
Animations width: double.infinity, height: double.infinity, color: red),
Advanced UI )
Widget catalog
The screen forces the Center to be exactly the
same size as the screen, so the Center fills the screen.
Data & backend
Accessibility & internationalization The Center tells the Container that it can be any size it wants,
but not bigger than the screen. The Container wants to be
of infinit
Platform integration size, but since it can’t be bigger than the screen,
it just fills the screen.
Packages & plugins
Add Flutter to existing app Example 6

Tools & features
Migration notes

keyboard_arrow_down
Reference
Who is Dash?
Center(
child: Container(color: red),
Widget index )
API reference

flutter CLI reference The screen forces the Center to be exactly the
same size as the screen, so the Center fills the screen.
Package site

The Center tells the Container that it can be any

size it wants, but not bigger than the screen.
Since the Container has no child an
no fixed size,
it decides it wants to be as big as possible,
so it fills the whole screen.
But why does the Container decide that?

Simply because that’s a design decision by those who
created the Container widget. It
could have been
created differently, and you have to read the
Container documentation to understand how it
behaves, depending
the circumstances.
Example 7
Center(
child: Container(
color: red,
child: Container(color: green, width: 30, height: 30),
),
Get started keyboard_arrow_down )
Samples & tutorials keyboard_arrow_down The screen forces the Center to be exactly the same
size as the screen, so the Center fills the screen.
keyboard_arrow_down
Development The Center tells the red Container that it can be any size
it wants, but not bigger than the screen. Since the red
Container has no
but has a child,
it decides it wants to be the same size as its child.
Introduction to widgets The red Container tells its child that it can be any size
it wants, but not bigger than the screen.
arrow_drop_downBuilding layouts The child is a green Container that wants to

be 30 × 30. Given that the red Container sizes itself to
the size of its child, it is also 3
Layouts in Flutter
30.
The red color isn’t visible because the green Container
entirely covers the red Container.
Tutorial

apps Example 8
Box constraints
Assets and images

Animations
Advanced UI
Widget catalog
Data & backend

Center(
child: Container(
Platform integration padding: const EdgeInsets.all(20.0),
Packages & plugins color: red,
child: Container(color: green, width: 30, height: 30),
),
Tools & features )
Migration notes
The red Container sizes itself to its children’s size,
but it takes its own padding into consideration.
So it is also 30 × 30 plus paddi
Testing & debugging keyboard_arrow_down The red color is visible because of the padding,
and the green Container has the same size as
in the previous example.

Example 9
keyboard_arrow_down
Reference
Who is Dash?
Widget index
API reference

Package site

ConstrainedBox(
constraints: const BoxConstraints(
minWidth: 70,
minHeight: 70,
maxWidth: 150,
maxHeight: 150,
),
child: Container(color: 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 impo
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 assum
the size of the screen, thus ignoring its
constraints parameter.
Example 10
keyboard_arrow_down
Development
Introduction to widgets Center(
child: ConstrainedBox(
arrow_drop_downBuilding layouts constraints: const BoxConstraints(
Layouts in Flutter minWidth: 70,
Tutorial minHeight: 70,
maxWidth: 150,
maxHeight: 150,
apps
),
Building adaptive apps [NEW] child: Container(color: red, width: 10, height: 10),
Understanding constraints ),
)
Box constraints
Now, Center allows ConstrainedBox to be any size up to
the screen size. The ConstrainedBox imposes additional
constraints from
Assets and images constraints parameter onto its child.

The Container must be between 70 and 150 pixels.
It wants to have 10 pixels,
so it ends up having 70 (the minimum).
Animations
Advanced UI
Widget catalog Example 11

Data & backend
Packages & plugins
Tools & features
Migration notes

Center(
Deployment keyboard_arrow_down constraints: const BoxConstraints(
minWidth: 70,
Resources keyboard_arrow_down minHeight: 70,
keyboard_arrow_down maxWidth: 150,
Reference maxHeight: 150,
),
Who is Dash? child: Container(color: red, width: 1000, height: 1000),
Widget index ),
)
API reference


Center allows ConstrainedBox to be any size up to the
screen size. The ConstrainedBox imposes additional
constraints from its
Package site

constraints parameter onto its child.

It wants to have 1000 pixels,
so it ends up having 150 (the maximum).
Example 12
Center(
constraints: const BoxConstraints(
minWidth: 70,
minHeight: 70,
Get started keyboard_arrow_down maxWidth: 150,
maxHeight: 150,
Samples & tutorials keyboard_arrow_down ),
keyboard_arrow_down child: Container(color: red, width: 100, height: 100),
Development ),
)
Introduction to widgets Center allows ConstrainedBox to be any size up to the
screen size. The ConstrainedBox imposes additional
constraints from its
constraints parameter onto its child.
Layouts in Flutter
It wants to have 100 pixels, and that’s the size it has,
since that’s between 70
Tutorial 150.
apps
Building adaptive apps [NEW] Example 13

Box constraints
Assets and images

Animations
Advanced UI
Widget catalog
Data & backend

UnconstrainedBox(
Packages & plugins )
Tools & features The screen forces the UnconstrainedBox to be exactly

the same size as the screen. However, the UnconstrainedBox
lets its child
Container be any size it wants.
Migration notes
Testing & debugging keyboard_arrow_down Example 14

keyboard_arrow_down
Reference
Who is Dash?
Widget index
API reference


UnconstrainedBox(
Package site


)
The screen forces the UnconstrainedBox to be exactly

the same size as the screen, and UnconstrainedBox
lets its child Container
any size it wants.
Unfortunately, in this case the Container is

4000 pixels wide and is too big to fit in
the UnconstrainedBox, so the UnconstrainedBo
displays
the much dreaded “overflow warning”.
Example 15
OverflowBox(
minWidth: 0.0,
minHeight: 0.0,
maxWidth: double.infinity,
maxHeight: double.infinity,
Get started keyboard_arrow_down child: Container(color: red, width: 4000, height: 50),
)
keyboard_arrow_down The screen forces the OverflowBox to be exactly the same
size as the screen, and OverflowBox lets its child Container
be any size
Development
wants.
arrow_drop_downUser interface OverflowBox is similar to UnconstrainedBox;

the difference is that it won’t display any warnings
if the child doesn’t fit the space.
In this case, the Container has 4000 pixels of width,
and is too big to fit in the OverflowBox,
but the OverflowBox simply shows as
arrow_drop_downBuilding layouts much as it can,
with no warnings given.
Layouts in Flutter
Tutorial
Creating adaptive and responsive Example 16

apps
Box constraints
Assets and images

Animations
Advanced UI
Widget catalog
Data & backend UnconstrainedBox(

Accessibility & internationalization child: Container(color: Colors.red, width: double.infinity, height: 100),
)
Packages & plugins

This won’t render anything, and you’ll see an error in the console.
The UnconstrainedBox lets its child be any size it wants,
however its child is a Container with infinite size.
Tools & features
Migration notes Flutter can’t render infinite sizes, so it throws an error with
the following message: BoxConstraints forces an infinite width.

Example 17
keyboard_arrow_down
Reference
Who is Dash?
Widget index
API reference

Package site

UnconstrainedBox(
child: LimitedBox(
maxWidth: 100,
child: Container(
color: Colors.red,
width: double.infinity,
height: 100,
),
),
)
Here you won’t get an error anymore,

because when the LimitedBox is given an
infinite size by the UnconstrainedBox;
it passes a
maximum width of 100 down to its child.
If you swap the UnconstrainedBox for a Center widget,

the LimitedBox won’t apply its limit anymore
(since its limit is only applied
when it gets infinite
constraints), and the width of the Container
is allowed to grow past 100.
This explains the difference between a LimitedBox

and a ConstrainedBox.
Example 18
keyboard_arrow_down
Development
Introduction to widgets const FittedBox(
child: Text('Some Example Text.'),
arrow_drop_downBuilding layouts )
Layouts in Flutter
Tutorial The screen forces the FittedBox to be exactly the same

size as the screen. The Text has some natural width
(also called its intrin
Creating adaptive and responsive width) that depends on the
amount of text, its font size, and so on.
apps
The FittedBox lets the Text be any size it wants,
but after the Text tells its size to the FittedBox,
the FittedBox scales the Text un
fills all of
the available width.
Box constraints
Adding interactivity Example 19

Assets and images
Animations
Advanced UI
Widget catalog
Data & backend
Packages & plugins

const Center(
Tools & features
child: FittedBox(
Migration notes child: Text('Some Example Text.'),
),
Testing & debugging keyboard_arrow_down )
Performance & optimization keyboard_arrow_down But what happens if you put the FittedBox inside of a
Center widget? The Center lets the FittedBox
be any size it wants, up to the
screen size.
The FittedBox then sizes itself to the Text,
and lets the Text be any size it wants.
Since both FittedBox and the Text have the sam
Resources keyboard_arrow_down size,
no scaling happens.
keyboard_arrow_down
Reference
Who is Dash?
Example 20
Widget index
API reference

Package site

const Center(
child: FittedBox(
child: Text(
'This is some very very very large text that is too big to fit a regular screen in a single line.'),
),
)
However, what happens if FittedBox is inside of a Center

widget, but the Text is too large to fit the screen?
FittedBox tries to size itself to the Text,

but it can’t be bigger than the screen.
It then assumes the screen size,
and resizes Text s
that it fits the screen, too.
Example 21
keyboard_arrow_down
Development
Introduction to widgets const Center(
child: Text(
arrow_drop_downBuilding layouts 'This is some very very very large text that is too big to fit a regular screen in a single line.'),
Layouts in Flutter )
Tutorial
Creating adaptive and responsive If, however, you remove the FittedBox, the Text
gets its maximum width from the screen,
and breaks the line so that it fits the scr
apps
Example 22
Box constraints
Assets and images

Animations
Advanced UI
Widget catalog
Data & backend
FittedBox(
Packages & plugins child: Container(
height: 20.0,
width: double.infinity,
Tools & features color: Colors.red,
Migration notes ),
)
FittedBox can only scale a widget that is bounded
(has non-infinite width and height). Otherwise,
it won’t render anything,
and you
Performance & optimization keyboard_arrow_down see an error in the console.
Example 23
keyboard_arrow_down
Reference
Who is Dash?
Widget index
API reference

Package site

Row(
children: [
Container(color: red, child: const Text('Hello!', style: big)),
Container(color: green, child: const Text('Goodbye!', style: big)),
],
)
The screen forces the Row to be exactly the same size

as the screen.
Just like an UnconstrainedBox, the Row won’t

impose any constraints onto its children,
and instead lets them be any size they wan
The Row then puts them side-by-side,
and any extra space remains empty.
Example 24
keyboard_arrow_down
Development
Introduction to widgets Row(
children: [
arrow_drop_downBuilding layouts Container(
Layouts in Flutter color: red,
Tutorial child: const Text(
'This is a very long text that '
'won\'t fit the line.',
apps
style: big,
Building adaptive apps [NEW] ),
Box constraints ],
Adding interactivity )
Assets and images
Since Row won’t impose any constraints onto its children,
it’s quite possible that the children might too big to fit
the available width

the Row. In this case, just like an
UnconstrainedBox, the Row displays the “overflow warning”.
Animations
Advanced UI
Widget catalog Example 25

Data & backend
Packages & plugins
Tools & features
Migration notes

Performance & optimization keyboard_arrow_down Row(
children: [
Deployment keyboard_arrow_down Expanded(
child: Center(
Resources keyboard_arrow_down child: Container(
keyboard_arrow_down color: red,
Reference child: const Text(
'This is a very long text that won\'t fit the line.',
Who is Dash? style: big,
Widget index ),
),
API reference

),
flutter CLI reference ),
Package site

],
)
When a Row’s child is wrapped in an Expanded widget,

the Row won’t let this child define its own width anymore.
Instead, it defines the Expanded width according to the

other children, and only then the Expanded widget forces
the original child t
have the Expanded’s width.
In other words, once you use Expanded,

the original child’s width becomes irrelevant, and is ignored.
Example 26
Row(
children: [
Expanded(
child: Container(
color: red,
Get started keyboard_arrow_down child: const Text(
Samples & tutorials keyboard_arrow_down style: big,
keyboard_arrow_down ),
Development ),
),
arrow_drop_downUser interface Expanded(
Introduction to widgets child: Container(
color: green,
arrow_drop_downBuilding layouts child: const Text(
Layouts in Flutter 'Goodbye!',
Tutorial
style: big,
),
Creating adaptive and responsive ),
apps ),
Building adaptive apps [NEW] ],
)
Box constraints
If all of Row’s children are wrapped in Expanded widgets,
each Expanded has a size proportional to its flex parameter,
and only then
Adding interactivity each Expanded widget forces its child to have
the Expanded’s width.
Assets and images
In other words, Expanded ignores the preferred width of
its children.
Animations
Advanced UI Example 27
Widget catalog
Data & backend
Packages & plugins
Tools & features
Migration notes

Row(
Performance & optimization keyboard_arrow_down children: [
Flexible(
Deployment keyboard_arrow_down child: Container(
color: red,
Resources keyboard_arrow_down child: const Text(
keyboard_arrow_down style: big,
Reference
),
Who is Dash? ),
),
Widget index
Flexible(
API reference

child: Container(
flutter CLI reference color: green,
child: const Text(
Package site

'Goodbye!',
style: big,
),
),
),
],
)
The only difference if you use Flexible instead of Expanded,

is that Flexible lets its child have the same or smaller
width than the
Flexible itself, while Expanded forces
its child to have the exact same width of the Expanded.
But both Expanded and Flexible igno
their children’s width
when sizing themselves.
 Note:
This means that it’s impossible to expand Row children
proportionally to their sizes. The Row either uses
the exact
child’s width, or ignores it completely
when you use Expanded or Flexible.
Example 28
keyboard_arrow_down
Development
Introduction to widgets Scaffold(
body: Container(
arrow_drop_downBuilding layouts color: blue,
Layouts in Flutter
child: Column(
Tutorial children: const [
Creating adaptive and responsive Text('Hello!'),
apps Text('Goodbye!'),
],
Building adaptive apps [NEW] ),
)
Box constraints
The screen forces the Scaffold to be exactly the same size
as the screen, so the Scaffold fills the screen.
The Scaffold tells the
Assets and images
Container that it can be any size it wants,
but not bigger than the screen.
Animations
 Note:
When a widget tells its child that it can be smaller than a
certain size, we say the widget supplies loose constraints
to
Advanced UI
its child. More on that later.
Widget catalog
Data & backend
Example 29
Packages & plugins
Tools & features
Migration notes

Resources keyboard_arrow_down Scaffold(
keyboard_arrow_down body: SizedBox.expand(
Reference child: Container(
color: blue,
Who is Dash? child: Column(
Widget index children: const [
Text('Hello!'),
API reference

Text('Goodbye!'),
flutter CLI reference ],
),
Package site

),
),
)
If you want the Scaffold’s child to be exactly the same size

as the Scaffold itself, you can wrap its child with
SizedBox.expand.
 Note:
When a widget tells its child that it must be of
a certain size, we say the widget supplies tight
constraints to its child.
Tight vs. loose constraints

It’s very common to hear that some constraint is
“tight” or “loose”, so it’s worth knowing what that means.
A tight constraint offers a single possibility,

an exact size. In other words, a tight constraint
has its maximum width equal to its
minimum width;
and has its maximum height equal to its minimum height.
If you go to Flutter’s box.dart file and search for

the BoxConstraints constructors, you’ll find the
following:
BoxConstraints.tight(Size size)
: minWidth = size.width,
maxWidth = size.width,
minHeight = size.height,
maxHeight = size.height;
If you revisit Example 2 above,
it tells us that the screen forces the red
Container to be exactly the same size as the screen.
The
Samples & tutorials keyboard_arrow_down screen does that, of course, by passing tight
constraints to the Container.
keyboard_arrow_down
Development
A loose constraint, on the other hand,
sets the maximum width and height, but lets the widget
be as small as it wants. In other wo
a loose constraint has a minimum width and height
both equal to zero:
BoxConstraints.loose(Size size)
arrow_drop_downBuilding layouts : minWidth = 0.0,
Layouts in Flutter maxWidth = size.width,
Tutorial minHeight = 0.0,
maxHeight = size.height;
apps
If you revisit Example 3, it tells us that the
Center lets the red Container be smaller,
but not bigger than the screen. The Center do
that,
of course, by passing loose constraints to the Container.
Ultimately, the Center’s very purpose is to transform
the tight
constraints it got from its parent
(the screen) to loose constraints for its child
(the Container).
Box constraints
Assets and images

Learning the layout rules for specific widgets
Animations
Knowing the general layout rule is necessary, but it’s not enough.
Advanced UI
Widget catalog Each widget has a lot of freedom when applying the general rule,
so there is no way of knowing what it will do by just reading
the
widget’s name.
Data & backend
Accessibility & internationalization If you try to guess, you’ll probably guess wrong.
You can’t know exactly how a widget behaves unless
you’ve read its documentati
Platform integration or studied its source-code.
Packages & plugins
The layout source-code is usually complex,
so it’s probably better to just read the documentation.
However, if you decide to study
Add Flutter to existing app layout source-code,
you can easily find it by using the navigating capabilities
of your IDE.
Tools & features
Here is an example:
Migration notes
Find a Column in your code and navigate to its
source code. To do this, use command+B (macOS)
or control+B (Windows/Linu
Testing & debugging keyboard_arrow_down Android Studio or IntelliJ.
You’ll be taken to the basic.dart file.
Since Column extends Flex, navigate to the Flex
source code
(also in basic.dart).
Scroll down until you find a method called
createRenderObject(). As you can see,
this method returns a RenderFlex.
This is
Deployment keyboard_arrow_down render-object for the Column.
Now navigate to the source-code of RenderFlex,
which takes you to the flex.dart file.
Scroll down until you find a method called

performLayout(). This is the method that does
the layout for the Column.
keyboard_arrow_down
Reference
Who is Dash?
Widget index Article by Marcelo Glasberg

API reference

Marcelo originally published this content as

Flutter: The Advanced Layout Rule Even Beginners Must Know
on Medium. We loved
and asked that he allow us to publish
in on flutter.dev, to which he graciously agreed. Thanks, Marcelo!
You can find Marcelo on
Package site

GitHub and pub.dev.
Also, thanks to Simon Lightfoot for creating the

header image at the top of the article.
flutter-dev@ •
terms •
brand usage •
security •
privacy •
español •
社区中文资源 • 한국어 •
We stand in solidarity with the Black community. Black Lives Matter.
Except as otherwise noted,

this work is licensed under a
Creative
Commons Attribution 4.0 International License,
and code samples are licensed under the BSD License.

Understanding Constraints - Flutter

Uploaded by

Understanding Constraints - Flutter

Uploaded by

Get started with Flutter 2.2.

Get started keyboard_arrow_down

Samples & tutorials keyboard_arrow_down

Creating adaptive and responsive

Building adaptive apps [NEW]

Assets and images

Navigation & routing

Data & backend

Accessibility & internationalization

Packages & plugins

Add Flutter to existing app

Tools & features

Instead, first tell them that Flutter layout is very different

For example, if a composed widget contains a column

Widget: “Hey parent, what are my constraints?”

Parent: “You must be from 80 to 300 pixels wide,

Assets and images

Navigation & routing

Data & backend

Testing & debugging keyboard_arrow_down Examples

Resources keyboard_arrow_down Dar t Install SDK Format Reset play_arrow Run

flutter CLI reference import 'package:flutter/material.dart';

void main() => runApp(const HomePage());

const red = Colors.red;

const green = Colors.green;

If you prefer, you can grab the code from

The examples are explained in the following sections.

Building adaptive apps [NEW] Example 2

Assets and images

Navigation & routing

Data & backend

Accessibility & internationalization

Packages & plugins

Tools & features So the Container fills the screen.

Testing & debugging keyboard_arrow_down Example 3

flutter CLI reference

The screen forces the Center to be exactly the same size

The Center tells the Container that it can be any size it

arrow_drop_downUser interface Example 5

Creating adaptive and responsive

Building adaptive apps [NEW]

Assets and images

Navigation & routing

Data & backend

Packages & plugins

Add Flutter to existing app Example 6

Testing & debugging keyboard_arrow_down

The Center tells the Container that it can be any

But why does the Container decide that?

arrow_drop_downBuilding layouts The child is a green Container that wants to

Creating adaptive and responsive

Assets and images

Navigation & routing

Data & backend

Performance & optimization keyboard_arrow_down

flutter CLI reference

You might guess that the Container has to be

Here, the screen forces the ConstrainedBox to be exactly

Navigation & routing

Widget catalog Example 11

Data & backend

Accessibility & internationalization

Packages & plugins

Add Flutter to existing app

Tools & features

Testing & debugging keyboard_arrow_down

flutter CLI reference

constraints parameter onto its child.

The Container must be between 70 and 150 pixels.

Building adaptive apps [NEW] Example 13

Assets and images

Navigation & routing

Data & backend

Accessibility & internationalization

Tools & features The screen forces the UnconstrainedBox to be exactly

Testing & debugging keyboard_arrow_down Example 14