Introduction to the Flutter framework

1. Flutter
Vladimir Parfenov

2. Intro
https://flutter.io/
• Native mobile app SDK
• Android / iOS / Fuchsia / Web
• Dart programming language
2

3. Sample
3

4. Other frameworks
4
https://medium.com/@openGeeksLab/flutter-vs-react-native-what-you-need-to-know-89451da3
https://blog.novoda.com/react-native-flutter-xamarin-a-comparison/

5. How Flutter works
https://flutter.io/technical-overview/ 5

6. Widgets
6https://flutter.io/technical-overview/

7. Widgets
• != Activity
• != Fragment
• Like View…
• …but unlike View
7https://flutter.io/widgets/

8. Widgets
8
main() {
runApp(
new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.green,
),
home: new Scaffold(
appBar: new AppBar(
title: new Text("Flutter Demo"),
),
body: new Text("Hello World!"),
),
),
);
https://flutter.io/widgets/

9. Stateless Widget
• Immutable views (widgets)
• Only one time is built
• Examples: Text, Icon, IconButton, etc.
9https://flutter.io/widgets/

10. Stateless Widget
10
new Text(
'Hello! How are you?',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: new TextStyle(fontWeight: FontWeight.bold),
)
https://flutter.io/widgets/

11. Stateful Widget
• Still immutable, but…
• Contains State<W>
• Redraw after setState(() -> {}) call
• Examples: AppBar, Scaffold, TextField, etc.
11https://flutter.io/widgets/

12. Stateful widget
12
UI
Update State
User InputState
State
changes
Update state
e.g. button text
Rebuild widget
and update UI to
reflect changes

13. loadData() async {
String dataURL = "https://example.com/json";
http.Response response = await http.get(dataURL);
setState(() {
data = json.decode(response.body);
});
}
Async UI
13https://flutter.io/flutter-for-android/#async-ui

14. Layouts
14
Row
C
o
l
u
m
n
Column Stack
Co
lu
mn
…
ListView
Co
lu
mn
…
GridView
https://flutter.io/tutorials/layout/

15. Navigation
15https://flutter.io/flutter-for-android/#what-is-the-equivalent-of-an-intent-in-flutter
// Within the `FirstScreen` Widget
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new SecondScreen()),
);
}
// Within the SecondScreen Widget
onPressed: () {
Navigator.pop(context);
}

16. startActivityForResult
16
Map coordinates = await Navigator.of(context)
.push(…);
Navigator
.of(context)
.pop({"lat":43.821757,"long":-79.226392});
https://flutter.io/flutter-for-android/#what-is-the-equivalent-of-startactivityforresult

17. What does it mean for Android developers?
17
Android SDK Flutter
View / XML Widget
Activity / Fragment ~ State
Intent / FragmentManager (navigation) Navigator
Async UI async / await like JS or Kotlin coroutines
-dpi 1.0x, 2.0x, 3.0x
build.gradle pubspec.yaml
strings.xml static class Strings (till)

18. String resources
18
class Strings {
static String appName = "Flutter Demo";
static String hotels = "Hotels";
}
new MaterialApp(
title: Strings.appName,
theme: new ThemeData(
primaryColor: Colors.white,
),
home: new HotelsPage(),
),

19. Life cycle
19https://flutter.io/flutter-for-android/#how-do-i-listen-to-android-activity-lifecycle-events
AppLifecycleState
INACTIVE PAUSED RESUMED SUSPENDING
iOS only onPause() onPostResume()
onStop()
Android only

20. Platform
specific
code
20https://flutter.io/platform-channels/

21. Platform specific code
21
class _MyHomePageState extends State<MyHomePage> {
static const platform =
const MethodChannel('samples.flutter.io/battery');
// Get battery level.
String _batteryLevel = 'Unknown battery level.';
Future<Null> _getBatteryLevel() async {
String batteryLevel;
try {
final int result = await platform.invokeMethod('getBatteryLevel');
batteryLevel = 'Battery level at $result % .';
} on PlatformException catch (e) {
batteryLevel = "Failed to get battery level: '${e.message}'.";
}
setState(() {
_batteryLevel = batteryLevel;https://flutter.io/platform-channels/

22. Platform specific code
22
class MainActivity() : FlutterActivity() {
private val CHANNEL = "samples.flutter.io/battery"
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
GeneratedPluginRegistrant.registerWith(this)
MethodChannel(flutterView, CHANNEL).setMethodCallHandler { call, result ->
// TODO
}
}
}
https://flutter.io/platform-channels/

23. Platform specific code
23
@Override
public void onMethodCall(MethodCall call, Result result) {
if (call.method.equals("getBatteryLevel")) {
int batteryLevel = getBatteryLevel();
if (batteryLevel != -1) {
result.success(batteryLevel);
} else {
result.error("UNAVAILABLE", "Battery level not available.", null);
}
} else {
result.notImplemented();
}
}
https://flutter.io/platform-channels/

24. Type casts
24https://flutter.io/platform-channels/

25. Architecture
25
• Widget - View (XML, View objects, Storyboard)
• State - Activity / Fragment / ViewController without PAIN
• Presentation / Model - Other OOP / Reactive / Functional
code

26. Environments
26
Flutter version 0.3.1 beta
Dart 2

27. Other topics
• Animation and transitions
• Themes
• Serialization
• Assets
• Internationalization
• Gestures
• About Dart
27https://flutter.io/docs/

28. Fuchsia OS
28
• Open-source OS by Google
• Magenta kernel
• Support’s Android apps
• Java
• Flutter apps are native

29. Sources
• Documentation - https://flutter.io/docs/
• Flutter - https://github.com/flutter/flutter
• https://github.com/Solido/awesome-flutter
• Plugins - https://github.com/flutter/plugins
• DI - https://github.com/google/inject.dart
• Free course - https://www.udacity.com/course/build-native-
mobile-apps-with-flutter--ud905
29

30. 30
https://github.com/ParfenovVS/flutter_demo_hotels
@Vladimir_Parf
@parfenovvs
Flutter
Vladimir Parfenov
GDG SPB https://t.me/gdgspb
KUG SPB https://t.me/kug_spb