(Flutter)

Flutter Lab 1

This document is the intellectual property of Hazza Institute of Technology, Lahore that can only be used
for particular training purposes. This material may not be quoted, photocopied, reproduced in any form
without the prior written consent of Hazza Institute of Technology.
Total Time:
3 hours

Pre-Lab Activities:

 No Pre-Lab Activity

Learning Outcomes:
 Perform the execution, debugging, testing, and profiling of mobile apps in modern IDEs.
Lab Tasks:
o To install and configure Android Studio.
o To install and configure the Emulators.
o To explore the Android Studio functionalities.

Student Activities:
o To explore Android Studio installation.
o To explore the Emulators.
o Android Studio functionalities.

This document is the intellectual property of Hazza Institute of Technology, Lahore that can only be used
for particular training purposes. This material may not be quoted, photocopied, reproduced in any form
without the prior written consent of Hazza Institute of Technology.
Lab Solutions:

1. Lab Tasks

2. 1 – Install Android Studio.

System Requirements

 Microsoft Windows 7/8/10 (32-bit or 64-bit)

 4 GB RAM minimum, 8 GB RAM recommended (plus 1 GB for the Android Emulator) 
 2 GB of available disk space minimum, 4 GB recommended (500 MB for IDE plus 1.5 GB
for Android SDK and emulator system image)
 1280 x 800 minimum screen resolution
Installation: Perform the following steps to install the Android Studio.
Step 1: Head over to this link to get the Android Studio executable or zip file. 
Step 2: Click on the Download Android Studio Button. 

Click on the “I have read and agree with the above terms and conditions” checkbox followed
by the download button. 

This document is the intellectual property of Hazza Institute of Technology, Lahore that can only be used
for particular training purposes. This material may not be quoted, photocopied, reproduced in any form
without the prior written consent of Hazza Institute of Technology.
Click on the Save file button in the appeared prompt box and the file will start downloading.  
Step 3: After the downloading has finished, open the file from downloads and run it. It will
prompt the following dialog box. 

Click on next. In the next prompt, it’ll ask for a path for installation. Choose a path and hit
next. 

This document is the intellectual property of Hazza Institute of Technology, Lahore that can only be used
for particular training purposes. This material may not be quoted, photocopied, reproduced in any form
without the prior written consent of Hazza Institute of Technology.
Step 4: It will start the installation, and once it is completed, it will be like the image shown
below. 

Click on next.

This document is the intellectual property of Hazza Institute of Technology, Lahore that can only be used
for particular training purposes. This material may not be quoted, photocopied, reproduced in any form
without the prior written consent of Hazza Institute of Technology.
Step 5: Once “Finish” is clicked, it will ask whether the previous settings need to be imported
[if the android studio had been installed earlier], or not. It is better to choose the ‘Don’t
import Settings option’.  

Click the OK button. 
Step 6: This will start the Android Studio. 

Meanwhile, it will be finding the available SDK components.

Step 7: After it has found the SDK components, it will redirect to the Welcome dialog box.  

This document is the intellectual property of Hazza Institute of Technology, Lahore that can only be used
for particular training purposes. This material may not be quoted, photocopied, reproduced in any form
without the prior written consent of Hazza Institute of Technology.
Click on Next. 

This document is the intellectual property of Hazza Institute of Technology, Lahore that can only be used
for particular training purposes. This material may not be quoted, photocopied, reproduced in any form
without the prior written consent of Hazza Institute of Technology.
Choose Standard and click on Next. Now choose the theme, whether the Light theme or
the Dark one. The light one is called the IntelliJ theme whereas the dark theme is
called Darcula. Choose as required. 

This document is the intellectual property of Hazza Institute of Technology, Lahore that can only be used
for particular training purposes. This material may not be quoted, photocopied, reproduced in any form
without the prior written consent of Hazza Institute of Technology.
Click on the Next button. 
Step 8: Now it is time to download the SDK components. 

Click on Finish. Components begin to download let it complete.

