Mobile App Development (MCS-206L) SSUET/QR/114

Nadra Arshad Roll No:2021f-bmcs-014

LAB # 01
FLUTTER INSTALLATION ON ANDROID STUDIO
OBJECTIVE
Configure Flutter within Android Studio

THEORY
To install Flutter in Android Studio, follow these steps:

1. Download Flutter SDK:

- Visit the Flutter installation page: [Flutter Install](https://flutter.dev/docs/get-started/install)
- Download the Flutter SDK for your operating system.
- Extract the downloaded package to a location on your machine.

2. Install Dart plugin in Android Studio:

- Open Android Studio.
- Go to `File` > `Settings` (or `Android Studio` > `Preferences` on macOS).
- In the left panel, select `Plugins`.
- Search for "Dart" in the search bar.
- Find the Dart plugin, click `Install`, and then `Restart` Android Studio to apply the changes.

3. Set up Flutter SDK in Android Studio:

- Open Android Studio.
- Go to `File` > `Settings` (or `Android Studio` > `Preferences` on macOS).
- In the left panel, select `Languages & Frameworks` > `Flutter`.
- Click on `+` (plus) icon to add the Flutter SDK path.
- Navigate to the directory where you extracted the Flutter SDK and select the folder named
`flutter`. Click `OK`.

4. Verify Flutter Installation:

- Open a terminal or command prompt.
- Run the command `flutter doctor`. This command checks your environment and displays a
report of the status of your Flutter installation.
- If there are any missing dependencies, `flutter doctor` will provide guidance on how to
install them.

5. Create or Open a Flutter Project:

- Open Android Studio.
- Click on `Open an existing project` or create a new Flutter project using the `New Flutter
Project` option in the welcome screen.
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

6. Run the Flutter project:

- Once your project is opened or created, you can run it on an emulator or physical device by
clicking the `Run` button in Android Studio.

7. Flutter and Dart Support:

- Android Studio should now provide Flutter and Dart support. You can create Flutter
projects, edit Flutter and Dart files, and utilize various Flutter-specific features within Android
Studio.

LAB EXERCISE
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

Successfully created our first flutter app!

CONCLUSION:
We set up Flutter on Android Studio
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

LAB # 02
FLUTTER WIDGETS
OBJECTIVE
Understanding some basic Flutter widgets

THEORY
Here are some basic Flutter widgets that are commonly used to build user interfaces in Flutter
applications:

Widget Description
Container Used for layout, decoration, padding, margin, and constraints.
Text Displays a string of text with various styling options.
Image Displays images from different sources like network, assets, memory,
etc.
Row Arranges child widgets in a horizontal line.
Column Arranges child widgets in a vertical line.
Stack Stacks widgets on top of each other. Useful for creating complex
layouts.
ListView Displays a scrollable list of children widgets.
GridView Displays a scrollable grid of children widgets.
AppBar Represents the app bar, typically used as the top-level bar containing a
title and action items.
Scaffold Implements the basic material design visual layout structure with app
bars, drawers, and floating action buttons.
FlatButton A simple button without any elevation or styling.
RaisedButton A button with a material design style that provides elevation when
pressed.
ElevatedButton A button with a material design style that has a shadow by default.
TextField Accepts user input as text.
Checkbox A widget for a single checkbox.
Radio A widget for a radio button that allows single selection among
multiple choices.
Switch A widget for a toggle switch that can be on or off.
GestureDetector Detects various user gestures on its child widget, like taps, drags, etc.
AlertDialog A dialog that interrupts the user's workflow to get a response.
BottomSheet A widget that slides up from the bottom to reveal more content or
actions.
SnackBar A small widget for showing messages at the bottom of the screen.
AnimatedContainer A container that animates changes to its properties like size, color, etc.
Flexible A widget that controls how a child widget can grow to fill available
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

space in a Row, Column, or Flex container.

Expanded A widget that forces its child to fill the available space along the main
axis of a Row, Column, or Flex.

These are just a few of the basic widgets available in Flutter. There are many more widgets
available in the Flutter framework, each serving a specific purpose in building user interfaces.
Understanding and utilizing these widgets effectively allows developers to create rich and
responsive UIs in Flutter applications.

LAB EXERCISE
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

CONCLUSION:
In this lab, I learnt about the basic flutter widget using Android Studio ID.
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

LAB # 03
SET UP EMULATOR ON ANDROID STUDIO FOR DEVELOPMENT

OBJECTIVE
Configure emulator on Android Studio

THEORY
Setting up an emulator in Android Studio for Android app development involves a few steps to
create and configure a virtual device (AVD). Here's a guide to set up an emulator:

1. Open Android Studio:

- Launch Android Studio.

2. Open AVD Manager:

- Click on `Configure` at the bottom right corner of the welcome screen or go to `Tools` >
`AVD Manager` from the top menu.

3. Create a Virtual Device (AVD):

- In the AVD Manager window, click on the `Create Virtual Device` button.

4. Choose Device Type:

- Select the hardware profile for the virtual device (e.g., Pixel, Nexus).
- Click `Next`.

5. Select System Image:

- Choose a system image (Android version) for the device. If not downloaded, click
`Download` next to the desired version.
- Click `Next`.

6. Configure AVD:
- Name the device and configure additional settings such as RAM, VM heap, orientation, etc.
Adjust as needed.
- Click `Finish`.

7. Start the Emulator (AVD):

- In the AVD Manager, select the created device.
- Click on the `Play` (green triangle) button to start the emulator.

8. Run Android App on the Emulator:

- Once the emulator is running, open your Android Studio project.
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

- Select the emulator device from the list of available devices.

- Click on the `Run` (green triangle) button to deploy and run your app on the emulator.

9. Debugging on the Emulator:

- You can debug your app on the emulator by setting breakpoints in the code. Android Studio
will run the app on the emulator and allow you to debug it.

10. Shutdown the Emulator:

- After finishing your work, you can close the emulator by clicking the `X` button in the
emulator window or going to `AVD Manager` and clicking the `Stop` button for the selected
AVD.

LAB EXERCISE
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

CONCLUSION:
We configured an emulator on android studio for development
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

LAB # 04
HELLO WORLD
OBJECTIVE
Display “Hello World” in the center with blue color

THEORY
To display "Hello World" in the center of the screen with blue color in Flutter, you can follow
these steps:

1. Create a Flutter Project:

- Set up a Flutter project in your preferred development environment.

2. Open the 'main.dart' File:

- Open the `lib/main.dart` file in your Flutter project.

3. Replace Existing Code:

- Replace the existing code in `main.dart`

4. Explanation of the Code:

- `MaterialApp`: Wraps the app and defines the root widget.
- `Scaffold`: Provides a basic structure of the app's layout.
- `Center`: Centers its child widget horizontally and vertically.
- `Text`: Displays the "Hello World" text with styling options.
- `color`: Sets the text color to blue.

5. Run the App:

- Run the Flutter app using your preferred emulator or physical device.
- You'll see "Hello World" displayed in the center of the screen with blue color.
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

LAB EXERCISE

Output:
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

CONCLUSION: We displayed “Hello World” in the center with blue color.

Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

LAB # 05
TEXT ALIGNMENT
OBJECTIVE
Perform Text Alignments

THEORY
In Flutter, the `Text` widget has a property called `textAlign` that allows you to specify how the
text is aligned within its container. The `textAlign` property determines whether the text is
aligned to the left, right, center, or justified. Here are the possible values for `textAlign`:

1. left: Aligns the text to the left edge of the container.

2. right: Aligns the text to the right edge of the container.

3. center: Centers the text within the container horizontally.

4. justify: Adjusts spacing between words so that the text is fully justified, meaning it spreads
evenly across the container.

5. start: Aligns text to the start of the line, considering the text direction (left-to-right or right-
to-left).

6. end: Aligns text to the end of the line, considering the text direction (left-to-right or right-to-
left).

You can also utilize a combination of `Container` and `alignment` property to achieve text
alignment.
- The `alignment` property within the `Container` is set to `Alignment.center` to center-align the
child widget.
You can modify the `alignment` property to `Alignment.centerLeft`, `Alignment.centerRight`,
`Alignment.topLeft`, `Alignment.bottomRight`, etc., based on your requirements to achieve
different alignments within the `Container`. Adjust the `Alignment` values to achieve the
desired text positioning within the container.
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

LAB EXERCISE
Top Left:
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

Top Right:
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

Output:
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

TopCenter:
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

Output:
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

BottomRight:

Output:
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

CONCLUSION:
In this lab, we performed text alignments.

LAB # 06
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

BUTTON WIDGET
OBJECTIVE
Display button widgets in horizontal and vertical

THEORY
Types of Button Widgets:
ElevatedButton: Represents a Material Design raised button. Provides elevation when pressed.
TextButton: Represents a simple text button. No elevation or fill color by default.
OutlinedButton: Represents a button with an outlined border. No elevation and transparent fill
color by default.
To display button widgets in both horizontal and vertical arrangements in Flutter, you can use
`Row` and `Column` widgets. Here are the steps:

Horizontal Arrangement (Using `Row`):

1. Create a Flutter Project:

- Set up a new Flutter project in your preferred development environment.

2. Open the 'main.dart' File:

- Open the `lib/main.dart` file in your Flutter project.

3. Add Button Widgets in a Row:

- Replace the existing code in `main.dart` with the following code snippet:

Vertical Arrangement (Using `Column`):

1. Modify the Code for Vertical Arrangement:

- To display buttons vertically, modify the code inside `body` as follows:

Run the App:

- Run the Flutter app using an emulator or a physical device.
- You'll see a row of buttons horizontally or a column of buttons vertically, based on the code
modifications made.

By following these steps, you can display button widgets in both horizontal and vertical
arrangements using `Row` and `Column` widgets in Flutter. Adjust the button properties, styles,
and actions according to your app's requirements.
LAB EXERCISE
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

Output:
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

CONCLUSION:
We displayed button widgets horizontally and vertically
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

LAB # 07
OPEN ENDED LAB
OBJECTIVE
Perform Flutter Gestures

THEORY

Gestures are primarily a way for a user to interact with a mobile (or any touch based
device) application. Gestures are generally defined as any physical action / movement
of a user in the intention of activating a specific control of the mobile device.

Some of the widely used gestures are mentioned here −

• Tap − Touching the surface of the device with fingertip for a short
period and then releasing the fingertip.
• Double Tap − Tapping twice in a short time
• Drag − Touching the surface of the device with fingertip and then
moving the fingertip in a steady manner and then finally releasing the
fingertip.
• Flick − Similar to dragging, but doing it in a speeder way.
• Pinch − Pinching the surface of the device using two fingers.
• Spread/Zoom − Opposite of pinching.
• Panning − Touching the surface of the device with fingertip and
moving it in any direction without releasing the fingertip.

It is a simple Flutter task that involves implementing gesture recognition for a container.
The task is to change the color of the container when it is tapped.

Here's a basic outline

• Create a Flutter project and set up the necessary files.

• Create a stateful widget with a Container as its child.
• Implement a GestureDetector around the Container to recognize taps.
• Change the color of the container when it is tapped
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

LAB EXERCISE
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

Output:
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

Before Tap:
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

After Tab
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

LAB # 08
HELLO WORLD IN AVD
OBJECTIVE
Display “Hello World” in AVD

THEORY
Switching from running a Flutter web app to an Android Virtual Device (AVD) in Android
Studio involves a few steps. Here's a guide:

1. Stop the Flutter Web Server:

- If the Flutter web server is currently running, stop it by pressing `Ctrl + C` in the terminal or
command prompt where the web server is running.

2. Open Android Studio:

- Launch Android Studio.

3. Run Configuration:
- Ensure that your Flutter project is open in Android Studio.
- At the top of Android Studio, there is a dropdown menu with configurations (to the right of
the run and debug buttons). It usually displays `main.dart` or the name of your main entry file.
- Click on the dropdown menu and select your Android device emulator (AVD). If no AVD is
listed, click on `Edit Configurations...`.

4. Select the AVD:

- In the `Edit Configurations` window:
- Under the `Run` section, select `main.dart` (or your main entry file).
- Under `Target`, choose `Emulator`.
- Click on the `...` button to select the AVD you want to run the app on.
- Choose the desired AVD from the list or create a new one if needed.
- Click `OK` to save the configuration.

5. Run the App on AVD:

- Click on the `Run` (green triangle) button in Android Studio.
- This will deploy and run your Flutter app on the selected AVD (Android Virtual Device).

6. View the App on AVD:

Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

- The Flutter app will be launched on the selected AVD, and you'll see the app running in the
emulator.

LAB EXERCISE:
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

CONCLUSION:
We displayed “Hello World” in AVD
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

LAB # 09
CREATE A METHOD FOR BUTTON
OBJECTIVE
Create a method for button when clicked

THEORY
Properties and Customization:
onPressed: Specifies the function to be called when the button is pressed.
child: Widget representing the content of the button (usually Text widget).
style: Allows customization of the button's appearance such as text style, padding, shape,
background color, and more.
icon: Property in certain button types to include an icon along with text.

Button Behavior:
Buttons can trigger actions like navigation to another screen, submitting a form, or executing a
function.
Buttons can be disabled using the onPressed property set to null.

Handling Button Press:

Use the onPressed property to specify a function to be executed when the button is pressed.
To handle button press events, define a function that performs the desired action when the
button is pressed.
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

LAB EXERCISE
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

Output:
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

CONCLUSION:
In this lab, I understand the concept of button’s method.
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

LAB # 10
PROFILE CARD
OBJECTIVE
Create and display a profile card

THEORY
Here's a step-by-step guide to creating a simple profile card:

Step 1: Set up the Flutter project

1. Create a new Flutter project using your preferred development environment (such as
VSCode, Android Studio, or IntelliJ).

Step 2: Build the Profile Card

2. Open the `lib/main.dart` file.

3. Replace the existing code and include the following flutter widgets;

a) Row: `Row` widget arranges the profile picture and text.

