20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Welcome back. You are signed in as maazadrees4@[Link]. Not you?

Flutter Layout Cheat Sheet

Tomek Polański Follow
May 3, 2018 · 13 min read

Do you need simple layout samples for Flutter?

I present you my set of Flutter layout code snippets. I will keep it short, sweet and simple
with loads of visual examples.
Still, it is work in progress — the catalogue of samples will grow. I will focus more on the
usage of Flutter widgets rather than showcasing the components (Flutter Gallery is great
for that!).
If you have an issue with “layouting” your Flutter or you wanna share your snippets with
others, please drop a line!

[Link] 1/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

. . .

In case you are interested in a similar article about Animations, then visit Flutter
Animations Cheat Sheet.

. . .

Table of Contents
Row and Column

IntrinsicWidth and IntrinsicHeight

Stack

Expanded

ConstrainedBox

Container
decoration: BoxDecoration
• image: DecorationImage
• border: Border
• borderRadius: BorderRadius
• shape: BoxShape
• boxShadow: List<BoxShadow>
• gradient: RadialGradient
• backgroundBlendMode: BlendMode

Material
• shape: BeveledRectangleBorder

Slivers
• SliverFillRemaining

SizedBox

SafeArea
[Link] 2/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

. . .

Row and Column

MainAxisAlignment

Row /*or Column*/(

mainAxisAlignment: [Link],
children: <Widget>[
Icon([Link], size: 50),
Icon([Link], size: 50),
Icon([Link], size: 50),
],
),

[Link] 3/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

. . .

Row /*or Column*/(

mainAxisAlignment: [Link],
children: <Widget>[
Icon([Link], size: 50),
Icon([Link], size: 50),
Icon([Link], size: 50),
],
),

. . .

[Link] 4/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Row /*or Column*/(

mainAxisAlignment: [Link],
children: <Widget>[
Icon([Link], size: 50),
Icon([Link], size: 50),
Icon([Link], size: 50),
],
),

. . .

[Link] 5/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Row /*or Column*/(

mainAxisAlignment: [Link],
children: <Widget>[
Icon([Link], size: 50),
Icon([Link], size: 50),
Icon([Link], size: 50),
],
),

. . .

[Link] 6/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Row /*or Column*/(

mainAxisAlignment: [Link],
children: <Widget>[
Icon([Link], size: 50),
Icon([Link], size: 50),
Icon([Link], size: 50),
],
),

. . .

[Link] 7/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Row /*or Column*/(

mainAxisAlignment: [Link],
children: <Widget>[
Icon([Link], size: 50),
Icon([Link], size: 50),
Icon([Link], size: 50),
],
),

. . .

[Link] 8/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

You should use [Link] if you require for the baseline of different
text be aligned.

Row(
crossAxisAlignment: [Link],
textBaseline: [Link],
children: <Widget>[
Text(
'Baseline',
style: [Link](context).textTheme.display3,
),
Text(
'Baseline',
style: [Link](context).textTheme.body1,
),
],
),

. . .

CrossAxisAlignment

[Link] 9/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Row /*or Column*/(

crossAxisAlignment: [Link],
children: <Widget>[
Icon([Link], size: 50),
Icon([Link], size: 200),
Icon([Link], size: 50),
],
),

. . .

[Link] 10/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Row /*or Column*/(

crossAxisAlignment: [Link],
children: <Widget>[
Icon([Link], size: 50),
Icon([Link], size: 200),
Icon([Link], size: 50),
],
),

. . .

[Link] 11/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Row /*or Column*/(

crossAxisAlignment: [Link],
children: <Widget>[
Icon([Link], size: 50),
Icon([Link], size: 200),
Icon([Link], size: 50),
],
),

. . .

[Link] 12/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Row /*or Column*/(

crossAxisAlignment: [Link],
children: <Widget>[
Icon([Link], size: 50),
Icon([Link], size: 200),
Icon([Link], size: 50),
],
),

. . .

