The document is a lecture on mobile application development focusing on layouts in Flutter, explaining the arrangement and hierarchy of widgets. It details types of layout widgets, including single-child and multi-child widgets, along with examples of commonly used widgets like container, row, and column. Furthermore, it discusses practical implementations and the structure of a user profile interface, highlighting asset management and customizable UI components.

1. SEIYUN UNIVERSITY
College of Applied Science – CS department
MOBILE APPLICATION DEVELOPMENT
Instructor: Dr. Mazin Md. Alkathiri
Information technology Department
Head of Information Technology Department
Seiyun University – Yemen
Sept. 2024

2. SEIYUN UNIVERSITY
College of Applied Science – CS department
LECTURE 6
:
LAYOUTS
2

3. SEIYUN UNIVERSITY
College of Applied Science – CS department
Layouts and Widgets Hierarchy
•What is a Layout?
A layout in Flutter refers to how widgets are arranged in relation to one another on the screen. It
involves positioning, spacing, and alignment to create the desired UI structure.
•Widget Tree:
In Flutter, the user interface is built as a tree of widgets, where each widget is a node. The parent-
child relationship among widgets defines the hierarchy and layout of the UI.
•Types of Layout Widgets:
•Single-Child Layout Widgets: These widgets can have only one child widget. Examples include
Container, Center, Padding.
•Multi-Child Layout Widgets: These widgets can have multiple children. Examples include
Column, Row, Stack, ListView.

4. SEIYUN UNIVERSITY
College of Applied Science – CS department
4
op 20 Most Used Single-Child Widgets in Flutter
1. Container: Provides a flexible box for positioning and styling its child.
2. Center: Centers its child within its available space.
3. Padding: Adds padding around its child.
4. Align: Aligns its child within its available space based on specified alignment.
5. SizedBox: Sets a fixed size for its child.
6. AspectRatio: Maintains a specific aspect ratio for its child.
7. DecoratedBox: Applies decorations like borders, shadows, and gradients to its child.
8. ClipRect: Clips its child to a rectangular shape.
9. ClipRRect: Clips its child to a rounded rectangular shape.
10.ClipOval: Clips its child to an oval shape.
11. ClipPath: Clips its child to a custom path shape.
12.Opacity: Sets the opacity of its child.
13.Transform: Applies transformations like rotation, scaling, and translation to its child.
14.AnimatedContainer: Creates a container with smoothly animated properties.
15.Hero: Creates a widget that can be animated between screens.
16.Placeholder: Displays a placeholder while the actual content is loading.
17.AbsorbPointer: Prevents its child from receiving pointer events.
18.IgnorePointer: Ignores pointer events for its child.
19.Semantics: Provides accessibility information for screen readers.
20.WillPopScope: Intercepts the back button press.

5. SEIYUN UNIVERSITY
College of Applied Science – CS department
5
Top 20 Most Used Multi-Child Widgets in Flutter
•Row: Arranges its children horizontally.
•Column: Arranges its children vertically.
•Stack: Lays its children on top of each other.
•ListView: Displays a list of items that can be scrolled.
•GridView: Displays a grid of items.
•Wrap: Wraps its children to fit within a given width or height.
•Expanded: Expands its child to fill the available space.
•Flexible: Makes its child flexible in terms of size.
•FractionallySizedBox: Sets a specific fraction of the available space for its child.
•Table: Displays tabular data.
•DataTable: Displays a data table with sortable and filterable columns.
•TabBarView: Displays a view for each tab in a TabBar.
•PageView: Displays a series of pages that can be swiped horizontally or vertically.
•CustomScrollView: Creates a custom scroll view with nested scrolling.
•NestedScrollView: Creates a nested scroll view with a header and footer.
•Draggable: Makes its child draggable.
•Droppable: Makes its child a drop target.
•ReorderableListView: Creates a list view that can be reordered.
•SliverAppBar: Creates a collapsible app bar that can be used with CustomScrollView.
•SliverList: Creates a list of slivers for use in CustomScrollView.

