Scribd
Upload
632 views

Testing Rails Sample

This document provides a quick reference to common Flutter layout widgets including Row, Column, Stack, and Expanded. It explains properties like mainAxisAlignment and crossAxisAlignment that control child positioning. Examples demonstrate how to position widgets within Rows and Columns as well as use Stack and Positioned to overlay widgets. Expanded is described as a widget that expands its child to fill available space in a Row or Column.

Uploaded by

Jarrett Yew
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
632 views

Testing Rails Sample

This document provides a quick reference to common Flutter layout widgets including Row, Column, Stack, and Expanded. It explains properties like mainAxisAlignment and crossAxisAlignment that control child positioning. Examples demonstrate how to position widgets within Rows and Columns as well as use Stack and Positioned to overlay widgets. Expanded is described as a widget that expands its child to fill available space in a Row or Column.

Uploaded by

Jarrett Yew
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

Flutter Layout

Cheat Sheet
codingwithflutter.com

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.

codingwithflutter.com Page 2 Version 1.0


Row.mainAxisAlignment
Row(
mainAxisAlignment: _mainAxisAlignment,
mainAxisSize: MainAxisSize.max,
children: [
Icon(Icons.stars, size: 50.0),
Icon(Icons.stars, size: 50.0),
Icon(Icons.stars, size: 50.0),
],
)
MainAxisAlignment.start
 MainAxisAlignment.spaceBetween

MainAxisAlignment.end MainAxisAlignment.spaceAround

MainAxisAlignment.center
 MainAxisAlignment.spaceEvenly

MainAxisSize.min
Note: setting MainAxisSize.min minimises the amount of free space along
the main axis.


Row.crossAxisAlignment
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: _crossAxisAlignment,
children: [
Icon(Icons.stars, size: 50.0),
Icon(Icons.stars, size: 100.0),
Icon(Icons.stars, size: 50.0),
],
)

codingwithflutter.com Page 3 Version 1.0


CrossAxisAlignment.start

CrossAxisAlignment.center


CrossAxisAlignment.end


CrossAxisAlignment.stretch
(fills all the space in the cross axis)


codingwithflutter.com Page 4 Version 1.0


Column.mainAxisAlignment
Columns behave in the same way as rows.

Main Axis: Vertical. Cross Axis: Horizontal.

Column(
mainAxisAlignment: _mainAxisAlignment,
mainAxisSize: MainAxisSize.max,
children: [
Icon(Icons.stars, size: 50.0),
Icon(Icons.stars, size: 50.0),
Icon(Icons.stars, size: 50.0),
],
)

start
 center
 end
 space
 space
 space




 Between
 Around
 Evenly


codingwithflutter.com Page 5 Version 1.0


Column.crossAxisAlignment
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: _crossAxisAlignment,
children: [
Icon(Icons.stars, size: 50.0),
Icon(Icons.stars, size: 100.0),
Icon(Icons.stars, size: 50.0),
],
)

CrossAxisAlignment.
 CrossAxisAlignment.
 CrossAxisAlignment.



start
 center
 end


CrossAxisAlignment.stretch


codingwithflutter.com Page 6 Version 1.0


Stack
A stack positions its children relative to the edges of
its box.

Stack.alignment
Stack(
alignment: _alignmentDirectional,
children:[
SizedBox(
width: 300.0,
height: 300.0,
child: Container(color: Colors.green),
),
SizedBox(
width: 200.0,
height: 200.0,
child: Container(color: Colors.yellow),
),
SizedBox(
width: 100.0,
height: 100.0,
child: Container(color: Colors.red),
),
],
)

topStart topCenter topEnd


codingwithflutter.com Page 7 Version 1.0


centerStart
 center
 centerEnd


bottomStart
 bottomCenter bottomEnd


codingwithflutter.com Page 8 Version 1.0


Positioned
Stack(
children: [
SizedBox(
width: 300.0,
height: 300.0,
child: Container(color: Colors.yellow),
),
Positioned(
left: 20.0,
top: 20.0,
width: 100.0,
height: 100.0,
child: Container(color: Colors.indigo),
),
Positioned(
bottom: 20.0,
right: 20.0,
width: 100.0,
height: 100.0,
child: Container(color: Colors.blue),
),
],
)

codingwithflutter.com 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: CrossAxisAlignment.stretch,
children: [
Expanded(
flex: 1,
child: Container(
color: Colors.yellow,
child: Center(child: Text('flex: 1')),
),
),
Expanded(
flex: 2,
child: Container(
color: Colors.orange,
child: Center(child: Text('flex: 2')),
),
),
Expanded(
flex: 3,
child: Container(
color: Colors.cyan,
child: Center(child: Text('flex: 3')),
),
),
],
)

codingwithflutter.com 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: Colors.yellow,
padding: EdgeInsets.all(16.0),
child: Row(
children: [
Expanded(
flex: 1,
child: Container(
color: Colors.green,
child: Center(child: Text('flex: 1')),
),
),
SizedBox(width: 40.0),
Expanded(
flex: 2,
child: Container(
color: Colors.cyan,
child: Center(child: Text('flex: 2')),
),
),
],
),
)

codingwithflutter.com Page 11 Version 1.0

You might also like