MainAxisSize

[Link] 13/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Row /*or Column*/(

mainAxisSize: [Link],
children: <Widget>[
Icon([Link], size: 50),
Icon([Link], size: 50),
Icon([Link], size: 50),
],
),

. . .

[Link] 14/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Row /*or Column*/(

mainAxisSize: [Link],
children: <Widget>[
Icon([Link], size: 50),
Icon([Link], size: 50),
Icon([Link], size: 50),
],
),

. . .

IntrinsicWidth and IntrinsicHeight

Want all the widgets inside Row or Column to be as tall/wide as the tallest/widest
widget? Search no more!

In case you have this kind of layout:

[Link] 15/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Widget build(BuildContext context) {

return Scaffold(
appBar: AppBar(title: Text('IntrinsicWidth')),
body: Center(
child: Column(
children: <Widget>[
RaisedButton(
onPressed: () {},
child: Text('Short'),
),
RaisedButton(
onPressed: () {},
child: Text('A bit Longer'),
),
RaisedButton(
onPressed: () {},
child: Text('The Longest text button'),
),
],
),
),
);
}

But you would like to have all buttons as wide as the widest, just use IntrinsicWidth :

[Link] 16/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Widget build(BuildContext context) {

return Scaffold(
appBar: AppBar(title: Text('IntrinsicWidth')),
body: Center(
child: IntrinsicWidth(
child: Column(
crossAxisAlignment: [Link],
children: <Widget>[
RaisedButton(
onPressed: () {},
child: Text('Short'),
),
RaisedButton(
onPressed: () {},
child: Text('A bit Longer'),
),
RaisedButton(
onPressed: () {},
child: Text('The Longest text button'),
),
],
),
),
),
);
}

In case you have a similar problem but you would like to have all the widgets as tall as
the tallest just use a combination of IntrinsicHeight and Row widgets.

. . .

Stack
Perfect for overlaying Widgets on top of each other

[Link] 17/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

@override
Widget build(BuildContext context) {
Widget main = Scaffold(
appBar: AppBar(title: Text('Stack')),
);

return Stack(
fit: [Link],
children: <Widget>[
main,
Banner(
message: "Top Start",
location: [Link],
),
Banner(
message: "Top End",
location: [Link],
),
Banner(
message: "Bottom Start",
location: [Link],
),
Banner(
message: "Bottom End",
location: [Link],
),
],
);
}

[Link] 18/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

. . .

With your own Widgets, you need to place them in Positioned Widget

Widget build(BuildContext context) {

return Scaffold(
appBar: AppBar(title: Text('Stack')),
body: Stack(
fit: [Link],
children: <Widget>[
Material(color: [Link]),
Positioned(
top: 0,
left: 0,
child: Icon([Link], size: 50),
),
Positioned(
top: 340,
left: 250,
child: Icon([Link], size: 50),

[Link] 19/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

),
],
),
);
}

. . .

If you don’t want to guess the top/bottom values you can use LayoutBuilder to retrieve
them

Widget build(BuildContext context) {

const iconSize = 50;
return Scaffold(
appBar: AppBar(title: Text('Stack with LayoutBuilder')),
body: LayoutBuilder(
builder: (context, constraints) =>
Stack(
[Link] 20/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

fit: [Link],
children: <Widget>[
Material(color: [Link]),
Positioned(
top: 0,
child: Icon([Link], size: iconSize),
),
Positioned(
top: [Link] - iconSize,
left: [Link] - iconSize,
child: Icon([Link], size: iconSize),
),
],
),
),
);
}

. . .

Expanded
Expanded works with Flex\Flexbox layout and is great for distributing space between
multiple items.

[Link] 21/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Row(
children: <Widget>[
Expanded(
child: Container(
decoration: const BoxDecoration(color: [Link]),
),
flex: 3,
),
Expanded(
child: Container(
decoration: const BoxDecoration(color: [Link]),
),
flex: 2,
),
Expanded(
child: Container(
decoration: const BoxDecoration(color: [Link]),
),
flex: 1,
),
],
),