This document is the intellectual property of Hazza Institute of Technology, Lahore that can only be used
for particular training purposes. This material may not be quoted, photocopied, reproduced in any form
without the prior written consent of Hazza Institute of Technology.
The Android Studio has been successfully configured. Now it’s time to launch and build
apps. Click on the Finish button to launch it. 
Step 9: Click on Start a new Android Studio project to build a new app. 

This document is the intellectual property of Hazza Institute of Technology, Lahore that can only be used
for particular training purposes. This material may not be quoted, photocopied, reproduced in any form
without the prior written consent of Hazza Institute of Technology.
3. 2 – Create and manage virtual devices

An Android Virtual Device (AVD) is a configuration that defines the characteristics of an Android
phone, tablet, Wear OS, Android TV, or Automotive OS device that you want to simulate in
the Android Emulator. The AVD Manager is an interface you can launch from Android Studio
that helps you create and manage AVDs.

To open the AVD Manager, do one of the following:

 Select Tools > AVD Manager.

 Click AVD Manager   in the toolbar.

This document is the intellectual property of Hazza Institute of Technology, Lahore that can only be used
for particular training purposes. This material may not be quoted, photocopied, reproduced in any form
without the prior written consent of Hazza Institute of Technology.
 3.1. About AVDs

An AVD contains a hardware profile, system image, storage area, skin, and other properties.

We recommend that you create an AVD for each system image that your app could potentially
support based on the <uses-sdk> setting in your manifest.

3.1.1. Hardware profile

The hardware profile defines the characteristics of a device as shipped from the factory. The
AVD Manager comes preloaded with certain hardware profiles, such as Pixel devices, and you
can define or customize the hardware profiles as needed.

Notice that only some hardware profiles are indicated to include Play Store. This indicates that
these profiles are fully CTS compliant and may use system images that include the Play Store
app.

3.1.2. System images

A system image labeled with Google APIs includes access to Google Play services. A system
image labeled with the Google Play logo in the Play Store column includes the Google Play
Store app and access to Google Play services, including a Google Play tab in the Extended
controls dialog that provides a convenient button for updating Google Play services on the
device.

To ensure app security and a consistent experience with physical devices, system images with
the Google Play Store included are signed with a release key, which means that you cannot get
elevated privileges (root) with these images. If you require elevated privileges (root) to aid with
your app troubleshooting, you can use the Android Open Source Project (AOSP) system images
that do not include Google apps or services.

This document is the intellectual property of Hazza Institute of Technology, Lahore that can only be used
for particular training purposes. This material may not be quoted, photocopied, reproduced in any form
without the prior written consent of Hazza Institute of Technology.
 3.1.3. Storage area

The AVD has a dedicated storage area on your development machine. It stores the device user
data, such as installed apps and settings, as well as an emulated SD card. If needed, you can use
the AVD Manager to wipe user data, so the device has the same data as if it were new.

3.1.4. Skin

An emulator skin specifies the appearance of a device. The AVD Manager provides some
predefined skins. You can also define your own, or use skins provided by third parties.

3.1.5. AVD and app features

Be sure your AVD definition includes the device features your app depends on. See Hardware
Profile Properties and AVD Properties for lists of features you can define in your AVDs.

3.2. Create an AVD

Tip: If you want to launch your app into an emulator, instead run your app from Android
Studio and then in the Select Deployment Target dialog that appears, click Create New Virtual
Device.

To create a new AVD:

1. Open the AVD Manager by clicking Tools > AVD

Manager. 

2. Click Create Virtual Device, at the bottom of the AVD Manager dialog.

The Select Hardware page appears.

This document is the intellectual property of Hazza Institute of Technology, Lahore that can only be used
for particular training purposes. This material may not be quoted, photocopied, reproduced in any form
without the prior written consent of Hazza Institute of Technology.
 Notice that only some hardware profiles are indicated to include Play Store. This
indicates that these profiles are fully CTS compliant and may use system images that
include the Play Store app.
3. Select a hardware profile, and then click Next.

If you don't see the hardware profile you want, you can create or import a hardware
profile.

The System Image page appears.

This document is the intellectual property of Hazza Institute of Technology, Lahore that can only be used
for particular training purposes. This material may not be quoted, photocopied, reproduced in any form
without the prior written consent of Hazza Institute of Technology.
 4. Select the system image for a particular API level, and then click Next.

