COMP5216 Mobile Computing 2024 S2

LabW11 – Flutter Tutorial

Objectives:
1. Understand Flutter development with Android Studio
2. Understand Flutter project structure and widgets
3. Learn to develop a basic flutter application
Tasks:
1. Setup Flutter with Android Studio
2. Create the first Flutter Project
3. Create your Flutter To-Do Application

School of Computer Science Page 1 of 14

 COMP5216 Mobile Computing LabW11

Flutter is an open-source framework that creates high-quality, high-

performance mobile applications across mobile operating systems, such as
Android and iOS. It provides a simple, powerful, efficient, and easy-to-
understand SDK to write mobile applications in Google’s language, Dart.
This tutorial walks through the basics of Flutter framework, installation of Flutter
SDK, setting up Android Studio to develop Flutter-based application,
architecture of Flutter framework and developing all types of mobile applications
using Flutter framework.
Task 1: Setup Flutter with Android Studio
1. Installation in Windows: For installing flutter on the windows devices,
please follow the steps below
Step 1 − Go to URL, https://flutter.dev/docs/get-started/install/windows and
download the latest Flutter SDK. As of October 2021, the version is 3.13.6
and the file is flutter_windows_3.13.6-stable.zip.
Step 2 − Unzip the zip archive in a folder, say C:\flutter\
Step 3 − Update the system path to include the flutter bin directory.
Step 4 − Flutter provides a tool, a flutter doctor to check that all the
requirement of flutter development is met.
flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.5.2 on Microsoft Windows [Version
10.0.17134.706], locale en-US)
[√] Android toolchain - develop for Android devices (Android SDK version
28.0.3)
[√] Android Studio (version 3.2)
[√] VS Code, 64-bit edition (version 1.60.2)
[!] Connected device
Step 5 − Running the above command will analyse the system and show its
report as shown below –
Step 6 − Install the latest Android SDK, if reported by flutter doctor
Step 7 − Install the latest Android Studio, if reported by flutter doctor
Step 8 − Start an Android emulator or connect a real Android device to the
system.

School of Computer Science

Page 2 of 14
 COMP5216 Mobile Computing LabW11
Step 9 − Install Flutter and Dart plugins for Android Studio. It provides a
startup template to create new Flutter applications, an option to run and
debug Flutter applications in the Android studio itself, etc.,
• Open Android Studio.
• Click File → Settings → Plugins.
• Select the Flutter plugin and click Install.
• Click Yes when prompted to install the Dart plugin.
• Restart Android Studio.
2. Installation in MacOS: To install Flutter on MacOS, you will have to follow the
following steps –
Step 1 − Go to URL, https://flutter.dev/docs/get-started/install/macos and
download the latest Flutter SDK. As of October 2022, the version is 3.13.6
and the file is flutter_macos_3.13.6- stable.zip.
Step 2 − Unzip the zip archive in a folder, say /path/to/flutter
Step 3 − Update the system path to include the flutter bin directory (in
~/.bashrc file).
> export PATH = "$PATH:/path/to/flutter/bin"
Step 4 − Enable the updated path in the current session using the below
command and then verify it as well.
flutter doctor
source ~/.bashrc
source
$HOME/.bash_profile
echo $PATH
Flutter provides a tool, a f lutter doctor to check that all the
requirement of flutter development is met. It is like the Windows counterpart.
Step 5 − Install the latest Xcode, if reported by the Flutter doctor

Step 6 − Install the latest Android SDK, if reported by Flutter doctor

Step 7 − Install the latest Android Studio, if reported by Flutter doctor

Step 8 − Start an Android emulator or connect a real Android device to the
system to develop an Android application.
Step 9 − Open an iOS simulator or connect a real iPhone device to the

School of Computer Science

Page 3 of 14
 COMP5216 Mobile Computing LabW11
system to develop an iOS application.
Step 10 − Install Flutter and Dart plugins for Android Studio. It provides the
startup template to create a new Flutter application, the option to run and
debug the Flutter application in the Android studio itself, etc.,
• Open Android Studio
• Click Preferences → Plugins
• Select the Flutter plugin and click Install
• Click Yes when prompted to install the Dart plugin.
• Restart Android Studio.
Note: If Flutter is set up correctly, we should be able to see the “New Flutter
Project” option on the Android Studio launch screen.

School of Computer Science

Page 4 of 14
 COMP5216 Mobile Computing LabW11

Task 2: Create First Flutter Project

Step 1 − Launch Android Studio

