Lab # 03

Mobile Application Development

Fall 2022

Instructor Bakht Muhammad

Student Name

CMSID

Department Computer Science

Semester 5th
Lesson Set First Flutter Application and Understanding
Stateless and Stateful Widgets
3
Purpose 1. To introduce students to the Flutter framework and its fundamental
concepts.
2. To provide hands-on experience in building basic Flutter applications.
3. To help students understand the difference between stateless and stateful
widgets.
4. To explore the usage of common Flutter widgets such as `Text`, `Icon`,
`Image`, `Row`, `Column`, and `Button`.
5. To enhance students' understanding of UI design and state management in
mobile applications.
6. To build students' confidence in developing simple interactive applications
using Flutter.

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 3.1 through 3.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 3

Lab 3.1 Pre-lab reading 30 min 5

Installing VS Code

Lab 3.2 Flutter and Dart - 9

Lab Tasks SDK installed

2|Page
PRE-LAB READING ASSIGNMENT

Introductio In this lab, you will take your first steps into the world of Flutter by building a
n basic Flutter application. Understanding the fundamental concepts of stateless
and stateful widgets is key to becoming proficient in Flutter app development.
Widgets are the building blocks of Flutter applications, and distinguishing
between stateless and stateful widgets will allow you to manage the app’s state
effectively.

What Are In Flutter, everything is a widget. A widget is essentially a description of part of a

Widgets? user interface (UI). From buttons, text, and images to the entire layout structure,
they are all widgets in Flutter. Widgets are nested within one another, which
means that the UI of your application is built by composing widgets together.

Stateless Widgets
Stateless widgets are widgets that do not store any state. They are immutable,
meaning their properties cannot change once they are built. Stateless widgets
are often used for static parts of the UI, such as text labels, icons, and simple
layout elements that don’t need to be updated dynamically.

Stateful Widgets
Stateful widgets, on the other hand, are widgets that can change their state
during the app's lifecycle. They are mutable, which allows you to update their
state and have the UI reflect these changes. For instance, a button that
increments a counter whenever it’s pressed would be a stateful widget, as its
state (the counter) changes.

Common Below are some commonly used widgets in Flutter:

Flutter  Text: Displays a string of text.
Widgets  Container: A box model element used for styling.
 Row/Column: For arranging widgets horizontally or vertically.
 ListView: Scrollable list of widgets.
 Stack: Layers widgets on top of one another.
 Padding: Adds space around a widget.
 Icon: Displays an icon.

Stateless Widget Example

3|Page
 import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Stateless Widget Example')),
body: Center(child: Text('Hello, World!')),
),
);}}

This simple application is built using a `StatelessWidget`, where the text "Hello,
World!" will be displayed at the center of the screen.

Stateful Widget Example

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int counter = 0;
void incrementCounter() {
setState(() {
counter++;
});}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Stateful Widget Example')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('Button tapped $counter times'),
ElevatedButton(
onPressed: incrementCounter,
child: Text('Tap me!'),
),],),),),); }}

This example demonstrates a `StatefulWidget` where the counter is

incremented each time the button is pressed.

4|Page
 Common Widget Usage
In real applications, you will frequently use widgets like `Text`, `Icon`, `Image`,
`Row`, `Columns`, and more. These widgets are vital for building the structure
and UI of your app.

 Text Widget: Displays text.

 Image Widget: Displays an image from a URL or local asset.
 Container Widget: Used for padding, margin, and decoration.
 Button Widgets: Such as `ElevatedButton`, `TextButton`, and `IconButton`,
allow user interaction.

5|Page
PRELAB WRITING ASSIGNMENT

1. What is the main difference between stateless and stateful widgets in Flutter?
2. Why do we use `setState()` in a stateful widget, and what is its significance?
3. Explain the purpose of the `MaterialApp` widget in Flutter.
4. Describe how a `Column` widget differs from a `Row` widget.
5. How would you use the `Image` widget to display an image from a local asset in Flutter?

6|Page
 Lab 3.2 Lab Tasks

1. Create Using Common Widgets in Flutter

a. Build a new Flutter app named `widget_app` that demonstrates the following
widgets: `Text`, `Icon`, `ElevatedButton`, `Image`, `Row`, and `Column`.
b. The app should display an image at the top, followed by a row with icons and
text, and an elevated button at the bottom of the screen.
c. Run the app to ensure everything displays correctly.

 Screenshot should be pasted here.

 GitHub Repository link.

1. Create another file with yourname.dart and design the following design.

 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.

7|Page