. . .

ConstrainedBox
By default, most of the widgets will use as little space as possible:

[Link] 22/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Card(child: const Text('Hello World!'), color: [Link])

. . .

ConstrainedBox allows a widget to use the remaining space as desired.

[Link] 23/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

ConstrainedBox(
constraints: [Link](),
child: const Card(
child: const Text('Hello World!'),
color: [Link],
),
),

. . .

Using BoxConstraints you specify how much space a widget can have — you specify
min / max of height / width .

[Link] uses infinite (all the available) amount of space unless specified:

[Link] 24/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

ConstrainedBox(
constraints: [Link](height: 300),
child: const Card(
child: const Text('Hello World!'),
color: [Link],
),
),

And it’s the same as:

ConstrainedBox(
constraints: BoxConstraints(
minWidth: [Link],
maxWidth: [Link],
minHeight: 300,
maxHeight: 300,
),
child: const Card(
child: const Text('Hello World!'),
color: [Link],
),
),

. . .

Container
One of the most used Widgets — and for good reasons:

Container as a layout tool

When you don’t specify the height and the width of the Container , it will match its

child ’s size

[Link] 25/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Widget build(BuildContext context) {

return Scaffold(
appBar: AppBar(title: Text('Container as a layout')),
body: Container(
color: [Link],
child: Text("Hi"),
),
);
}

If you want to stretch the Container to match its parent, use [Link] for the
height and width properties

[Link] 26/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Widget build(BuildContext context) {

return Scaffold(
appBar: AppBar(title: Text('Container as a layout')),
body: Container(
height: [Link],
width: [Link],
color: [Link],
child: Text("Hi"),
),
);
}

Container as decoration
You can use color property to affect Container ’s background but decoration and
foregroundDecoration . (With those two properties, you can completely change how

Containe r looks like but I will be talking about different decorations later as it quite a big

topic)
decoration is always placed behind the child, whereas foregroundDecoration is on top
of the child

[Link] 27/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

decoration

Widget build(BuildContext context) {

return Scaffold(
appBar: AppBar(title: Text('[Link]')),
body: Container(
height: [Link],
width: [Link],
decoration: BoxDecoration(color: [Link]),
child: Text("Hi"),
),
);
}

. . .

[Link] 28/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

decoration and foregroundDecoration

Widget build(BuildContext context) {

return Scaffold(
appBar: AppBar(title: Text('[Link]')),
body: Container(
height: [Link],
width: [Link],
decoration: BoxDecoration(color: [Link]),
foregroundDecoration: BoxDecoration(
color: [Link](0.5),
),
child: Text("Hi"),
),
);
}

Container as Transform
If you don’t want to use Transform widget to change your layout, you can use transform

property straight from the Container

[Link] 29/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Widget build(BuildContext context) {

return Scaffold(
appBar: AppBar(title: Text('[Link]')),
body: Container(
height: 300,
width: 300,
transform: [Link](pi / 4),
decoration: BoxDecoration(color: [Link]),
child: Text(
"Hi",
textAlign: [Link],
),
),
);
}

. . .

BoxDecoration
The decoration is usually used on a Container widget to change how the container looks.

image: DecorationImage
Puts an image as a background:

[Link] 30/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Scaffold(
appBar: AppBar(title: Text('image: DecorationImage')),
body: Center(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
color: [Link],
image: DecorationImage(
fit: [Link],
image: NetworkImage(
'[Link]
[Link]',
),
),
),
),
),
);

border: Border
Specifies how should the border of the Container look like.

[Link] 31/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Scaffold(
appBar: AppBar(title: Text('border: Border')),
body: Center(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
color: [Link],
border: [Link](color: [Link], width: 3),
),
),
),
);

borderRadius: BorderRadius
Enables border corners to be rounded.

borderRadius does not work if the shape of the decoration is [Link]

