Flutter - how to make a beautiful app in an hour?

Announced at Google I/O ’17 Flutter is a new open source library for creating cross-platform mobile applications with beautiful UI. Is it something new? Is it needed? Will this be a future? In this presentation I'd like to give an overview of approach in creating mobile applications in Flutter, point advantages of this solution and present example of application. After this talk you'll be able to face a question - is Flutter something for you?

Transcript

1. Flutter
2. Flutter How to make a beautiful app in an hour?
3. Flutter How to make a beautiful app in an hour?
4. How to make a beautiful app in an hour? Flutter
5. Paulina Szklarska Android Developer @ DroidsOnRoids Toast Wrocław meetups co-org GDG Wrocław co-org Women Techmakers Wrocław lead cat owner travel enthusiast @pszklarska @pszklarska @p_szklarska
6. 1. What is Flutter? 2. How is Flutter different from other solutions? 3. How to make an app? 4. Cool, but… What about X/Y/Z? Agenda
7. What is Flutter?
8. Flutter is Google’s mobile UI framework for crafting high-quality native interfaces on iOS and Android in record time. What is Flutter?
9. Flutter What is Flutter? Android iOS
10. Flutter ❤ What is Flutter? Android iOS
11. Fast development
12. Beautiful UI
13. Native Performance
14. Native Performance
15. How is Flutter different?
16. Application Code (JS) React Native How is Flutter different?
17. How is Flutter different? Application Code (JS) Platform React Native OEM Widgets
18. How is Flutter different? Application Code (JS) Bridge Platform React Native OEM Widgets
19. How is Flutter different? Application Code (JS) Bridge Platform React Native OEM Widgets
20. How is Flutter different? Application Code (JS) Platform React Native OEM Widgets
21. How is Flutter different? Application Code (Dart) Platform Flutter custom Widgets
22. How is Flutter different?A FAST 60 fps
23. How is Flutter different? FAST 60 fps FLEXIBLE WIDGETS
24. How is Flutter different? EVERYTHING IS A WIDGETS
25. 4:10 Ali Connors
26. 4:10 Ali Connors Scaffold
27. 4:10 Ali Connors Floating ActionButton
28. Ali Connors 4:10 Row
29. Ali Connors 4:10 Center
30. Ali Connors 4:10 Padding
31. Android Equivalents Android Flutter LinearLayout Column RelativeLayout Column, Row, Stack RecyclerView ListView gestures GestureDetector padding Padding Composition > Inheritance
32. How is Flutter different?A FAST 60 fps FLEXIBLE WIDGETS NATIVE LOOK&FEEL
33. How is Flutter different?A
34. How is Flutter different?A 2013! !!! !!! !!! !!! !!!
35. How to make an app?
36. How to make an app? 3. Setup your Android/iOS device/emulator $ flutter doctor [-] Android toolchain - develop for Android devices • Android SDK at /Users/obiwan/Library/Android/sdk ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ • Try re-installing or updating your Android SDK, visit https://flutter.io/setup/#android-setup for detailed instructions. 1. Get the Flutter SDK: https://flutter.io/setup-macos/ 2. Run flutter doctor:
37. How to make an app?
38. How to make an app?
39. import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Welcome to Flutter', home: new Scaffold( ),o ); }a }a How to make an app?
40. import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Welcome to Flutter', home: new Scaffold( appBar: new AppBar( title: new Text('Welcome to Flutter'), ), body: new Column( )),o ); }a }a How to make an app?
41. import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Welcome to Flutter', home: new Scaffold( appBar: new AppBar( title: new Text('Welcome to Flutter'), ), body: new Column( children: <Widget>[ new Flexible( ),b ], )), ); }a }a How to make an app?
42. import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Welcome to Flutter', home: new Scaffold( appBar: new AppBar( title: new Text('Welcome to Flutter'), ), body: new Column( children: <Widget>[ new Flexible( child: new ListView.builder( ),c ),b ], )),a );a }a }a How to make an app?
43. import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Welcome to Flutter', home: new Scaffold( appBar: new AppBar( title: new Text('Welcome to Flutter'), ), body: new Column( children: <Widget>[ new Flexible( child: new ListView.builder( itemCount: 10, ),c ),b ], )), ); }a }a How to make an app?
44. body: new Column( children: <Widget>[ new Flexible( child: new ListView.builder( itemCount: 10, ),c ),b ], )), How to make an app?
45. body: new Column( children: <Widget>[ new Flexible( child: new ListView.builder( itemCount: 10, itemBuilder: (_, position) => new ListTile( ), ),c ),b ], )), How to make an app?
46. body: new Column( children: <Widget>[ new Flexible( child: new ListView.builder( itemCount: 10, itemBuilder: (_, position) => new ListTile( leading: new Icon(Icons.done), ), ),c ),b ], )), How to make an app?
47. body: new Column( children: <Widget>[ new Flexible( child: new ListView.builder( itemCount: 10, itemBuilder: (_, position) => new ListTile( leading: new Icon(Icons.done), ), ),c ),b ], )), How to make an app?
48. body: new Column( children: <Widget>[ new Flexible( child: new ListView.builder( itemCount: 10, itemBuilder: (_, position) => new ListTile( leading: new Icon(Icons.done), title: new Text("Tile No. $position"), ), ),c ),b ], )), How to make an app?
49. body: new Column( children: <Widget>[ new Flexible( child: new ListView.builder( itemCount: 10, itemBuilder: (_, position) => new ListTile( leading: new Icon(Icons.done), title: new Text("Tile No. $position"), subtitle: new Text("Subtitle"), ), ),c ),b ], )), How to make an app?
50. body: new Column( children: <Widget>[ new Flexible( child: new ListView.builder( itemCount: 10, itemBuilder: (_, position) => new ListTile( leading: new CircleAvatar( child: new Icon(Icons.done)), title: new Text("Tile No. $position"), subtitle: new Text("Subtitle"), ),9 ),c ),b ], )), How to make an app?
51. itemBuilder: (_, position) => new ListTile( leading: new CircleAvatar( child: new Icon(Icons.done)), title: new Text("Tile No. $position"), subtitle: new Text("Subtitle"), ),9 How to make an app?
52. itemBuilder: (_, position) => new ListTile( leading: new CircleAvatar( child: new Icon(Icons.done)), title: new Text("Tile No. $position"), subtitle: new Text(“Subtitle"), trailing: new Checkbox( value: true, onChanged: _handleCheck)), ), How to make an app?
53. itemBuilder: (_, position) => new Card( child: new ListTile( leading: new CircleAvatar( child: new Icon(Icons.done)), title: new Text("Tile No. $position"), subtitle: new Text("Subtitle"), trailing: new Checkbox( value: true, onChanged: _handleCheck)), ), How to make an app?
54. itemBuilder: (_, position) => new Padding( padding: const EdgeInsets.all(4.0), child: new Card( child: new ListTile( leading: new CircleAvatar( child: new Icon(Icons.done)), title: new Text("Tile No. $position"), subtitle: new Text("Subtitle"), trailing: new Checkbox( value: true, onChanged: _handleCheck)), ),8 ),7 How to make an app?
55. import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Welcome to Flutter’, home: new Scaffold( appBar: new AppBar( title: new Text('Welcome to Flutter'), ),a body: new Column( children: <Widget>[ new Flexible( child: new ListView.builder( itemCount: 10, itemBuilder: (_, position) => new Padding( padding: const EdgeInsets.all(4.0), child: new Card( child: new ListTile( leading: new CircleAvatar( child: new Icon(Icons.done)), title: new Text("Tile No. $position"), subtitle: new Text("Subtitle"), trailing: new Checkbox( value: true, onChanged: _handleCheck)), ),8 ),7 ),c ),b ], )), ); }a }a How to make an app?
56. home: new Scaffold( appBar: new AppBar( title: new Text('Welcome to Flutter'), ),a body: new Column( . . . );a }a How to make an app?
57. home: new Scaffold( appBar: new AppBar( title: new Text('Welcome to Flutter’), theme: new ThemeData( primarySwatch: Colors.blue, accentColor: Colors.pinkAccent ), ),a body: new Column( . . . );a }a How to make an app?
58. home: new Scaffold( appBar: new AppBar( title: new Text('Welcome to Flutter’), theme: new ThemeData( primarySwatch: Colors.purple, accentColor: Colors.pinkAccent ), ),a body: new Column( . . . );a }a How to make an app?
59. home: new Scaffold( appBar: new AppBar( title: new Text('Welcome to Flutter’), theme: new ThemeData( primarySwatch: Colors.purple, accentColor: Colors.pinkAccent ), ),a body: new Column( . . . );a }a How to make an app?
60. import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Welcome to Flutter’, theme: new ThemeData( primarySwatch: Colors.purple, accentColor: Colors.pinkAccent ), home: new Scaffold( appBar: new AppBar( title: new Text('Welcome to Flutter'), ), body: new Column( children: <Widget>[ new Flexible( child: new ListView.builder( itemCount: 10, itemBuilder: (_, position) => new Padding( padding: const EdgeInsets.all(4.0), child: new Card( child: new ListTile( leading: new CircleAvatar( child: new Icon(Icons.done)), title: new Text("Tile No. $position"), subtitle: new Text("Subtitle"), trailing: new Checkbox( value: true, onChanged: _handleCheck)), ), ), ),c ),b ], )), ); }a }a How to make an app?
61. Stateless vs. Stateful Widget
62. Stateless vs. Stateful Widget immutable (only layout, no state) no changes (new change -> new object) eg. simple Text
63. class ImmutableWidget extends StatelessWidget { @override Widget build(BuildContext context) { return new Text('Hello!'); } }
64. Stateful vs. Stateful Widget mutable (mutable state + immutable widget) can change eg. Checkbox
65. class MutableWidget extends StatefulWidget { @override MutableWidgetState createState() => new MutableWidgetState(); } class MutableWidgetState extends State<MutableWidget> { String text = "Hello!"; @override Widget build(BuildContext context) { return new Text(text); } void changeText() { setState(() { text = "Flutter!"; }); } }
66. Cool, but… What about libraries?
67. Cool, but What about libraries?
68. Dart Packages
69. Cool, but… What about camera, BLE, other services?
70. Cool, but What about camera, BLE, other services?
71. Dart Packages
72. Accessing external services Flutter app (client) iOS (host) Android (host) FlutterMethodChannel MethodChannel MethodChannel
73. Accessing external services import android.os.Bundle import io.flutter.app.FlutterActivity import io.flutter.plugin.common.MethodChannel import io.flutter.plugins.GeneratedPluginRegistrant 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 } } }
74. Accessing external services import android.os.Bundle import io.flutter.app.FlutterActivity import io.flutter.plugin.common.MethodChannel import io.flutter.plugins.GeneratedPluginRegistrant 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 } } }
75. Accessing external services 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(); }
76. Accessing external services 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(); }
77. Accessing external services 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(); }
78. Accessing external services 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(); }
79. Accessing external services static const platform = const MethodChannel('samples.flutter.io/battery'); final int result = await platform.invokeMethod('getBatteryLevel'); batteryLevel = 'Battery level at $result % .’;
80. Cool, but… What about navigation?
81. Cool, but What about navigation?
82. Navigation void main() { runApp(new MaterialApp( home: new MyAppHome(), // becomes the route named '/' routes: <String, WidgetBuilder> { '/a': (BuildContext context) => new MyPage(title: 'page A'), '/b': (BuildContext context) => new MyPage(title: 'page B'), '/c': (BuildContext context) => new MyPage(title: 'page C'), }, )); } Navigator.of(context).pushNamed('/b');
83. Cool, but… What about activity lifecycle?
84. Cool, but What about activity lifecycle?
85. Activity lifecycle events class _LifecycleWatcherState extends State<LifecycleWatcher> with WidgetsBindingObserver { AppLifecycleState _lastLifecyleState; @override void didChangeAppLifecycleState(AppLifecycleState state) { setState(() { _lastLifecyleState = state; }); } }
86. Activity lifecycle events Flutter Android iOS Description inactive — ✓ not receiving user input paused onPause() ✓ not visible to user resumed onPost Resume() ✓ visible and responding suspending onStop() — will be suspended
87. Cool, but… What about activity lifecycle?
88. Facts 1. Flutter is cool. 2. Flutter is very fast (development, application). 3. Flutter is super fun. 4. Flutter is easy to start. 5. Flutter is beautiful.
89. Useful Resources Flutter UI Codelabs https://codelabs.developers.google.com/codelabs/flutter/
90. Useful Resources Flutter Firebase Codelabs https://codelabs.developers.google.com/codelabs/flutter-firebase
91. Useful Resources GitHub Samples: https://github.com/pszklarska/HelloFlutter Flutter: https://flutter.io/ Technical Overview: https://flutter.io/technical-overview/ Keep it Simple, State (DartConf 2018) https://www.youtube.com/watch?v=zKXz3pUkw9A Flutter - 5 reasons why you may love it https://hackernoon.com/flutter-5-reasons-why-you-may-love- it-55021fdbf1aa
92. Thanks! Questions?