b) Column` and Text widgets: The user details are displayed using `Column` and `Text`
widgets to arrange text vertically.

c) RichText` for Details: A `RichText` widget is used to display multiline text with
different styles. It shows an "About Me" section with a bold heading and a longer
description.

d) SizedBox: Used for adding spacing between different widgets.

Note:
- Replace the placeholder image URL with your desired image URL.
- Modify the text content and styles according to your preferences.
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

LAB EXERCISE
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

Output:
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

CONCLUSION:
We created and displayed a profile card.
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

LAB # 11
CALCULATOR APP
OBJECTIVE
Develop a calculator app

THEORY
Dart supports various arithmetic operators that enable performing arithmetic operations on
numeric values. Here are the Dart arithmetic operators:

Arithmetic Operators:

1. Addition (+):
- Adds two operands. Example;
int sum = 10 + 5; // sum is 15

2. Subtraction (-):
- Subtracts the second operand from the first. Example;
int difference = 10 - 5; // difference is 5

3. Multiplication (*):
- Multiplies two operands. Example;
int product = 10 * 5; // product is 50

4. Division (/):
- Divides the first operand by the second. Example;
double quotient = 10 / 5; // quotient is 2.0 (double due to numeric types)

5. Integer Division (~/):

- Divides the first operand by the second and returns an integer result (floor division).
Example;
int integerQuotient = 10 ~/ 3; // integerQuotient is 3

