Department of Software Engineering
Mehran University of Engineering and Technology, Jamshoro
Course: SW327 – Mobile Application Development
Instructor Umar Farooq Practical/Lab No. 01
Date CLO 4
Signature Assessment 01
Score
Topic Setting up Development Environment for building Mobile Apps
Objectives - To make students install and configure Visual Studio Code and Flutter
Lab Discussion: Theoretical concepts and Procedural steps
In general, developing a mobile application is a complex and challenging task. There are many
frameworks available to develop a mobile application. Android provides a native framework based on
Java language and iOS provides a native framework based on Objective-C / Shift language.
However, to develop an application supporting both the OSs, we need to code in two different languages
using two different frameworks. To help overcome this complexity, there exists mobile frameworks
supporting both OS. These frameworks range from simple HTML based hybrid mobile application
framework (which uses HTML for User Interface and JavaScript for application logic) to complex
language specific framework (which do the heavy lifting of converting code to native code). Irrespective
of their simplicity or complexity, these frameworks always have many disadvantages, one of the main
drawback being their slow performance.
In this scenario, Flutter – a simple and high performance framework based on Dart language, provides
high performance by rendering the UI directly in the operating system’s canvas rather than through native
framework.
Flutter also offers many ready to use widgets (UI) to create a modern application. These widgets are
optimized for mobile environment and designing the application using widgets is as simple as designing
HTML.
To be specific, Flutter application is itself a widget. Flutter widgets also supports
animations and gestures. The application logic is based on reactive programming. Widget may
optionally have a state. By changing the state of the widget, Flutter will automatically
(reactive programming) compare the widget’s state (old and new) and render the widget
with only the necessary changes instead of re-rendering the whole widget.
Flutter Installation:
Go to URL, [Link] and follow the instructions on
the Flutter Installation page to download and setup the flutter for developing mobile applications.
Step 1: Download the Git software for your operating system
1. Click the Git for Windows link as shown in the screenshot below on the Flutter Installation page to
download the Git software for versioning of your code and the flutter framework.
Note: if your operating system is not Windows e.g. Mac OS or Linux, check out other options as per your
operating system.
2. Click the Download button on the Git website to download the setup file of Git software
3. Follow the prompts and keep the default options selected as shown in the screenshots below for
installation of Git software on your system:
i. Click the Next button to start the setup. ii. Keep default options selected and click Next.
iii. Keep the Use Vim selected and click Next. iv. Keep Let Git decide selected and click Next.
v. Select Git from command and click Next. vi. Select Use bundled OpenSSH and click Next.
vii. Select OpenSSL library and click Next. viii Select Checkout Windows-style & click Next.
ix. Select Use MinTTY and click Next. x. Select Fast-forward option and click Next.
xi. Select Git Credential Manager & click Next. xii. After installation has completed, click Finish.
Step 2: Install the Visual Studio Code (VS Code) for writing code for your application development.
1. Click the Visual Studio Code link on the Flutter Installation page for downloading the VS Code.
2. Click the Download and install Visual Studio Code link on the VS Code installation page
3. Click the Visual Studio Code installer link as shown in the screenshot below to download the setup.
4. Open the downloaded setup file and follow the prompts as shown in the screenshots below to install
the VS Code editor on your system.
i. Click the I accept agreement and click Next. ii. Select the desktop icon option and click Next.
iii. Click the Install button to start installation. iv. Click the Finish button to finish installation.
Step 3: Download and Install the Flutter SDK for building apps with the flutter framework.
1. Scroll down to the Install the Flutter SDK section and click Download and Install button for
manual installation on the Flutter Installation page.
2. Create a new folder in the C drive and name it as FlutterSDK as shown below
Note: there should be no white space or special characters in the name or path of the folder
3. Extract or unzip the downloaded FlutterSDK file into the folder
4. Open windows search bar and type environment variables to open the system environment
variables dialog for adding the flutterSDK to the windows PATH to run flutter commands.
5. Now click Environment Variables button on the Advanced tab of this dialog
6. Select the Path variable under the User variables dialog and click Edit button
7. Now double-click an empty row and enter the path to the bin folder under the extracted flutterSDK folder as
shown in the screenshot below and click OK button
Note: If the Path entry doesn't exist, click New, type Path in the Variable Name box and enter the path to
the bin folder in the Variable Value box.
Step 4: Install the Android Studio for configuring development tools
1. Download and install the latest version of android studio from its official website.
2. Launch Android Studio and make sure to check the following components for installation
Android 15.0 (API Level 35) on SDK Platforms
Android SDK Build-Tools
Android SDK Command-line Tools
Android SDK Platform-Tools
Google USB Drivers
Also make sure that your Android SDK location is set correctly to where you installed your
Android SDK files.
Step 5: Final Steps to verify installation
1. Open a Command Prompt window with Admin Rights and run the following command to
accept lincenses
flutter doctor --android-licenses
Note: if you face the error “AndroidSDK not found” run the following command to set your
AndroidSDK location:
flutter config --android-sdk C:\AndroidSDK
2. Now run the following command to verify if the flutter and its tools are installed correctly
flutter doctor
Assessment Method
Task Completion and Instructor Observation
Outcomes Assessed
a) Ability to set up development environment (Psychomotor P3)
b) Ability to use tools for solving tasks (Psychomotor P3)
c) Ability to troubleshoot common issues (Psychomotor P3)
Lab Tasks
Task 1: Follow the guide to install Android Studio and Flutter.
Lab Rubrics for Evaluation
Rubrics Proficient (0.5) Poor
(0)
Completeness The installation is complete, and Not installed
flutter project runs successfully
Troubleshooting Students can resolve issues that Students are not able to resolve
arise during and after installation issues that arise during and after
installation.