Lab # 01

Mobile Application Development

Fall 2022

Instructor Bakht Muhammad

Student Name

CMSID

Department Computer Science

Semester 5th
Lesson Set Setting up a development environment for
Flutter and Dart
1
Purpose 1. To get a basic awareness of mobile application development
2. To understand Flutter and Dart and why we are using it.
3. To learn the basics of an editor and create a simple app.

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 1.1 through 1.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 1

Lab 1.1 Pre-lab reading 30 min 5

Installing VS Code & Android
Studio

Lab 1.2 Awareness of - 9

Lab Tasks Programming

2|Page
PRE-LAB READING ASSIGNMENT

Introduction A strong open-source framework for building powerful, platform-independent

mobile apps. This is Flutter. This indicates that it enables programmers to
quickly and easily construct mobile apps that are visually appealing for both
the Android and iOS platforms using a single codebase.

What is Developed by Google, Flutter is an open-source UI toolkit to help developers

Flutter? create stunning and quick mobile, web, and desktop applications. With Flutter,
programmers can produce high-performance apps that operate natively on
Android and iOS devices, the web, and desktop computers, all from a single
codebase.

By design, the Dart programming language is used by Flutter, which also

comes with a wealth of customizable widgets and features that make it simple
to design aesthetically pleasing and responsive user interfaces.

Key Some key Flutter features and functionalities include:

Features
and  Cross-platform development: Flutter lets developers design a single
Functionaliti codebase that can operate natively on several platforms such as
es Android, iOS, web, and desktop,
 Quick development and hot reload: Flutter's hot reload functionality
allows developers to view the changes they make to the code in real-
time, without having to restart the app. This expedites and improves
the development process,
 Beautiful UIs: Flutter comes with a wealth of customizable widgets and
tools that make it simple to design user interfaces that are both
aesthetically pleasing and responsive,
 Access to native features: Flutter provides access to native features
such as camera, geolocation, and sensors, making it easy to create
apps with rich functionality,
 Fast performance: Flutter's architecture is designed for high
performance, resulting in smooth animations and fast rendering,
 Built-in testing and debugging tools: Flutter comes with built-in tools for
testing and debugging, making it easy to catch and fix issues during
the development process, and
 Open-source and growing community: Flutter is an open-source
framework with a growing community of developers who contribute to
the development of the framework and create third-party plugins and
packages that make it easier to integrate with other technologies.

In the end, Flutter is a popular go-to option for developers who are looking to
easily build and design cross-platform apps since it offers a flexible and
powerful framework for creating cutting-edge and entertaining applications
that work flawlessly on numerous platforms.

Prerequisite This Lab assumes that you already have Git installed on your Windows
s machine, if not, download it here. Also, check out this video on how to install

3|Page
 Git and get familiar with its commands on a Windows machine.

So, enough talk... Let's dive right in!!!

First, you'd need to download Android Studio. At the time of writing, the
available version is the latest, which is Android Studio Electric Eel | 2022.1.1
Patch 2 for Windows. So, expect to see a newer version when you're reading
this Lab weeks, months (or even years later).

Next, download Visual Studio Code (popularly called VS Code). Depending

on what machine you're on be it Windows, Linux or Mac, download the one
that is specified for your local machine (your computer).

Finally, download JDK by Oracle. At the time of writing this, JDK 20 has
already been released but this Lab uses JDK 19.0.2 as that's what I have
installed on my local machine.

4|Page
 Scroll down and download either of these for your Windows 10 Pro 64-bit
system

Installing & configuring JDK and JAVA_HOME

This is where the fun begins, so put on your caps and fasten your seat-belts
as we begin to install the necessary tools & software, starting with JDK... To
begin, navigate to the folder where your downloads are located and then
double-click the JDK installation file to run it. It should be named something
like "jdk_XX_OS-Name_Processor-Type_bin"

When it runs, you would be greeted by the screen above. Go ahead and click
"Next". On doing so, you would see the screen below. This is where you
would be able to customize your JDK installation. Go ahead and click
"Change"

5|Page
 By clicking "Change" from above, you would be able to customize your JDK
installation. Ensure that the directory for the JDK does not have any
"whitespaces". Notice how mine is set up from the picture below. I would
explain what "whitespaces" are shortly.

The installation process should take a few minutes, depending on your

system specs. At some point, Windows would request User Access Control.
Just simply allow it by clicking "Yes". Shortly afterwards, you should see the
screen below. Congratulations, you've successfully installed JDK. Your JDK
PATH directory should be similar to "C:\Users\Dexter\java\jdk19.02" and You
can click on "Close" now.

6|Page
 To set the "JAVA_HOME" variable, search "PATH" from Windows Search and
click on the first option above named "Edit the system environment variables"
like below

7|Page
 You would then see this screen below. Click on "Environment Variables" at
the bottom right corner.

On clicking "Environment Variables", you would then see this screen below.

8|Page
 Configuring PATH on Windows can be a little tricky and you could alter a lot
for bad if you don't know what you're doing, so pay close attention to the next
steps as they are extremely crucial.

Under the "System variables" section from the image above, click on "New".
You would then be presented with this screen below.

Just like in the picture above, input "JAVA_HOME" in the "Variable name"
field. For the "Variable value" field, insert the directory of your Java
installation. Mine is pointing to "C:\Users\Dexter\java\jdk19.02" because that's
where my Java installation is housed. When you're done, click on "OK" and
yours should look nearly similar to mine, like below...

There you go! You have successfully installed Java and JDK, as well as
configured PATH on your local Windows machine. Next up, let's install and
configure Android Studio.

Installing & configuring Android Studio

Next, we would install Android Studio... By now you've downloaded Android

Studio and if not, pause right here and go download it... Take your time, I'd be
waiting for you😉. Now that you've downloaded it, allow me to walk through
the installation process.