6. Modulo (%):
- Returns the remainder of the division between the first and second operands. Example;
int remainder = 10 % 3; // remainder is 1

These operators work with numeric types (integers and doubles) and allow performing various
arithmetic calculations within Dart. Understanding and using these operators can help in
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

performing mathematical computations an d handling numerical data in Dart programming,

including within Flutter applications.

LAB EXERCISE
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

Output:
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

Addition Divison

CONCLUSION:
We created a calculator app.
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

LAB # 12
SPLASH SCREEN
OBJECTIVE
Develop a splash screen

THEORY
To create a simple splash screen in Flutter :

1. Create a Splash Screen Widget: In your `main.dart` file or wherever your app starts, create
a custom `SplashScreen` widget that displays your splash screen content for a certain duration
before navigating to the main screen:

2. Modify Splash Screen Content: Inside the `SplashScreenState` widget's `build` method,
customize the `Scaffold` body to display your desired splash screen content.

3. Navigate to Main Screen: In the `initState` method of `_SplashScreenState`, set a `Timer` to

navigate to your main screen after a certain duration (`Duration(seconds: 3)` in this example).
Adjust the duration according to your preference.

This approach uses Flutter's `Timer` class to create a delay before navigating to the main screen
without relying on external packages for splash screen management. Adjust the duration and
customize the splash screen content as needed for your application.