The Recommended tab lists recommended system images. The other tabs include a

more complete list. The right pane describes the selected system image. x86 images run
the fastest in the emulator.

If you see Download next to the system image, you need to click it to download the
system image. You must be connected to the internet to download it.

The API level of the target device is important, because your app won't be able to run on
a system image with an API level that's less than that required by your app, as specified
in the minSdkVersion attribute of the app manifest file. For more information about the
relationship between system API level and minSdkVersion, see Versioning Your Apps.

If your app declares a <uses-library> element in the manifest file, the app requires a
system image in which that external library is present. If you want to run your app on an
emulator, create an AVD that includes the required library. To do so, you might need to
use an add-on component for the AVD platform; for example, the Google APIs add-on
contains the Google Maps library.

The Verify Configuration page appears.

This document is the intellectual property of Hazza Institute of Technology, Lahore that can only be used
for particular training purposes. This material may not be quoted, photocopied, reproduced in any form
without the prior written consent of Hazza Institute of Technology.
 5. Change AVD properties as needed, and then click Finish.
Click Show Advanced Settings to show more settings, such as the skin.

The new AVD appears in the Your Virtual Devices page or the Select Deployment

Target dialog.

To create an AVD starting with a copy:

1. From the Your Virtual Devices page of the AVD Manager, right-click an AVD and
select Duplicate.

Or click Menu   and select Duplicate.

The Verify Configuration page appears.

2. Click Change or Previous if you need to make changes on the System Image and Select

Hardware pages.
3. Make your changes, and then click Finish.

The AVD appears in the Your Virtual Devices page.

3.3. Create a hardware profile

The AVD Manager provides predefined hardware profiles for common devices so you can easily
add them to your AVD definitions. If you need to define a different device, you can create a new

This document is the intellectual property of Hazza Institute of Technology, Lahore that can only be used
for particular training purposes. This material may not be quoted, photocopied, reproduced in any form
without the prior written consent of Hazza Institute of Technology.
hardware profile. You can define a new hardware profile from the beginning, or copy a
hardware profile as a start. The preloaded hardware profiles aren't editable.

To create a new hardware profile from the beginning:

1. In the Select Hardware page, click New Hardware Profile.

2. In the Configure Hardware Profile page, change the hardware profile properties as
needed.
3. Click Finish.

Your new hardware profile appears in the Select Hardware page. You can

optionally create an AVD that uses the hardware profile by clicking Next. Or,
click Cancel to return to the Your Virtual Devices page or Select Deployment
Target dialog.

To create a hardware profile starting with a copy:

1. In the Select Hardware page, select a hardware profile and click Clone Device.

Or right-click a hardware profile and select Clone.

2. In the Configure Hardware Profile page, change the hardware profile properties as

needed.
3. Click Finish.

Your new hardware profile appears in the Select Hardware page. You can

optionally create an AVD that uses the hardware profile by clicking Next. Or,
click Cancel to return to the Your Virtual Devices page or Select Deployment
Target dialog.

3.4. Edit existing AVDs

From the Your Virtual Devices page, you can perform the following operations on an existing
AVD:

 To edit an AVD, click Edit this AVD   and make your changes.

 To delete an AVD, right-click an AVD and select Delete. Or click Menu   and
select Delete.
 To show the associated AVD .ini and .img files on disk, right-click an AVD and
select Show on Disk. Or click Menu   and select Show on Disk.

This document is the intellectual property of Hazza Institute of Technology, Lahore that can only be used
for particular training purposes. This material may not be quoted, photocopied, reproduced in any form
without the prior written consent of Hazza Institute of Technology.
  To view AVD configuration details that you can include in any bug reports to the Android
Studio team, right-click an AVD and select View Details. Or click Menu   and
select View Details.

3.5. Edit existing hardware profiles

From the Select Hardware page, you can perform the following operations on an existing
hardware profile:

 To edit a hardware profile, select it and click Edit Device. Or right-click a hardware

profile and select Edit. Next, make your changes.
 To delete a hardware profile, right-click it and select Delete.

You can't edit or delete the predefined hardware profiles.

