Cross Platform Mobile Development using Flutter by Wei Meng Lee at Mobile focused 75th DevClub.lv

Getting Started with Cross
Platform Development
using Flutter
Wei-Meng Lee
Developer Learning Solutions
www.learn2develop.net
@weimenglee
weimenglee@learn2develop.net

Agenda
• Cross-Platform Development Frameworks
• Getting Started with Flutter
• Demos!

Developing for the Mobile
Platforms
• Two dominant platforms
• iOS
• Android
• Others have come and go
• Symbian
• Windows Phone
• Blackberry OS
• Bada and Tizen
• Sailﬁsh

New Platform?
• Huawei’s own mobile OS - HongMeng
• Rumored to be built with the help of former Nokia engineers
• Gradually replace Android; used on smartphone, tablet, TV, automobile,
wearable; compatible with all Android apps
• Uphill task
• Needs a lot of traction to succeed
• Necessary to have a strong tool chain for developers
• Open up to the non-Chinese speaking world
• Needs a strong app-store
• Microsoft and Amazon have struggled for years
鸿蒙

Cross Platform
Development Solutions
• Hybrid Apps / Web Apps
• PhoneGap, Ionic, PWA
• True Native Apps
• Xcode, Android Studio, Xamarin, React Native,
Flutter

Xamarin
• Founded by the same people who created Mono
• Uses C#
• Now owned by Microsoft
• Has the following components:
• Xamarin.iOS
• Xamarin.Android
• Xamarin.Mac
• Xamarin.Forms

How Xamarin
Works
Shared Code
Database Access
Web Services Access
Business Logic
Android UI Code iOS UI Code
Xamarin.Android Xamarin.iOS

Xamarin.Forms
Shared Code
Database Access
Web Services Access
Business Logic
Xamarin.Forms
• UI rendered based on the platform’s UI
widget

React Native
• React Native is a JavaScript framework for writing native iOS and
Android apps
• based on React, Facebook's JavaScript library for building UI
• React Native apps are written using a mixture of:
• JavaScript
• CSS
• JSX (Javascript Extension) = JS + XML
• React Native translates your UI markup to native UI elements,
hence your app is a pure native app

How React Native Works
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
</View>
);
}
iOS
Android
???
Metro
Bundler
<View>
UIView
View
React Native
iOS
Android
JavaScriptCore
JavaScriptCore
http://localhost:8081/index.bundle?platform=android•
http://localhost:8081/index.bundle?platform
=ios
• UI rendered based on the platform’s UI widget

Flutter
• Google’s portable UI toolkit for building natively-compiled mobile,
web, and desktop apps
• Uses Google’s Dart programming language
• It has the following major components:
• Flutter engine - written in C++, provides low-levels rendering
support using Google’s Skia graphics library
• Foundation Library - written in Dart, provides a base layer of
functionality for apps and APIs to communicate with the engine
• Widgets - basic building blocks for UI

Platform Widgets
• Unlike Xamarin and React Native, Flutter does
not use the platform’s native widgets
• Instead, Flutter provides a set of widgets
(including Material Design and Cupertino
(iOS) widgets), managed and rendered by
Flutter’s framework and engine

How Flutter Works
Dart
Widgets
Render
Engine
Platform Channels
Canvas
Events
FlutterApp Platform
Camera Audio Location Sensors
Platform APIs
• Flutter does not rely on the device’s OEM widgets - it renders every
view component using its own high-performance rendering engine
• Widgets are rendered onto a Skia canvas and sent to the platform.
The platform shows the canvas and sends events back

Comparing the Frameworks
iOS Android Xamarin React Native Flutter
From Apple Google Microsoft Facebook Google
Language
Objective-C/
Swift
Java/Kotlin C# ECMAScript Dart
IDE Xcode Android Studio Visual Studio
Visual Studio
Code
Visual Studio
Code
Package
Manager
Swift Package
Manager/
CocoaPods
Gradle/Maven Nuget npm pub
UI Native Native Native Native Rendered

