Layout Widgets

Covered Topics
Column Widget
Row Widget
Padding & Margin Widget
Container
Expanded Widget
Center SizeBox, Algn Widgets
Layout Widgets
Layout widgets help us to build amazing UI with flutter. As we know
that flutter assume everything as a widget. So the image, icon, text,
button, and even the layout of your app are all widgets.
In Flutter, some of the widget you do not see on your app UI, such as
rows, columns, and grids that arrange, constrain, and align the visible
widgets like Text, Image, Icon, Button … etc
We can categories the layout widget into two types:
• Single Child Widget
• Multiple Child Widget
Column
It allows to arrange its child widgets in a vertical direction.
Multiple child widget, means this widget can contain more then
one widgets as child.
Example:
Column(
children: <widget>[
container(
child: Text(‘child-1’),
color: Colors.red),
container(
child: Text(‘child-2’),
color: Colors.green)
container(
child: Text(‘child-1’),
color: Colors.blue),
])
Row
It allows to arrange its child widgets in a horizontal direction.
Multiple child widget, means this widget can contain more then one
widgets as child.
Example:
Row(
children: <widget>[
container(
child: Text(‘child-1’),
color: Colors.red),
container(
child: Text(‘child-2’),
color: Colors.green)
container(
child: Text(‘child-1’),
color: Colors.blue),
])
Widget Alignment inside Row &
Column
All widgets can be align in row/column, horizontally or vertically with mainAxisAlignment and
crossAxisAlignment respectively
MainAxisAlignment: mainAxisAlignment property of Row/Column align the widgets with horizontal and
vertical values. This property has values
• center - put all widgets in row/colum centerly
• spaceBetween - put all widget from left to right or up to down without edge space
• spaceEvenly - put all widget from left to right or up to down with edge space
• end- put all widget at right or bottom side
• start - put all widget at left or top side (default)
CrossAxisAlignment: how the children’s widgets should be placed in crossAxisAlignment. For Row it is
vertical and for Column it is horizontal.
• CrossAxisAlignment.stretch - stretch the widget from top to bottom
• The size of the row and column can be fixed by using expanded or flexible widgets.
• Widget under Flexible are by default WRAP_CONTENT although you can change it using parameter fit.
• Widget under Expanded is MATCH_PARENT you can change it using flex.
Padding and Margin Widgets
Margin means the spacing outside of the border, while padding is the spacing inside the border.
In other words, a margin can be defined as the space between two widgets and padding is the
distance of a widget from its outer boundary.
There are two ways to set Padding in flutter
• first is using the Padding Widget
Padding (
padding: EdgeInsets.all(90),
child: Text(“Hello”),
),
• second is using the Padding as a property of an widget like container.
Container (
padding: EdgeInsets.all(20),
child: Text(‘Hello’),
),
Container
It is the most popular layout widget that provides customizable options
for painting, positioning, and sizing of widgets. Basically a container is
like a box to store contents.
It is a single child widget
Example:
Container(
margin: const EdgeInsets.all(15.0),
color: Colors.blue,
width: 42.0,
height: 42.0,
),
Container Properties
• child: Container widget has a property ‘child:’ which stores its children. The child
class can be any widget. Let us take an example, taking a text widget as a child.
• color: The color property sets the background color of the entire container.
• height and width: By default, a container class takes the space that is required by the
child. We can also specify height and width to the container based on our
requirements.
• margin: The margin is used to create an empty space around the container.
• padding: The padding is used to give space form the border of the container form its
children. padding: EdgeInsets.all(30),
• alignment: The alignment is used to position the child within the container. We can
align in different ways: bottom, bottom center, left, right, etc.
• decoration: The decoration property is used to decorate the box (e.g. give a border).
 Expanded
Expanded widget makes a child of a Row, Column, or Flex expand to fill the available
space along the main axis (e.g., horizontally for a Row or vertically for a Column).
Expanded is a single child widget
child: Row(`
children: <Widget>[
Expanded(
flex: 2,
child: Container(
), ),
Expanded(
flex: 1
child: Container(
), ), ], ),
The flex property of Expanded decide the area covered by container in a row.
Center, SizeBox, Align Widgets
• Center: This widget allows you to center the child widget within itself.
• SizedBox: This widget allows you to give the specified size to the child widget
through all screens. Normally we use it to make space between two widgets
• Align: It is a widget, which aligns its child widget within itself and sizes it based
on the child's size.
Container(
height: 110.0,
width: 110.0,
color: Colors.blue,
child: Align(
alignment: Alignment.topLeft,
child: FlutterLogo(
size: 50,
), ), ),