3.6. Run and stop an emulator, and clear data

From the Your Virtual Devices page, you can perform the following operations on an emulator:

 To run an emulator that uses an AVD, double-click the AVD. Or click Launch  .

 To stop a running emulator, right-click an AVD and select Stop. Or click Menu   and
select Stop.
 To clear the data for an emulator, and return it to the same state as when it was first
defined, right-click an AVD and select Wipe Data. Or click Menu   and select Wipe
Data.

3.7. Import and export hardware profiles

From the Select Hardware page, you can import and export hardware profiles:

 To import a hardware profile, click Import Hardware Profiles and select the XML file
containing the definition on your computer.
 To export a hardware profile, right-click it and select Export. Specify the location where
you want to store the XML file containing the definition.

3.8. Hardware profile properties

You can specify the following properties of hardware profiles in the Configure Hardware
Profile page. AVD configuration properties override hardware profile properties, and emulator
properties that you set while the emulator is running override them both.

This document is the intellectual property of Hazza Institute of Technology, Lahore that can only be used
for particular training purposes. This material may not be quoted, photocopied, reproduced in any form
without the prior written consent of Hazza Institute of Technology.
The predefined hardware profiles included with the AVD Manager aren't editable. However,
you can copy them and edit the copies.

Hardware Profile Description

Property
Device Name Name of the hardware profile. The name can contain uppercase or
lowercase letters, numbers from 0 to 9, periods (.), underscores (_),
parentheses ( () ), and spaces. The name of the file storing the
hardware profile is derived from the hardware profile name.
Device Type Select one of the following:
 Phone/Tablet

 Wear OS

 Android TV

 Chrome OS Device

Android Automotive
Screen Size The physical size of the screen, in inches, measured at the diagonal. If
the size is larger than your computer screen, it’s reduced in size at
launch.
Screen Resolution Type a width and height in pixels to specify the total number of pixels
on the simulated screen.
Round Select this option if the device has a round screen, such as some Wear
OS devices.
Memory: RAM Type a RAM size for the device and select the units, one of B (byte), KB
(kilobyte), MB (megabyte), GB (gigabyte), or TB (terabyte).
Input: Has Select this option if your device has hardware navigation buttons.
Hardware Buttons Deselect it if these buttons are implemented in software only. If you
(Back/Home/Menu) select this option, the buttons won’t appear on the screen. You can
use the emulator side panel to "press" the buttons, in either case.
Input: Has Select this option if your device has a hardware keyboard. Deselect it if
Hardware Keyboard it doesn’t. If you select this option, a keyboard won’t appear on the
screen. You can use your computer keyboard to send keystrokes to
the emulator, in either case.
Navigation Style Select one of the following:

 None - No hardware controls. Navigation is through the

software.

 D-pad - Directional Pad support.

 Trackball

This document is the intellectual property of Hazza Institute of Technology, Lahore that can only be used
for particular training purposes. This material may not be quoted, photocopied, reproduced in any form
without the prior written consent of Hazza Institute of Technology.
  Wheel

These options are for actual hardware controls on the device itself.
However, the events sent to the device by an external controller are
the same.
Supported Device Select one or both options:
States
 Portrait - Oriented taller than wide.

 Landscape - Oriented wider than tall.

If you select both, you can switch between orientations in the

emulator. You must select at least one option to continue.
Cameras To enable the camera, select one or both options:

 Back-Facing Camera - The lens faces away from the user.

 Front-Facing Camera - The lens faces toward the user.

Later, you can use a webcam or a photo provided by the emulator to

simulate taking a photo with the camera.
Sensors: Select if the device has hardware that helps the device determine its
Accelerometer orientation.
Sensors: Gyroscope Select if the device has hardware that detects rotation or twist. In
combination with an accelerometer, it can provide smoother
orientation detection and support a six-axis orientation system.
Sensors: GPS Select if the device has hardware that supports the Global Positioning
System (GPS) satellite-based navigation system.
Sensors: Proximity Select if the device has hardware that detects if the device is close to
Sensor your face during a phone call to disable input from the screen.
Default Skin Select a skin that controls what the device looks like when displayed in
the emulator. Remember that specifying a screen size that's too big
for the resolution can mean that the screen is cut off, so you can't see
the whole screen. See Create an emulator skin for more information.