Step 2 – Click on “NEW FLUTTER PROJECT”.

Step 3: Select Flutter on the new project screen and click Next.

School of Computer Science

Page 5 of 14
 COMP5216 Mobile Computing LabW11

Step 4: On the new project screen add the following details for the project and
click Create.

• Project Name: hello_world

• Project Location: ~/AndroidStudioProjects/HelloWorld
• Description: A new flutter project
• Project Type: Application
• Organisation: comp5216.sydney.edu.au
• Android Language: Java
• Platforms: Android, iOS, Linux, MacOS, Web, Windows

Step 5 – Expand the project structure to analyse various files in the Flutter
project. Various components of the structure of the application are explained
here –
• android – Auto-generated source code to create an Android application
• ios – Auto-generated source code to create an iOS application

School of Computer Science

Page 6 of 14
 COMP5216 Mobile Computing LabW11
• lib − Main folder containing Dart code written using Flutter framework
• lib/main.dart − Entry point of the Flutter application
• test − Folder containing Dart code to test the flutter application
• test/widget_test.dart − Sample code
• .gitignore − Git version control file.
• metadata – auto-generated by the flutter tools
• .packages – auto-generated to track the flutter packages
• .iml − project file used by Android studio
• pubspec.yaml − Used by Pub, Flutter package manager
• pubspec.lock – Auto-generated by the Flutter package manager, Pub
• README.md − Project description file written in Markdown format.

Step 6 – Select the emulator and click the run button to start the application.
To debug the application, add breakpoints at the required places and click on
the debug button.

School of Computer Science

Page 7 of 14
 COMP5216 Mobile Computing LabW11

Step 7 – The emulator should launch an application as in the screenshot below.

On clicking the “+” floating button count of the counter should increase.

School of Computer Science

Page 8 of 14
 COMP5216 Mobile Computing LabW11

Task 3: Create your Flutter To-Do Application

Step 1 - Open Android Studio and click on the New Flutter Project option
(Same as Task 2).
Step 2 – Select Application as the project type and set the Flutter SDK path,
followed by clicking on the next button (Same as Task 2).
Step 3 – Add Project name: “flutter_todo_app”, location:” your workspace”,
description: “simple todo list app”, Android language: “JAVA”, Platforms. and
click create button
Step 4 - Go to lib → main.dart File. Download the “main.dart” file from Canvas
and replace the code.

The explanation for the code: Since we are going to use the navigation
system of GETX and other alerts and snackbar that’s why we have converted
MaterialApp to GetMaterialApp and we have provided our home screen as
TodoList().

School of Computer Science

Page 9 of 14
 COMP5216 Mobile Computing LabW11

Step 5 - Create a new folder Model and add a new dart file by right clicking
on the folder and select new option -> dart file. Copy the code from
model.dart from canvas to the newly created file.

Explanation: The model.dart file creates the models of our TODO application.
We will be only storing the title as Task. So, we have created a class Task and
provided a String title as the parameter.

School of Computer Science

Page 10 of 14
 COMP5216 Mobile Computing LabW11

Step 6 – Create a new folder “screens” and copy the files

“todoController.dart”, “todoList.dart”, and “addEditTask.dart” in it.
Explanation: TodoController.dart is responsible for handling the list
retrieval and loading. todoList.dart will be holding the logic to create the
todo list view with some child widgets. addEditTask.dart will create a view
with textbox and buttons to update and add new tasks.
Step 7 – Create a new folder “assets” and copy the “lists.jpeg“ file in it. Final
folder structure should appear like the screenshot below.

School of Computer Science

Page 11 of 14
 COMP5216 Mobile Computing LabW11

Step 8 – Replace the pubspec.yaml file from Canvas with the project and click
on Pub Get or Pub Upgrade at the top of the file.

Step – 9 Select the emulator and click on the run button, Mac users could
start an iOS emulator and use it as well to run the application. On building the
application final screen should appear like the screenshots below.
Google Chrome:

School of Computer Science

Page 12 of 14
 COMP5216 Mobile Computing LabW11

iOS or Android Screens:

MacOS:

School of Computer Science

Page 13 of 14
 COMP5216 Mobile Computing LabW11

References
The tutorial is partially adopted based on the materials from Flutter
Developer:
https://flutter.dev/docs/get-started/codelab
https://flutter.dev/docs/reference/tutorials
If you wish to set up Flutter app development environment, please refer to:
https://flutter.dev/docs/get-started/install/windows
https://flutter.dev/docs/get-started/install/macos

School of Computer Science

Page 14 of 14