Mobile Computing

The Flutter
Framework

Mobile Computing
APM@FEUP 1
 What is Flutter
❖ Flutter is an open-source application
development kit created by Google
• Ultimately it aims applications for
▪ Mobile (Android and iOS)
▪ Web (deployed in servers, embedded in browsers, PWA) (beta)
▪ Desktop (still in alpha)
▪ Windows (needs VS 2019)
▪ MacOS (needs XCode)
▪ Linux (needs CLang, CMake, GTK)
▪ The experimental Google OS Fuchsia
• It uses the Dart programming language and runtime
• Tools, Resources and Installation from
▪ https://flutter.dev
Mobile Computing
APM@FEUP 2
Mobile Application Approaches

Mobile Computing
APM@FEUP 3
 Web Applications for Mobile
❖ Same technologies as other web applications
• Run on the device browser and a remote server

• Limited in some features

▪ Use of device hardware and controls
▪ UX different from native
▪ Performance
Mobile Computing
APM@FEUP 4
 Popular Hybrid Frameworks
❖ Hybrid Apps run on the device and off-line
• More integrated but still with some drawbacks
▪ Non-native experience
▪ Performance problems concerning certain components

+ RhoMobile
(Tau technologies)

Mobile Computing
APM@FEUP 5
Near Native (Hybrid-native) technologies
❖ Produce and execute on native (or VM) code
• UI near the native, facilities to access the original API
▪ With good performance

JSX, JS C#
. web like separated UI specification . architecture pattern oriented (MVVM)
. separated UI specification
. Xamarin.Forms rendered with
Android / iOS native views

Dart
. widgets Mobile Computing
APM@FEUP 6
 Flutter Development Tools
❖ You can install your development tools
• Windows, MacOS, or Linux
▪ Flutter SDK, Dart SDK, Android and/or iOS SDK
▪ CLI tools
• With plugins, high level IDEs

Android Studio IntelliJ Idea Visual Studio Code Emacs

• Android app can be tested and executed in any OS

with the Android SDK
• iOS app can only be completed and executed through
a Mac with XCode and the iOS SDK
▪ A paid development license from Apple is needed (for devices)
Mobile Computing
APM@FEUP 7
 Flutter Layered Architecture
Flutter Framework – Developer interface
Main app code uses the 2 top layers
(everything is a widget)
Customizations can involve classes from the
previous-to-last layer (animations, input gestures,
drawing, …)

Flutter Engine – Set of primitives used by the

Framework. It comprises graphics (Skia), text
rendering, file and network I/O, plugin
architecture, and the Dart run-time.
This layer is exposed in the Framework as the
low-level dart:ui package

Flutter Embedder – code layer that interfaces the

native OS and their services. It provides a
connection with the native message loop, allowing
the flutter app to run on the top of a native app.
It is written in Java (Android) or Objective-C (iOS),
and C++ (all OS’s)
Flutter follows a reactive model of UI. The UI is a tree of widgets,
with a separated associated state. A change in state automatically
triggers a UI update.
UI = f( state )

(https://flutter.dev/docs/resources/architectural-overview) Mobile Computing

APM@FEUP 8
 Flutter and Native OS

Flutter UI through Widgets – draw direct in the screen represented by a canvas

receive the events generated by the user interaction

Other functionalities need calling and data exchange with native services
that is done using Flutter platform channels

Mobile Computing
APM@FEUP 9
 Flutter Side App and Widgets
❖ Flutter apps start from the Dart main() function
• A call to the Framework runApp(…) should be made
▪ The parameter should be a widget derived object, with the UI
of the app’s home page
import ‘package:flutter/… ‘; // needed Dart and Flutter imports

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp (
…
);
one of the Framework top level widgets:
} WidgetApp
} CupertinoApp
MaterialApp

Flutter project structure

▪ The top widget is usually one of the App widgets of the

Framework

Mobile Computing
APM@FEUP 10
 Widgets
❖ All the UI is made by a tree of Widgets
• Not only displayed objects, but also almost anything
related to a UI is a Widget (e.g. the GestureDetector or
the Align widget)
▪ Almost all widgets are a StatelessWidget or a StatefulWidget

we have also in the Framework:

. PreferredSizeWidget
. RenderObjectWidget
. ProxyWidget

Mobile Computing
APM@FEUP 11
 Stateless Widgets
