Lab # 06

Mobile Application Development

Fall 2022

Instructor Bakht Muhammad

Student Name

CMSID

Department Computer Science

Semester 5th
Lesson Set Building Layouts for Rich Application
Interfaces
6
Purpose 1. To understand the various layout widgets available in Flutter for creating
responsive user interfaces.
2. To learn how to create complex layouts using combinations of Flutter’s
layout widgets.
3. To implement best practices for designing user-friendly and aesthetically
pleasing interfaces.
4. To explore adaptive layouts for different screen sizes and orientations.

Procedure 1. Students should read the Pre-lab Reading assignment before coming to the
lab.
2. Students should complete the Pre-lab Writing assignment before entering
the lab.
3. In the lab, students should complete Labs 6.1 through 6.4 in sequence.
Your instructor will give further instructions on grading and completing the
lab.
4. Students should complete the set of lab tasks before the next lab and get
them checked by their lab instructor.

Contents Pre-requisites Completion Page

Time Number

Pre-lab Reading Assignment - 20 min 3

Pre-lab Writing Assignment Pre-lab Reading 10 min 4

Lab 6

Lab 6.1 Pre-lab reading 30 min 5

-

Lab 6.2 Awareness of - 9

Lab Tasks Flutter

2|Page
PRE-LAB READING ASSIGNMENT

Flutter In Flutter, layouts are built using a combination of widgets that define how
Layouts other widgets are arranged on the screen. Understanding how these layout
widgets work is crucial for creating visually appealing and functional user
interfaces. Here are the key layout widgets:

Container: A versatile widget that can contain a single child widget. You can
customize it with properties like padding, margin, color, and decoration.
Container(
padding: EdgeInsets.all(10.0),
margin: EdgeInsets.symmetric(vertical: 5.0),
color: Colors.blue,
child: Text('Hello, Flutter!'), )

Column: A widget that arranges its children vertically. You can control the
alignment of the children using properties like `mainAxisAlignment` and
`crossAxisAlignment`.
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Item 1'),
Text('Item 2'),
Text('Item 3'),
],)

Row: Similar to `Column`, but it arranges its children horizontally. It also has
similar alignment properties.
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(Icons.home),
Icon(Icons.star),
Icon(Icons.settings),
],)

Stack: Allows you to overlay multiple widgets on top of each other. You can
use the `Positioned` widget to specify the position of each child.
Stack(
children: <Widget>[
Container(color: Colors.red),
Positioned(
top: 10,
left: 10,
child: Text('Overlay Text'),
),],)

ListView: A scrollable list of widgets. It is useful for displaying a large number

of items efficiently.

3|Page
 ListView(
children: <Widget>[
ListTile(title: Text('Item 1')),
ListTile(title: Text('Item 2')),
],)

GridView: A scrollable grid of widgets arranged in a two-dimensional array. It

is useful for displaying images or other items in a grid format.
GridView.count(
crossAxisCount: 2,
children: <Widget>[
Container(color: Colors.blue),
Container(color: Colors.green),
],)

Understandi Column and Row: These widgets are fundamental to layout creation. The
ng Flutter `mainAxisAlignment` property controls how children are aligned along the
Layout main axis (vertical for Column, horizontal for Row), while
Widgets `crossAxisAlignment` controls alignment perpendicular to the main axis.

Stack: This widget lets you stack widgets on top of one another. The
`Positioned` widget is used to specify the exact location of each child within
the `Stack`. This is useful for creating complex interfaces where elements
overlap.

Wrap: A widget that allows children to automatically wrap to the next line
when they overflow. This is useful for creating responsive layouts.

Creating MediaQuery: A class that provides information about the size of the screen
Responsive and the orientation (portrait or landscape). It is crucial for building layouts that
Layouts adapt to different screen sizes.

Flexible and Expanded: These widgets are used within Row and Column to
control how much space a child takes up relative to other children. `Flexible`
allows a widget to fill the available space, while `Expanded` forces a widget to
occupy all available space.

AspectRatio: This widget helps maintain the aspect ratio of a child widget.
It's useful for ensuring that images or other elements look good regardless of
the screen size.

4|Page
PRELAB WRITING ASSIGNMENT

Fill in the 1. The _____________ widget allows you to arrange children vertically in a
blanks column format.
2. The _____________ widget is used to overlay multiple widgets on top of
one another.
3. To create a scrollable list of items, you can use the _____________ widget.
4. The _____________ class retrieves the screen size and orientation for
responsive design.
5. Using the _____________ widget, you can manage the space of children in
a Row or Column.

5|Page
 Lab 6.2 Lab Tasks

1. Task 1: Create a responsive grid layout that displays images from a local or online
source. Use the GridView widget and ensure it adjusts the number of columns based on
the screen width.

 Screenshot should be pasted here.

 GitHub Repository link.

2. Task 2: Design a profile card with an avatar, name, bio, and buttons for actions (e.g.,
follow, message). Use a combination of layout widgets to create an aesthetically
pleasing card.

 Screenshot should be pasted here.

 GitHub Repository link.

3. Task 3: Build a dashboard layout that consists of multiple cards arranged in a grid. Each
card should display different types of information (e.g., statistics, notifications) and
should be interactive (tap to see more details).

 Screenshot should be pasted here.

 GitHub Repository link.

Note: Make sure to upload the code for each task to a GitHub repository. Do not update or
change the repository after the due date. Provide the link to your GitHub repository with each
task submission.

6|Page