[Link] 32/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Scaffold(
appBar: AppBar(title: Text('borderRadius: BorderRadius')),
body: Center(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
color: [Link],
border: [Link](color: [Link], width: 3),
borderRadius: [Link]([Link](18)),
),
),
),
);

shape: BoxShape
Box decoration can be either a rectangle/square or an ellipse/circle.

For any other shape, you can use ShapeDecoration instead of BoxDecoration

[Link] 33/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Scaffold(
appBar: AppBar(title: Text('shape: BoxShape')),
body: Center(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
color: [Link],
shape: [Link],
),
),
),
);

boxShadow: List<BoxShadow>
Adds shadow to the Container.

This parameter is a list because you can specify multiple different shadows and merge
them together.

[Link] 34/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Scaffold(
appBar: AppBar(title: Text('boxShadow: List<BoxShadow>')),
body: Center(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
color: [Link],
boxShadow: const [
BoxShadow(blurRadius: 10),
],
),
),
),
);

gradient
There are three types of gradients: LinearGradient , RadialGradient and SweepGradient .

[Link] 35/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

LinearGradient

Scaffold(
appBar: AppBar(title: Text('gradient: LinearGradient')),
body: Center(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: const [
[Link],
[Link],
],
),
),
),
),
);

. . .

[Link] 36/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

RadialGradient

Scaffold(
appBar: AppBar(title: Text('gradient: RadialGradient')),
body: Center(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
gradient: RadialGradient(
colors: const [[Link], [Link]],
stops: const [0.4, 1.0],
),
),
),
),
);

. . .

[Link] 37/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

SweepGradient

Scaffold(
appBar: AppBar(title: Text('gradient: SweepGradient')),
body: Center(
child: Container(
height: 200,
width: 200,
decoration: BoxDecoration(
gradient: SweepGradient(
colors: const [
[Link],
[Link],
[Link],
[Link],
[Link],
],
stops: const [0.0, 0.25, 0.5, 0.75, 1.0],
),
),
),
),
);

backgroundBlendMode
backgroundBlendMode is the most complex property of BoxDecoration .

It’s responsible for mixing together colors/gradients of BoxDecoration and whatever

BoxDecoration is on top of.

[Link] 38/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

With backgroundBlendMode you can use a long list of algorithms specified in BlendMode

enum.

First, let’s set BoxDecoration as foregroundDecoration which is drawn on top of

Container ’s child (whereas decoration is drawn behind the child).

Scaffold(
appBar: AppBar(title: Text('backgroundBlendMode')),
body: Center(
child: Container(
height: 200,
width: 200,
foregroundDecoration: BoxDecoration(
backgroundBlendMode: [Link],
gradient: LinearGradient(
colors: const [
[Link],
[Link],
],
),
),
[Link] 39/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

child: [Link](
'[Link]
),
),
),
);

backgroundBlendMode does not affect only the Container it’s located in.

backgroundBlendMode changes the color of anything that is up the widget tree from the
Container .

The following code has a parent Container that draws an image and child Container

that uses backgroundBlendMode . Still, you would get the same effect as previously.

Scaffold(
appBar: AppBar(title: Text('backgroundBlendMode')),
body: Center(
child: Container(
decoration: BoxDecoration(
[Link] 40/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

image: DecorationImage(
image: NetworkImage(
'[Link]
[Link]',
),
),
),
child: Container(
height: 200,
width: 200,
foregroundDecoration: BoxDecoration(
backgroundBlendMode: [Link],
gradient: LinearGradient(
colors: const [
[Link],
[Link],
],
),
),
),
),
),
);

. . .

Material
Border with cut corners

[Link] 41/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Scaffold(
appBar: AppBar(title: Text('shape: BeveledRectangleBorder')),
body: Center(
child: Material(
shape: const BeveledRectangleBorder(
borderRadius: [Link]([Link](20)),
side: BorderSide(color: [Link], width: 4),
),
color: [Link],
child: Container(
height: 200,
width: 200,
),
),
),
);

