Scribd
Upload
16 views

Lab 08

Mobile Application Development in flutter Lab Manual for NUST NBC

Uploaded by

Bakht Khilji
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views

Lab 08

Mobile Application Development in flutter Lab Manual for NUST NBC

Uploaded by

Bakht Khilji
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Lab # 08

Mobile Application Development


Fall 2022

Instructor Bakht Muhammad

Student Name

CMSID

Department Computer Science

Semester 5th
Lesson Set Building
Applications with State Management
8
Purpose 1. To understand the concept of state management in Flutter applications.
2. To explore various state management techniques such as setState,
Provider, and GetX.
3. To build scalable and maintainable applications using state management.

Procedure 4. Students should read the Pre-lab Reading assignment before coming to the
lab.
5. Students should complete the Pre-lab Writing assignment before entering
the lab.
6. In the lab, students should complete Labs 8.1 through 8.4 in sequence.
Your instructor will give further instructions on grading and completing the
lab.
7. 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 5

Lab 8

Lab 8.1 Pre-lab reading 30 min 4


-

Lab 8.2 Awareness of - 6


Lab Tasks Programming

2|Page
PRE-LAB READING ASSIGNMENT

Introduction to State Management


State management refers to managing the state (data) of your app efficiently across multiple
widgets. Flutter provides both simple and advanced ways to manage state depending on the
complexity of the application.

Types of State Management

1. Ephemeral State (UI State):


o Local, temporary state managed by the widget.
o Use setState for this purpose.
o Example: Toggling a switch, updating a counter.

2. App State (Shared State):


o Shared state that is required by multiple widgets.
o Requires advanced techniques like Provider or GetX.
o Example: Authentication status, cart items in an e-commerce app.

3|Page
Common State Management Techniques in Flutter

1. setState:
o Simplest way to manage state.
o Used for widgets that rebuild themselves when the state changes.
o Ideal for small-scale state changes.

2. Provider:
o Officially recommended by Google.
o Allows sharing state across the app and provides separation of concerns.
o Useful for medium to large applications.

3. GetX:
o Lightweight, reactive state management library.
o Offers state, dependency, and route management in one package.
o Known for its simplicity and performance.

4|Page
5|Page
PRELAB WRITING ASSIGNMENT

Fill in the 1. State management in Flutter is used to manage the _______ of an app.
blanks
2. The simplest way to manage state in Flutter is by using the _______ method.

3. _______ is an officially recommended state management solution by Google.

4. In GetX, state management is _______ and reactive.

5. App state refers to data shared across multiple _______.

6|Page
Lab 8.2 Lab Tasks

Task 1: Counter App Using setState


 Create a simple Flutter app with a counter.
 Use setState to update the counter when a button is pressed.

 Screenshot should be pasted here.


 GitHub Repository link.

Task 2: Simple Todo App Using Provider


 Create a Todo app with Provider.
 Users should be able to add tasks, view them, and mark them as completed.

 Screenshot should be pasted here.


 GitHub Repository link.

Task 3: Reactive Shopping Cart Using GetX


 Create a shopping cart app using GetX for state management.
 Include a product list and a cart page where users can add or remove products.

 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

You might also like