Maintaining multiple code bases for the same application is often a pain in the neck for mobile developers. In the recent years, different frameworks have appeared in the market that aim to reduce the workload of developers by offering them a write-once-run-everywhere approach. In this session, Wei-Meng will take a quick look at the different frameworks available – Xamarin, React Native, and Flutter. He will focus on using Flutter and see how it makes your life as a mobile developer easier. (Language – English) Wei-Meng Lee is a technologist and founder of Developer Learning Solutions (http://www.learn2develop.net).

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

2. README

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

4. Developing for the Mobile
Platforms
• Two dominant platforms
• iOS
• Android
• Others have come and go
• Symbian
• Windows Phone
• Blackberry OS
• Bada and Tizen
• Sailfish

5. ?

6. 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
鸿蒙

7. Cross Platform
Development

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

9. 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

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

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

12. 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

13. 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

14. 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

15. 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

16. 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

17. 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

18. 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

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

20. Demo
• Creating a Flutter Project
• $ flutter create hello_world

21. 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 specific to iOS and Android; sets permission
for your app, e.g. location, Bluetooth, etc

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

23. 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

24. Widgets
• In Flutter, UI are represented as Widgets
• Widgets was inspired by React
• Widgets describe how the view should look like,
given its current configuration 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

25. Center
import 'package:flutter/material.dart';
void main() => runApp(
Center(
child:Text(
'Hello, Riga!',
textDirection: TextDirection.ltr,
),
)
);
Center is a widget that aligns another widget

26. Container
void main() => runApp(
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.

27. Child within a Container
void main() => runApp(
Center(
child: Container(
margin: const EdgeInsets.all(10.0),
color: Color(0xFFFFBF00),
width: 300.0,
height: 100.0,
child: Center(
child:Text(
'Hello, Riga!',
textDirection: TextDirection.ltr,
style:TextStyle(
color:Color(0xFF000000),
fontSize:32,
)
),
),
),
),
);

28. MaterialApp
void main() => runApp(
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.

29. Adding Widgets to the
Bodyvoid main() => runApp(
MaterialApp(
title: 'Material App Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Material App Demo'),
),
body: Center(
child: Container(
margin: const EdgeInsets.all(10.0),
color: Color(0xFFFFBF00),
width: 300.0,
height: 100.0,
child: Center(
child:Text(
'Hello, Riga!',
textDirection: TextDirection.ltr,
style:TextStyle(
color:Color(0xFF000000),
fontSize:32,
)
),
),
),
),
),
)
);

30. 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';
void main() => runApp(
CupertinoApp(
title: 'Cupertino App Demo',
home: CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: const Text('Cupertino App Demo'),
),
child: Center(
child: Text('Hello Riga'),
),
)
),
);

31. 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

32. 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;
}
}

33. Defining 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
Widget build(BuildContext context) {
return Center(
child: Container(
margin: const EdgeInsets.all(10.0),
color: Color(0xFFFFBF00),
width: 300.0,
height: 100.0,
child: Center(
child: Text(
'Hello, $name!',
textDirection: TextDirection.ltr,
style: TextStyle(
color: Color(0xFF000000),
fontSize: 32,
)
),
),
),
);
}
}

34. Using the Stateless Widget
void main() => runApp(
Directionality(
textDirection: TextDirection.ltr,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Hello, world!',
),
MyCustomWidget("Riga"),
],
),
),
),
);

35. Using the Stateless Widget
void main() => runApp(
Directionality(
textDirection: TextDirection.ltr,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Hello, world!',
),
MyCustomWidget("Riga"),
MyCustomWidget("Singapore"),
],
),
),
),
);

36. Hot Reload@override
Widget build(BuildContext context) {
return Center(
child: Container(
margin: const EdgeInsets.all(10.0),
color: Color(0xFFFFBF00),
width: 300.0,
height: 100.0,
child: Center(
child:Text(
'Welcome!, $name!',
textDirection: TextDirection.ltr,
style:TextStyle(
color: Color(0xFF000000),
fontSize:32,
)
),
),
),
);
}

37. 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
Widget build(BuildContext context) {
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

38. class _DisplayState extends State<MyCustomStatefulWidget> {
int counter = 0;
@override
Widget build(BuildContext context) {
return Center(
child: Container(
margin: const EdgeInsets.all(10.0),
color: Color(0xFFFFBF00),
width: 300.0,
height: 100.0,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
...
],
),
),
)
);
}
}

39. ...
children: <Widget>[
Text(
widget.country,
textDirection: TextDirection.ltr,
style:TextStyle(
color: Color(0xFF000000),
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),
),
),
),
),
),
],
...

40. Using the Stateful Widget
import 'package:flutter/material.dart';
void main() => runApp(
Directionality(
textDirection: TextDirection.ltr,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Hello, world!',
),
MyCustomStatefulWidget(country: "Riga"),
MyCustomStatefulWidget(country: "Singapore"),
],
),
),
),
);

41. 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.

42. Using the Stateful Widget
in a Material App
void main() => runApp(
MaterialApp(
title: 'Material App Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Material App Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Hello, world!',
),
MyCustomStatefulWidget(country: "Riga"),
MyCustomStatefulWidget(country: "Singapore"),
],
),
),
),
)
);

43. Combining Stateless and
Stateful Widgets
void main() => runApp(
MaterialApp(
title: 'Material App Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Material App Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Hello, world!',
),
MyCustomStatefulWidget(country: "Riga"),
MyCustomStatefulWidget(country: "Singapore"),
MyCustomWidget("Latvia"),
],
),
),
),
)
);

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

45. Demos

46. Thank You!