Layout Widgets-1

IT Industry-Academia Bridge Program

Covered Topic
Column Widget
Row Widget
Padding & Margin Widget
Container
Expanded Widget
Center SizeBox, Algn Widgets

IT Industry-Academia Bridge Program

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

In this Lecture slides, we will learn some of basic Layout widgets.

IT Industry-Academia Bridge Program
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),
])
IT Industry-Academia Bridge Program
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),
])
IT Industry-Academia Bridge Program
Widget Alignment inside Row & Column
All widgets can be align in row/column with horizontally or vertically with mainAxisAlignment and
crossAxisAlignment respectively
MainAxisAlighment: mainAxisAlignment property of Row/Column align the widgets with horizontal and
vertical values. This property has values
• cener - put all widgets in row/colum centerly without and padding
• 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 places 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.

IT Industry-Academia Bridge Program

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’),
),

IT Industry-Academia Bridge Program

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,
),
IT Industry-Academia Bridge Program
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.
• 5. padding: The padding is used to give space form the border of the container form its
children. padding: EdgeInsets.all(30),
• 6. 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). Th

IT Industry-Academia Bridge Program

Expanded
Using an Expended widget makes a child of a Row, Column, or Flex expand to fill the available
space in the main axis.
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 ITthe area covered by container in a row.
Industry-Academia Bridge Program
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,
), ), ), IT Industry-Academia Bridge Program
IT Industry-Academia Bridge Program