Dart
• Dart is a programming language developed by Google
• Similar to Java, C#, Swift, Kotlin
• For development, Dart uses JIT (Just In Time)
compilation
• For release, Dart uses AOT (Ahead Of Time) to
compile to fast native code
• Dart can also be compiled to JavaScript, to be used
on the web

Download the Dart Cheat
Sheet
• http://bit.ly/2uCSLE3

Demo
• Creating a Flutter Project
• $ flutter create hello_world

Structure of a Flutter
Project
• lib/
• Contains code for your app
• pubspec.yaml
• Stores the list of packages needed by your app
• ios/android
• Code speciﬁc to iOS and Android; sets permission
for your app, e.g. location, Bluetooth, etc

Running a Flutter Project
• $ flutter emulators
• $ flutter emulators --launch apple_ios_simulator
• $ cd hello_world
• $ flutter run

A BareBone Flutter Project
import 'package:flutter/material.dart';
void main() => runApp(
Text(
'Hello, Riga!',
textDirection: TextDirection.ltr,
),
);
runApp() has a widget argument
This argument will become the root widget for the whole app
Hot-reload has no effect on the root widget
Text is a widget

Widgets
• In Flutter, UI are represented as Widgets
• Widgets was inspired by React
• Widgets describe how the view should look like,
given its current conﬁguration and state
• When the state changes, the widget rebuilds its
description, and the framework compares it with
the previous description to determine the
minimal changes needed to update the UI

Center
Center(
child:Text(
'Hello, Riga!',
),
)
);
Center is a widget that aligns another widget

Container
Center(
child: Container(
margin: const EdgeInsets.all(10.0),
color: Color(0xFFFFBF00),
width: 100.0,
height: 100.0,
),
),
);
Container is a a convenience widget that
combines common painting, positioning, and
sizing widgets.

Child within a Container
Center(
child: Container(
width: 300.0,
height: 100.0,
child: Center(
child:Text(
'Hello, Riga!',
style:TextStyle(
color:Color(0xFF000000),
fontSize:32,
)
),
),
),
),
);

MaterialApp
MaterialApp(
title: 'Material App Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Material App Demo'),
),
body: Center(
child: Text('Hello Riga'),
),
),
)
);
• The MaterialApp class represents an
application that uses material design
• It implements the Material design language for
iOS, Android, and web.

Adding Widgets to the
Bodyvoid main() => runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
),
body: Center(
child: Container(
width: 300.0,
height: 100.0,
child: Center(
child:Text(
'Hello, Riga!',
style:TextStyle(
color:Color(0xFF000000),
fontSize:32,
)
),
),
),
),
),
)
);

CupertinoApp
• The CupertinoApp class represents an application
that uses Cupertino design
• It implements the current iOS design language based
on Apple's Human Interface Guidelines.
import 'package:flutter/cupertino.dart';
CupertinoApp(
title: 'Cupertino App Demo',
home: CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: const Text('Cupertino App Demo'),
),
child: Center(
child: Text('Hello Riga'),
),
)
),
);

Types of Widgets
• Stateless widgets
• Changing the properties of stateless widgets
has no effect on the rendering of the widget
• Stateful widgets
• Changing the properties of stately widgets will
trigger the life cycle hooks and update its UI
using the new state

Creating a Stateless Widget
• To create a stateless widget:
• Name the new Widget class
• Extend the class from StatelessWidget
• Implement the build() method, with one argument of type
BuildContext and return type of Widget
class MyCustomWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return null;
}
}

Deﬁning the Stateless Widget
class MyCustomWidget extends StatelessWidget {
// all properties in stateless widget must declare with final or const
final String name;
// class constructor
MyCustomWidget(this.name);
@override
return Center(
child: Container(
width: 300.0,
height: 100.0,
child: Center(
child: Text(
'Hello, $name!',
style: TextStyle(
color: Color(0xFF000000),
fontSize: 32,
)
),
),
),
);
}
}