LAB EXERCISE
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

Splash screen Home screen

CONCLUSION:
We created and displayed a splash screen.
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

LAB # 13
LOGIN SCREEN AND NAVIGATION
OBJECTIVE
Develop a login screen with navigation

THEORY
To implement a login screen and navigate to a new screen in a Flutter app, you can follow these
steps:

1. Create a new Flutter project: Start by creating a new Flutter project using the `flutter
create` command in your terminal.

2. Design the login screen: Design your login screen UI using widgets like `TextField`,
`ElevatedButton`, etc.

3. Create a new screen to navigate to: Create a new screen (in this example, named
`NewScreen`) where you want to navigate after successful login.

4. Implement navigation on successful login: Inside the `onPressed` handler of your login
button, implement the logic to verify the login credentials. If the login is successful, navigate to
the new screen. For example;

Navigator.push(
context,
MaterialPageRoute(
builder: (context) => NewScreen(),
),
);

5. Run the app: Run your Flutter app using `flutter run` in the terminal or use your preferred
IDE's running/debugging options.

LAB EXERCISE
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

Login screen SignUp screen

CONCLUSION:
In this lab I created and displayed a login screen and sign up page with navigation .
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

LAB # 14
OPEN ENDED LAB

OBJECTIVE
Develop a todo list application.

THEORY
• Create a Dart project and set up the necessary files (e.g., main.dart).

• Create a Task class to represent each task with properties such as id, title, and
isCompleted.

• Create a TaskManager class to manage the list of tasks. Implement methods like
addTask, completeTask, and removeTask.

• Create a simple console-based user interface to interact with the to-do list. Use
options like adding a task, marking a task as completed, and removing a task.

This basic to-do list application allows users to interact through a console-based
interface. You can enhance it further by adding error handling, persistent storage,
a graphical user interface (GUI), or additional features based on your preferences
and skills.
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

LAB EXERCISE
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

Output:
Mobile App Development (MCS-206L) SSUET/QR/114
Nadra Arshad Roll No:2021f-bmcs-014

CONCLUSION:
I created todo list app by using all previous concept.