9|Page
 You see the way I've setup the directory C:\Users\Dexter\Android\
AndroidStudio where Android Studio would be installed, and you've noticed
that there are no spaces (also known as whitespaces) in between the
characters and words. This is intentionally so when we would configure PATH
and use our command-line(terminal) when running Flutter commands
like flutter run, flutter doctor, flutter pub get and flutter upgrade etc. More on
that later

Please, don't mind the checkbox saying something about "Uninstalling the
previous version". That is displayed because I already have Android Studio
fully installed and configured on my local machine.

The installation process should take 30 minutes or less, depending on your

internet speed and system specs. The process would take you through setting
up Android Studio for the first time and it would install the latest SDKs,
libraries & platform tools.

You'd get to a point in the installation process where you would be required to
install Android SDKs to a certain directory on your local machine. Do you
remember our "no spaces" rule from earlier? It also applies here when
installing Android SDK because of PATH.

When the installation is done, you would be greeted by this screen below.

10 | P a g e
 But there's still work to be done. Click on the "More Actions" button from the
shot above and then click on "SDK Manager", which would then display this
screen below.

From the shot above, the PATH for your own Android SDK installation would
most likely not be the same as mine C:\Users\Dexter\Android\android-sdk,
and that's totally fine, but ensure that you obey the "no spaces" rule
mentioned earlier. When at the screen above, you are to check the boxes of a
couple of options under the "SDK Platforms" tab as these are a must-have,

11 | P a g e
 like I did above. Don't click "Apply" or "OK" just yet. Next, click on the "SDK
Tools" tab and select a couple of options like I did in the screen below.

NOTE - I prefer to use a physical device (my Android device) as my emulator

when developing for mobile, as opposed to setting up and running a virtual
device. That's why I didn't check the "Android Emulator" option in the screen
above.

Now, go ahead an click "Apply".

You would then see a modal box asking you to confirm the packages you
want installed, like in the shot above. Click on "OK"

12 | P a g e
 Next, you would be greeted by the "License Agreement" window. Select
"Accept" and click "Next".

Just like in the shot below, you should wait until the setup process is done. If
your internet or power goes out during this process, you would have to start
this step all over.

When everything is done and completed, just like in the shot below, go ahead
and click on "Finish".

13 | P a g e
 And with that, you've successfully installed Android SDK tools, packages &
platforms on your local machine. But we're not done yet. From the main
screen, click on "Plugins" in the left pane and you should be greeted with this
screen below, where you can see the "Plugins" menu.

In this menu, you can search for plugins to download in the "Marketplace" tab
at the top, while the "Installed" tab has every plugin you've already installed.
Under the "Marketplace" tab, search for the "Flutter", "Dart" and "Gradle"
plugins. They are all free to install and use. When you search for and install
them, you would have to restart Android Studio to enable the installed plugins.
You can do that by simply clicking on "Restart IDE" when it appears against
any of the plugins you've installed.

NOTE -You don't have to restart Android Studio after every plugin you've
installed. Instead, install all the necessary plugins before restarting Android
Studio.

14 | P a g e
 Installing & configuring VS Code

VS Code, the last software development tool we would install. Earlier on, you
should have already downloaded VS Code. Go ahead and run the VS Code
installation executable file and you should be greeted by the screen below.

From above, select the "I accept the agreement" option and then click on
"Next"

Next up, you would see this screen with a couple of installation options. Just
like in the shot below, check all options as it would enable you to be able to
customize how you want VS Code to be installed on your local machine.
Then, click on "Next".

You should see the screen below that gives a summary of the options you
selected previously. Then, click on "Install".

15 | P a g e
 On clicking "Install", the installer would start its magic, like in the screen
below. Allow the installer to finish up the process automatically and don't
tamper with it.

Finally, you would see this screen below of your VS Code running. Yours
won't look like mine because I've already customized mine to my taste, but
you'd definitely see the "Welcome" page in VS Code.

Installing & configuring the Flutter SDK

Hey, you've made it this far, and that's really commendable. Now, it's time to
install Flutter SDK. Go ahead and download the latest version from

16 | P a g e
 the Flutter's official website. At the moment of writing
this, flutter_windows_3.7.9-stable is the latest.

When it's downloaded, extract it and place the extracted folder named "flutter"
in a directory (or PATH) that follows our "no spaces" rule from above. Mine
looks like this C:\Users\Dexter\flutter

Next, fire up a command-line shell and run the command

flutter --version and this should print out the Flutter version installed on your
local machine.

Next, you would run flutter doctor for the first time. You would have a screen
similar to below.

17 | P a g e
 Don't panic just yet, if you have issues with "Android SDK Licenses".

Simply run the command flutter doctor --android-licenses from within the
same command-line shell window and accept all the Android SDK licenses.

NOTE - Don't worry about the 2 warnings you see with regards Chrome and
Visual Studio. I don't have Chrome installed because I prefer Microsoft Edge.
As for Visual Studio, we would install it and the necessary components in an
Lab when we want to develop desktop apps for Windows using Flutter

18 | P a g e
 PRELAB WRITING ASSIGNMENT

Fill in the 1. ________ is an open-source UI toolkit to help developers create stunning

blanks
and quick mobile, web, and desktop applications.
2. By design, the ________ programming language is used by Flutter.
3. Flutter's ________ functionality allows developers to view the changes they
make to the code in real-time.
4. ________ is used to install the necessary plugins for VS Code.
5. The command ________ is run to accept all Android SDK licenses during
the setup process.

19 | P a g e
 Lab 1.2 Lab Tasks

1. Create a Basic Flutter App that displays your name

 Screenshot should be pasted here.

 GitHub Repository link.

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

20 | P a g e