Using the Stateless Widget
Directionality(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Hello, world!',
),
MyCustomWidget("Riga"),
],
),
),
),
);

Using the Stateless Widget
Directionality(
child: Center(
child: Column(
children: <Widget>[
Text(
'Hello, world!',
),
MyCustomWidget("Riga"),
MyCustomWidget("Singapore"),
],
),
),
),
);

Hot Reload@override
return Center(
child: Container(
width: 300.0,
height: 100.0,
child: Center(
child:Text(
'Welcome!, $name!',
style:TextStyle(
fontSize:32,
)
),
),
),
);
}

class MyCustomStatefulWidget extends StatefulWidget {
MyCustomStatefulWidget({Key key, this.country}) : super(key: key);
final String country;
@override
_DisplayState createState() => _DisplayState();
}
class _DisplayState extends State<MyCustomStatefulWidget> {
int counter = 0;
@override
return Center(
...
);
}
}
Stateful Widgets
Doesn’t contain state or UI
representation
Contains the state and UI
• Stateful widgets do not exist by themselves; they
require an extra class to store the state of the widget

class _DisplayState extends State<MyCustomStatefulWidget> {
int counter = 0;
@override
return Center(
child: Container(
width: 300.0,
height: 100.0,
child: Center(
child: Column(
children: <Widget>[
...
],
),
),
)
);
}
}

...
children: <Widget>[
Text(
widget.country,
style:TextStyle(
fontSize:32,
)
),
Center(
child: GestureDetector(
onTap: () {
setState(() {
++counter;
});
},
child: Container(
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Color(0xFF17A2B8),
),
child: Center(
child: Text(
'$counter',
style: TextStyle(fontSize: 25.0),
),
),
),
),
),
],
...

Using the Stateful Widget
Directionality(
child: Center(
child: Column(
children: <Widget>[
Text(
'Hello, world!',
),
MyCustomStatefulWidget(country: "Riga"),
MyCustomStatefulWidget(country: "Singapore"),
],
),
),
),
);

GestureDetector
Center(
child: GestureDetector(
onTap: () {
setState(() {
++counter;
});
},
onLongPress: () {
setState(() {
--counter;
});
},
child: Container(
…
• The GestureDetector widget
doesn’t have a visual representation
but instead detects gestures made
by the user
• When the user taps the Container,
the GestureDetector calls its
onTap callback
• You can use GestureDetector to
detect a variety of input gestures,
including taps, drags, and scales.

Using the Stateful Widget
in a Material App
MaterialApp(
home: Scaffold(
appBar: AppBar(
),
body: Center(
child: Column(
children: <Widget>[
Text(
'Hello, world!',
),
],
),
),
),
)
);

Combining Stateless and
Stateful Widgets
MaterialApp(
home: Scaffold(
appBar: AppBar(
),
body: Center(
child: Column(
children: <Widget>[
Text(
'Hello, world!',
),
MyCustomWidget("Latvia"),
],
),
),
),
)
);

Packages
• Flutter supports using shared packages contributed
by other developers
• Some commonly used packages:
• http
• location
• google_maps_flutter
• flutter_local_notifications

Cross Platform Mobile Development using Flutter by Wei Meng Lee at Mobile focused 75th DevClub.lv

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Cross Platform Mobile Development using Flutter by Wei Meng Lee at Mobile focused 75th DevClub.lv

Similar to Cross Platform Mobile Development using Flutter by Wei Meng Lee at Mobile focused 75th DevClub.lv (20)

More from DevClub_lv

More from DevClub_lv (20)

Recently uploaded

Recently uploaded (20)

Cross Platform Mobile Development using Flutter by Wei Meng Lee at Mobile focused 75th DevClub.lv