6. SEIYUN UNIVERSITY
College of Applied Science – CS department
6
Commonly Used Layout Widgets
• Container: A versatile widget that can contain a single child and provides
properties for styling, padding, and alignment.
• Example: Container(
width: 200,
height: 100,
padding: EdgeInsets.all(20),
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(15),
),
child: Center(
child: Text(
'Hello Container!',
style: TextStyle(color: Colors.white),
),
),
),

7. SEIYUN UNIVERSITY
College of Applied Science – CS department
7
Row and Column
•Row and Column are the basic layout widgets for horizontal and vertical alignment respectively.
•They are used to place multiple widgets along a single axis.
•The Row widget places three Icon widgets in a horizontal alignment with equal space around them
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Icon(Icons.star, color: Colors.red),
Icon(Icons.star, color: Colors.green),
Icon(Icons.star, color: Colors.blue),
],
),

8. SEIYUN UNIVERSITY
College of Applied Science – CS department
8
Expanded
•Expanded:
•Used within a Row or Column to take up the available space.
•Adjusts the size of its child to fill the available space.
•The first Container with flex: 2 takes up twice the space of the second Container with flex: 1.
body: Row(
children: [
Expanded(
flex: 2,
child: Container(color: Colors.red, height: 50),
),
Expanded(
flex: 1,
child: Container(color: Colors.green, height: 50),
),
],
)

9. SEIYUN UNIVERSITY
College of Applied Science – CS department
9
Stack
•It allows children to be layered on top of each other.
•Useful for creating complex layouts like overlapping elements, banners,
or floating action buttons.
•The Stack contains three children: two overlapping Container widgets
and a positioned Text widget.
Stack(
alignment: Alignment.center,
children: [
Container(
width: 200,
height: 200,
color: Colors.yellow,
),
Container(
width: 150,
height: 150,
color: Colors.blue,
),
Positioned(
bottom: 10,
right: 10,
child: Text(
'Overlay',
style: TextStyle(color: Colors.white),
),
),
],
),

10. SEIYUN UNIVERSITY
College of Applied Science – CS department
10
ListView
• A scrollable list of widgets arranged linearly.
• Ideal for creating long, scrollable lists of items.
• Each ListTile widget displays an icon, a title, and a subtitle, forming a simple contact list.
body: ListView(
children: [
ListTile(
leading: Icon(Icons.phone),
title: Text('Phone'),
subtitle: Text('Tap to call'),
),
ListTile(
leading: Icon(Icons.email),
title: Text('Email'),
subtitle: Text('Tap to email'),
),
],
),

11. SEIYUN UNIVERSITY
College of Applied Science – CS department
11

12. SEIYUN UNIVERSITY
College of Applied Science – CS department
12
Assets
• Start by creating a new Directory (Folder).
• Add you Image to the new Directory.
• Then in pubspecy.yaml enable the assets.
# To add assets to your application, add an assets section, like this:
# assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
# To add assets to your application, add an assets section, like this:
assets:
- pics/profilepic.png
# - images/a_dot_ham.jpeg

13. SEIYUN UNIVERSITY
College of Applied Science – CS department
13
Scaffold(
appBar: AppBar(
title: Text('User Profile'),
),
body: Column(
children: [
Container(
width: double.infinity,
padding: EdgeInsets.all(20),
color: Colors.blueAccent,
child: Column(
children: [
CircleAvatar(
radius: 50,
backgroundImage: Image.asset('pics/profilepic.png').image,
),
SizedBox(height: 10),
Text(
'John Doe',
style: TextStyle(fontSize: 24, color: Colors.white),
),
Text(
'Software Developer',
style: TextStyle(fontSize: 16, color: Colors.white70),
),
],
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Email:'),
Text('john.doe@example.com'),
],
),
),
Divider(),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('Phone:'),
Text('+1234567890'),
],
),
),
],
),
),

14. SEIYUN UNIVERSITY
College of Applied Science – CS department
14