. . .

Slivers

SliverFillRemaining
This Widget is irreplaceable when you want to center your content even if there is not
enough space for it. Interactive example

[Link] 42/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Enough vertical space

Scaffold(
appBar: AppBar(title: Text('SliverFillRemaining')),
body: CustomScrollView(
slivers: [
SliverFillRemaining(
hasScrollBody: false,
child: Column(
mainAxisAlignment: [Link],
children: const [
FlutterLogo(size: 200),
Text(
'This is some longest text that should be centered'
'together with the logo',
textAlign: [Link],
),
],
),
),
],
),
);

In case there is no enough space for the centred content, SliverFillRemaining will
become scrollable:

[Link] 43/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Not enough vertical space

If it was not for SliverFillRemaining , the content would overflow like this:

Not enough space without SliverFillRemaining

Filling the remaining space

Apart from being useful for centering your content, SliverFillRemaining will fill the
remainings viewport’s free space. To do that this widget has to be placed in
CustomScrollView and needs to be the last sliver

[Link] 44/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

In case there is not enough space, the widget becomes scrollable:

[Link] 45/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Scaffold(
appBar: AppBar(title: Text('SliverFillRemaining')),
body: CustomScrollView(
slivers: [
SliverList(
delegate: SliverChildListDelegate(const [
ListTile(title: Text('First item')),
ListTile(title: Text('Second item')),
ListTile(title: Text('Third item')),
ListTile(title: Text('Fourth item')),
]),
),
SliverFillRemaining(
hasScrollBody: false,
child: Container(
color: [Link],
child: Column(
mainAxisAlignment: [Link],
children: const [
FlutterLogo(size: 200),
Text(
'This is some longest text that should be centered'
'together with the logo',
textAlign: [Link],
),
],
),
),
),
],
),
);

. . .

SizedBox
It’s one of the simplest but most useful Widgets
[Link] 46/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

SizedBox as ConstrainedBox
SizedBox can work in a similar fashion as ConstrainedBox

[Link](
child: Card(
child: Text('Hello World!'),
color: [Link],
),
),

. . .

SizedBox as padding
When in need of adding padding or margin, you might choose Padding or Container

widgets. But they can be more verbose and less readable than adding a Sizedbox

[Link] 47/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Column(
children: <Widget>[
Icon([Link], size: 50),
const SizedBox(height: 100),
Icon([Link], size: 50),
Icon([Link], size: 50),
],
),

SizedBox as an Invisible Object

Many time you would like to hide/show a widget depending on a bool

[Link] 48/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

Widget build(BuildContext context) {

bool isVisible = ...
return Scaffold(
appBar: AppBar(
title: Text('isVisible = $isVisible'),
),
body: isVisible
? Icon([Link], size: 150)
: const SizedBox(),
);
}

Because SizedBox has a const constructor, using const SizedBox() is really cheap**.

** One cheaper solution would be to use Opacity widget and change the opacity value
to 0.0 . The drawback of this solution is that the given widget would be only invisible,
still would occupy the space.

. . .

SafeArea
[Link] 49/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

On different platforms, there are special areas like Status Bar on Android or the Notch on
iPhone X that we might avoid drawing under.

The solution to this problem is SafeArea widget (example without/with SafeArea )

Widget build(BuildContext context) {

return Material(
color: [Link],
child: SafeArea(
child: [Link](
child: Card(color: [Link]),
),
),
);
}

[Link] 50/51
20/04/2020 Flutter Layout Cheat Sheet - Flutter Community - Medium

. . .

In case you have a question that is important to you and don’t want me to miss it, you can
send me a private message at twitter.

Flutter Community (@FlutterComm) | Twitter

The latest Tweets from Flutter Community (@FlutterComm). Follow to get
noti cations of new articles and packages from…
[Link]

Flutter Android App Development iOS App Development AndroidDev

Mobile App Development

About Help Legal

[Link] 51/51