3.9. AVD properties

You can specify the following properties for AVD configurations in the Verify
Configuration page. The AVD configuration specifies the interaction between the development
computer and the emulator, as well as properties you want to override in the hardware profile.

AVD configuration properties override hardware profile properties. Emulator properties that
you set while the emulator is running override them both.

This document is the intellectual property of Hazza Institute of Technology, Lahore that can only be used
for particular training purposes. This material may not be quoted, photocopied, reproduced in any form
without the prior written consent of Hazza Institute of Technology.
AVD Property Description

AVD Name Name of the AVD. The name can contain uppercase or lowercase letters,
numbers from 0 to 9, periods (.), underscores (_), parentheses ( () ),
dashes (-), and spaces. The name of the file storing the AVD configuration
is derived from the AVD name.
AVD ID The AVD filename is derived from the ID, and you can use the ID to refer
(Advanced) to the AVD from the command line.
Hardware Click Change to select a different hardware profile in the Select
Profile Hardware page.
System Image Click Change to select a different system image in the System Image page.
An active internet connection is required to download a new image.
Startup Select one option for the initial emulator orientation:
Orientation
 Portrait - Oriented taller than wide.

 Landscape - Oriented wider than tall.

An option is enabled only if it’s selected in the hardware profile. When

running the AVD in the emulator, you can change the orientation if both
portrait and landscape are supported in the hardware profile.
Camera To enable a camera, select one or both options:
(Advanced)
 Front - The lens faces away from the user.

 Back - The lens faces toward the user.

The Emulated setting produces a software-generated image, while

the Webcam setting uses your development computer webcam to take a
picture.

This option is available only if it's selected in the hardware profile; it's not
available for Wear OS and Android TV.
Network: Speed Select a network protocol to determine the speed of data transfer:
(Advanced)
 GSM - Global System for Mobile Communications

 HSCSD - High-Speed Circuit-Switched Data

 GPRS - Generic Packet Radio Service

 EDGE - Enhanced Data rates for GSM Evolution

 UMTS - Universal Mobile Telecommunications System

This document is the intellectual property of Hazza Institute of Technology, Lahore that can only be used
for particular training purposes. This material may not be quoted, photocopied, reproduced in any form
without the prior written consent of Hazza Institute of Technology.
  HSDPA - High-Speed Downlink Packet Access

 LTE - Long-Term Evolution

 Full (default) - Transfer data as quickly as your computer allows.

Network: Select a network protocol to set how much time (delay) it takes for the
Latency protocol to transfer a data packet from one point to another point.
(Advanced)
Emulated Select how graphics are rendered in the emulator:
Performance:
Graphics  Hardware - Use your computer graphics card for faster rendering.

 Software - Emulate the graphics in software, which is useful if

you're having a problem with rendering in your graphics card.

 Automatic - Let the emulator decide the best option based on your
graphics card.
Emulated  Cold boot - Start the device each time by powering up from the
Performance: device-off state.
Boot option
 Quick boot - Start the device by loading the device state from a
(Advanced)
saved snapshot. For details, see Run the emulator with Quick Boot.
Emulated Select the number of processor cores on your computer that you’d like to
Performance: use for the emulator. Using more processor cores speeds up the emulator.
Multi-Core CPU
(Advanced)
Memory and The amount of RAM on the device. This value is set by the hardware
Storage: RAM manufacturer, but you can override it, if needed, such as for faster
emulator operation. Increasing the size uses more resources on your
computer. Type a RAM size and select the units, one of B (byte), KB
(kilobyte), MB (megabyte), GB (gigabyte), or TB (terabyte).
Memory and The VM heap size. This value is set by the hardware manufacturer, but you
Storage: VM can override it, if needed. Type a heap size and select the units, one of B
Heap (byte), KB (kilobyte), MB (megabyte), GB (gigabyte), or TB (terabyte). For
more information on Android VMs, see Memory Management for
Different Virtual Machines.
Memory and The amount of nonremovable memory space available on the device. This
Storage: Internal value is set by the hardware manufacturer, but you can override it, if
Storage needed. Type a size and select the units, one of B (byte), KB (kilobyte), MB
(megabyte), GB (gigabyte), or TB (terabyte).
Memory and The amount of removable memory space available to store data on the
Storage: SD Card device. To use a virtual SD card managed by Android Studio, select Studio-
managed, type a size, and select the units, one of B (byte), KB (kilobyte),
MB (megabyte), GB (gigabyte), or TB (terabyte). A minimum of 100 MB is
This document is the intellectual property of Hazza Institute of Technology, Lahore that can only be used
for particular training purposes. This material may not be quoted, photocopied, reproduced in any form
without the prior written consent of Hazza Institute of Technology.
 recommended to use the camera. To manage the space in a file,
