Introduction
Advanced Mobile Programming
ITSE-3123
Course Objective
Understand principles and best practices of mobile application development
using the Flutter framework
Learning outcomes
After Completing this course you should be able to
Explain the fundamentals of the Flutter framework
Incorporate widgets and state into your app
Use Flutter's tools to enhance your development process
Customize your app with Material Design, themes, assets, and more
Make your app interactive with text input, gestures, and more
Learning outcomes
After Completing this course you should be able to
Retrieve local and real-time data from the web
Use Location and Map services
Test mobile application
Develop multimedia applications in Android
What is Flutter
Flutter is Google’s UI toolkit for building beautiful,
natively compiled applications for mobile, web,
and desktop from a single codebase
https://flutter.dev/
Benefits of using Flutter
Fast Development
Flutter's hot reload helps you quickly and easily experiment, build UIs,
add features, and fix bugs faster
Experience sub-second reload times, without losing state, on emulators,
simulators, and hardware for iOS and Android.
Rich set of fully-customizable widgets
Benefits of using Flutter
Expressive and Flexible UI
Built-in beautiful Material Design and Cupertino (iOS-flavor) widgets,
rich motion APIs, smooth natural scrolling, and platform awareness
https://flutter.dev/showcase
Benefits of using Flutter
Native Performance
Your Flutter code is compiled to native ARM
Thus Flutter gives you full native performance on both iOS and
Android
How to set up development platform
Go to https://flutter.dev/docs/get-started/install and follow the
instruction for your platform
Set up an editor
Option One (https://flutter.dev/docs/get-started/editor?tab=androidstudio)
Install Android Studio
Install the Flutter and Dart plugins
Option Two (https://flutter.dev/docs/get-started/editor?tab=vscode)
Install VS Code
Install the Flutter and Dart plugins
Validate your setup with the Flutter Doctor
What is Dart
Dart is a client-optimized language for fast apps on any platform
Flutter is built using Dart language
https://dart.dev/
Benefits of using Dart
Optimized for UI
A programming language specialized around the needs of user
interface creation
Productive development
Make changes iteratively: use hot reload to see the result instantly in
your running app
https://dart.dev/
Benefits of using Dart
Fast on all platforms
Compile to ARM & x64 machine code for mobile, desktop, and
backend
Or compile to JavaScript for the web
https://dart.dev/
Brief introduction to Dart
Dart language features
Variables, Control flow statements, Functions, Comments,
Async, Imports, Classes, Inheritance, Mixins, Interfaces
and Abstract Classes, Exceptions
https://dart.dev/samples
Hello World
Every app has a main() function
To display text on the console, you can use the top-level print() function
void main() {
print('Hello world');
}
Variables
Even in type-safe Dart code, most variables don’t need explicit types,
thanks to type inference
1 var name = 'Voyager I';
2 var year = 1977;
3 var antennaDiameter = 3.7;
4 var flybyObjects = ['Jupiter', 'Saturn', 'Uranus'];
5 var image = {
'tags': ['saturn'], From what you already know in
'url': '//path/to/saturn.jpg' other programming languages,
guess the data type of the
}; variable
Control flow statements
If else
var year = 2019;
if (year >= 2001) {
print('21st century');
} else if (year >= 1901) {
print('20th century');
}
Control flow statements
For loop
var shapes = ['Circle', 'Rectangle', 'Triangle'];
for(var shape in shapes){
print(shape);
}
for (int i = 0; i < shapes.length; i++) {
print(shapes[i]);
}
Control flow statements
While loop
var shapes = ['Circle', 'Rectangle', 'Triangle'];
int count = 0;
while (count < shapes.length) {
print(shapes[count]);
count++;
}
Functions
It is best practice to specify the types of each function’s arguments and return
value
void main() {
print(add(2,3));
}
Recommended way of defining functions
add(x, y) { int add(int x, int y) {
return x+y;
return x+y;
}
}
Functions
A shorthand => (arrow) syntax is handy for functions that contain a single
statement
This syntax is especially useful when passing anonymous functions as
arguments
void main() {
print(add(2,3));
}
int add(int x, int y) => x+y;
Comments
// This is a normal, one-line comment.
/// This is a documentation comment, used to document
/// libraries, classes, and their members. Tools like IDEs
/// and dartdoc treat doc comments specially.
/* Multi-line comments like this is also
supported */
Imports
// Importing core libraries
import 'dart:math';
// Importing libraries from external packages
import 'package:test/test.dart';
// Importing files
import 'path/to/my_other_file.dart';
Class
import 'dart:math'; Class with two properties, two
class Circle { constructors, one method and
one getter method
double _radius;
static const double PI = 3.14;
Circle(this._radius);
Circle.inMeter(this._radius);
double area() => PI * pow(_radius, 2);
get radius => _radius;
}
Class
import 'dart:math'; Class with two properties, two
class Circle { constructors, one method and
one getter method
double _radius;
static const double PI = 3.14;
Circle(this._radius); Constructors
Circle.inMeter(this._radius);
double area() => PI * pow(_radius, 2);
get radius => _radius;
} Getter
Inheritance
Dart has single inheritance class Circle extends Shape {
double _radius;
abstract class Shape {
static const double PI = 3.14;
double area();
}
Circle(this._radius);
@override
double area() => PI * pow(_radius, 2);
get radius => _radius;
}
Mixins
Mixins are a way of reusing code in multiple class hierarchies
mixin Status { class Employee with Status{
bool fullTime; String name;
bool manager; String address;
} String salary;
}
Interfaces and abstract classes
Dart has no interface keyword
All classes implicitly define an interface.
Therefore, you can implement any class
class Circle implements Shape {
abstract class Shape {
double _r;
double area();
static const double PI = 3.14;
}
Circle(this._r);
double area() => PI * _r * _r;
}
Exceptions
To raise an exception, use throw
void main(){
int x, y;
if(x == null || y == null) {
throw StateError("x or y are null");
}
}
Exceptions
To catch an exception, use a try statement with on or catch (or both)
void main() {
int x = 1, y = 0;
try {
x / y;
} catch (IntegerDivisionByZeroException) {
print('Y cannot be zero');
}
}
Assessments
Laboratory Assignments (total mark 15 - 20 points)
Final Exam (60 points)
Project ( 20 to 25 points)
Missing any of these assessments results in incomplete (NG) grade, if you
can not bring any evidence for your abscency, eventually, the NG grade
turns to F
General Project Requirements
You should form a group with a maximum of 5 members
Select a title with the assumption of the following minimal requirements
Two business features (in addition to authentication/authorization)
You should have a backend (REST API) that provide the two functionality
Widget, Unit, Integration Testing (Bonus)
You should use Github as your git repository
Track your project progress using Kanban board on Github
Application Architecture
Project Evaluation
Final evaluation for marking/grading your work
Resources
Dart
A tour of the Dart language
(https://dart.dev/guides/language/language-tour)
Dart cheatsheet (https://dart.dev/codelabs/dart-cheatsheet)
Language Samples (https://dart.dev/samples)
Resources
Flutter
Flutter in Action, By Eric Windmill, 2020 (Text Book)
Beginning App Development with Flutter: Create Cross-Platform Mobile
Apps, By Rap Payne, 2019
Flutter Succinctly By Ed Freitas, 2019
Flutter Docs (https://flutter.dev/docs)
Build Native Mobile Apps with Flutter (https://www.udacity.com/)