❖ Stateless widgets are immutable
• They receive configuration data through the
constructor
▪ The constructor calls the build(…) method that returns the
widget object
▪ The build(…) cannot be called again
• To redraw a StatelessWidget a new instance must be
created

Widgets receive a BuildContext

in the build( ) method
It is a reference to the location
of a Widget in the UI tree
It can contain properties
concerning the widgets
rendering

Mobile Computing
APM@FEUP 12
 Stateless Example
...

One dog Three Dogs

in a column

composition
pattern

Mobile Computing
APM@FEUP 13
 Stateful Widgets
❖ Have an associated state object
• The state object is mutable and redraws the
immutable widget through its build() method
▪ The StatefulWidget derived class should override at least the
createState() method, that returns the associated state object
▪ The associated State class should derive the build() method
that returns the Widget (created the first time or redrawn)
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {

sometype value = initvalue;

@override
Widget build(BuildContext context) {
return Container(
… // the UI of this widget
);
}
}
Mobile Computing
APM@FEUP 14
 Stateful Lyfecycle

State object

createState() call Immediately after construction

initState() call Called after creation if overridden

build() call To create or redraw a widget tree

dependent on the state
Automatically called if state changes
(using setState() or didUpdateWidget()
setState() call Should be called with a function
parameter that changes the state
and makes a rebuild
Mobile Computing
APM@FEUP 15
Stateful Widget Example

When the user clicks

the Switch the
onChanged method
runs.

It calls setState() on
_MyHomePageState
changing the property
value.

The widgets that depend

on it (Scaffold, Switch)
are rebuilt.

Mobile Computing
APM@FEUP 16
 Some Generic Layout Widgets
The Widgets Flutter Framework library contains 935 classes and 3 exception types
Some represent the top-level app like MaterialApp or CupertinoApp and some others
the common structure of a page, like Scaffold

To organize the page (screen) widget tree there are many other widgets that can be used,
with one or multiple children.

Many visual widgets can have the depicted decorations around

them, usually defined in other widgets, like Padding,
BoxDecoration, or the Container.

Layout a list of
Column Row children in vertical
or horizontal direction

Layout the children

Stack
overlapped

Scrollable displays of other

widgets in a linear or tabular
layout Mobile Computing
APM@FEUP 17
 An Example

Top structure

The left Column

Mobile Computing
APM@FEUP 18
Some Other Widgets

Mobile Computing
APM@FEUP 19
 Page Navigation
The Navigator widget allows the replacement of a page by another using a stack discipline.
It is possible to create a set of navigation routes previously in the app, or build it when
we want to navigate to it.

void main() {
runApp(MaterialApp(
home: MyAppHome(), // becomes the route named '/'
routes: <String, WidgetBuilder> {
'/a': (BuildContext context) => MyPage(title: 'page A'),
'/b': (BuildContext context) => MyPage(title: 'page B'),
'/c': (BuildContext context) => MyPage(title: 'page C'),
},
));
} // within the MyAppHome widget
…
Or Navigator.of(context).push(MaterialPageRoute(
// within the MyAppHome widget builder: (context) => MyPage(title: ‘page B’) )
… );
Navigator.of(context).pushNamed('/b');

// within the MyPage widget

…
Navigator.of(context).pop();

Mobile Computing
APM@FEUP 20
Platform Specific Code
It is possible to call any native
functionality using MethodChanels

The concrete MethodChannel must

be implemented both in the Flutter
side, and the native side in the
interfacing FlutterView

Mobile Computing
APM@FEUP 21
Example

Mobile Computing
APM@FEUP 22
 App Architecture
. There are some difficulties in managing State and Business Logic (Domain Logic,
linked to data, and Application Logic, linked to functionalities/user operations) in
Flutter applications.
. It is not easy to adapt well known architectures, like MVC, to the Flutter app structure.
. Many architectural patterns have been proposed with corresponding plugins …
(https://flutter.dev/docs/development/data-and-backend/state-mgmt/options)
. One of them leverages the Flutter class ChangeNotifier (notifies if data changes) and
the package Provider (binds Models to the BuildContext) to implement a clean
MVC+S architecture.
(https://blog.gskinner.com/archives/2020/09/flutter-state-management-with-mvcs.html)
Provider package:
(https://pub.dev/packages/provider)

Mobile Computing
APM@FEUP 23