Flutter Layout
Cheat Sheet
[Link]
Version 1.0
© 2018 Andrea Bizzotto
Introduction
Almost everything in Flutter is a widget.
So any layout that you build in your app is expressed
as a combination of widgets.
The official Flutter docs already offer a complete list
of layout widgets that you can use to arrange your
content.
This document is intended as a quick reference about
how to use the most common layouts.
Further Reading
• Building Layouts in Flutter
• Layout Widgets
Also check out my Flutter Layout Demo on Github.
Two types of widgets
As far as layouts are concerned, there are two types
of widgets:
• single-child widgets (e.g. Container, Expanded)
• multi-child widgets (e.g. Row, Column)
Here we explore a few of these and their properties.
[Link] Page 2 Version 1.0
[Link]
Row(
mainAxisAlignment: _mainAxisAlignment,
mainAxisSize: [Link],
children: [
Icon([Link], size: 50.0),
Icon([Link], size: 50.0),
Icon([Link], size: 50.0),
],
)
[Link]
[Link]
[Link] [Link]
[Link]
[Link]
[Link]
Note: setting [Link] minimises the amount of free space along
the main axis.
[Link]
Row(
mainAxisAlignment: [Link],
crossAxisAlignment: _crossAxisAlignment,
children: [
Icon([Link], size: 50.0),
Icon([Link], size: 100.0),
Icon([Link], size: 50.0),
],
)
[Link] Page 3 Version 1.0
[Link]
[Link]
[Link]
[Link]
(fills all the space in the cross axis)
[Link] Page 4 Version 1.0
[Link]
Columns behave in the same way as rows.
Main Axis: Vertical. Cross Axis: Horizontal.
Column(
mainAxisAlignment: _mainAxisAlignment,
mainAxisSize: [Link],
children: [
Icon([Link], size: 50.0),
Icon([Link], size: 50.0),
Icon([Link], size: 50.0),
],
)
start
center
end
space
space
space
Between
Around
Evenly
[Link] Page 5 Version 1.0
[Link]
Column(
mainAxisAlignment: [Link],
crossAxisAlignment: _crossAxisAlignment,
children: [
Icon([Link], size: 50.0),
Icon([Link], size: 100.0),
Icon([Link], size: 50.0),
],
)
CrossAxisAlignment.
CrossAxisAlignment.
CrossAxisAlignment.
start
center
end
[Link]
[Link] Page 6 Version 1.0
Stack
A stack positions its children relative to the edges of
its box.
[Link]
Stack(
alignment: _alignmentDirectional,
children:[
SizedBox(
width: 300.0,
height: 300.0,
child: Container(color: [Link]),
),
SizedBox(
width: 200.0,
height: 200.0,
child: Container(color: [Link]),
),
SizedBox(
width: 100.0,
height: 100.0,
child: Container(color: [Link]),
),
],
)
topStart topCenter topEnd
[Link] Page 7 Version 1.0
centerStart
center
centerEnd
bottomStart
bottomCenter bottomEnd
[Link] Page 8 Version 1.0
Positioned
Stack(
children: [
SizedBox(
width: 300.0,
height: 300.0,
child: Container(color: [Link]),
),
Positioned(
left: 20.0,
top: 20.0,
width: 100.0,
height: 100.0,
child: Container(color: [Link]),
),
Positioned(
bottom: 20.0,
right: 20.0,
width: 100.0,
height: 100.0,
child: Container(color: [Link]),
),
],
)
[Link] Page 9 Version 1.0
Expanded
A widget that expands a child of a Row or Column to
fill the available space in the main axis.
Row(
crossAxisAlignment: [Link],
children: [
Expanded(
flex: 1,
child: Container(
color: [Link],
child: Center(child: Text('flex: 1')),
),
),
Expanded(
flex: 2,
child: Container(
color: [Link],
child: Center(child: Text('flex: 2')),
),
),
Expanded(
flex: 3,
child: Container(
color: [Link],
child: Center(child: Text('flex: 3')),
),
),
],
)
[Link] Page 10 Version 1.0
Expanded + Padding + SizedBox
This is how to use padding and a SizedBox to add
space around and between content.
Container(
color: [Link],
padding: [Link](16.0),
child: Row(
children: [
Expanded(
flex: 1,
child: Container(
color: [Link],
child: Center(child: Text('flex: 1')),
),
),
SizedBox(width: 40.0),
Expanded(
flex: 2,
child: Container(
color: [Link],
child: Center(child: Text('flex: 2')),
),
),
],
),
)
[Link] Page 11 Version 1.0