select External file and click ... to specify the file and location. For more
information, see mksdcard and AVD data directory.
Device Frame: Select to enable a frame around the emulator window that mimics the
Enable Device look of a real device.
Frame
Custom Skin Select a skin that controls what the device looks like when displayed in the
Definition emulator. Remember that specifying a screen size that's too big for the
(Advanced) skin can mean that the screen is cut off, so you can't see the whole screen.
See Create an emulator skin for more information.
Keyboard: Select this option if you want to use your hardware keyboard to interact
Enable Keyboard with the emulator. It's disabled for Wear OS and Android TV.
Input
(Advanced)

4. 3 - Run apps on a hardware device

When building an Android app, it's important that you always test your app on a real device
before releasing it to users. This page describes how to set up your development environment
and Android device for testing and debugging over an Android Debug Bridge (ADB) connection.

4.1. Set up a device for development

Before you can start debugging on your device, decide if you want to connect the device to
using a USB cable or Wi-Fi. Then do the following:

1. On the device, open the Settings app, select Developer options, and then enable USB

debugging (if applicable).
Note: If you do not see Developer options, follow the instructions to enable developer
options.

4.2. Connect to your device using USB

4.3. When you are set up and plugged in over USB, you can click Run   in Android
Studio to build and run your app on the device.

You can also use adb to issue commands, as follows:

 Verify that your device is connected by running the adb devices command from

your android_sdk/platform-tools/ directory. If connected, you'll see the device listed.
 Issue any adb command with the -d flag to target your device.
This document is the intellectual property of Hazza Institute of Technology, Lahore that can only be used
for particular training purposes. This material may not be quoted, photocopied, reproduced in any form
without the prior written consent of Hazza Institute of Technology.
 4.3.1. Connect to your device using Wi-Fi

Android 11 (and later) supports deploying and debugging your app wirelessly from your
workstation via Android Debug Bridge (adb). For example, you can deploy your debuggable app
to multiple remote devices without physically connecting your device via USB and contending
with common USB connection issues, such as driver installation.

To use wireless debugging, you need to pair your device to your workstation using a pairing
code. Your workstation and device must be connected to the same wireless network. To
connect to your device, follow these steps:

1. On your workstation, update to the latest version of the SDK Platform-Tools.

2. Enable the Wireless debugging option under Developer options.
3. On the dialog that asks Allow wireless debugging on this network?, click Allow.
4. Select Pair device with pairing code. Take note of the pairing code, IP address, and port
number displayed on the device (see image).
5. On your workstation, open a terminal and navigate to android_sdk/platform-tools.
6. Run adb pair ipaddr:port. Use the IP address and port number from step 3.
7. When prompted, enter the pairing code that you received in step 4. A message should
indicate that your device has been successfully paired.
8. Enter pairing code: 482924
9. Successfully paired to 192.168.1.130:37099 [guid=adb-235XY]

This document is the intellectual property of Hazza Institute of Technology, Lahore that can only be used
for particular training purposes. This material may not be quoted, photocopied, reproduced in any form
without the prior written consent of Hazza Institute of Technology.
 10. Run adb connect ipaddr:port. Use the IP address and port under Wireless
debugging (see image below).

This document is the intellectual property of Hazza Institute of Technology, Lahore that can only be used
for particular training purposes. This material may not be quoted, photocopied, reproduced in any form
without the prior written consent of Hazza Institute of Technology.