An introduction to Flutter (I Code Java - South Africa)

Flutter is a project from Google to produce cross-platform native apps for Android and iOS. Now available in a stable version, you will discover how the framework works and learn the main concepts to develop your first app.

Transcript

1. An introduction to Flutter I Code Java Conference 2019
2. An introduction to Flutter I Code Java 2019 Who am I? Edouard Marquez Android & Flutter developer @g123k edouard@marquez.cool Co-founder of the "Flutter Paris” meetup @FlutterFrance
3. An introduction to Flutter I Code Java 2019 What is Flutter? Flutter is a portable UI toolkit for building beautiful, natively-compiled applications from a single codebase. “ “ Android 4.1+ (2012) iOS 8.0+ (2014)
4. An introduction to Flutter I Code Java 2019 What is Flutter? OpenSource On every layer Native code = high speed performance
5. An introduction to Flutter I Code Java 2019 The history of everything Developer Quest
6. The language
7. An introduction to Flutter I Code Java 2019 Dart From & by Google + renewed interest Multiplatform Cli, web and Flutter
8. An introduction to Flutter I Code Java 2019 AOT mode An introduction to Flutter I Code Java 2019
9. An introduction to Flutter I Code Java 2019 JIT mode An introduction to Flutter I Code Java 2019
12. An introduction to Flutter I Code Java 2019 Pub: the dependency repository of Dart pub.dev List all packages Package Dart code only Plugin Dart code and Android/iOS
13. An introduction to Flutter I Code Java 2019 Many plugins are already available Authentification Database & Cloud Firestore Storage Analytics Messaging AdMob SQLite database (SQFLite) Preferences (~ NSUserDefaults) Data Provider / Bloc Redux RXDart Flutter Stream Friends Others Google Facebook Twitter Accounts Firebase
14. An introduction to Flutter I Code Java 2019 Flare: the Lottie of Flutter
15. The Flutter architecture
16. An introduction to Flutter I Code Java 2019 Native apps OEM Widgets GPS location Bluetooth Audio Sensors Camera Etc Platform Services Native code Application Canvas Events
17. An introduction to Flutter I Code Java 2019 WebViews (Ionic, Cordova…) Javascript WebView Application GPS location Bluetooth Audio Sensors Camera Etc Services Bridge Canvas Events Platform
18. An introduction to Flutter I Code Java 2019 React Native Javascript OEM Widgets Application GPS location Bluetooth Audio Sensors Camera Etc Services Bridge Canvas Events Platform
19. An introduction to Flutter I Code Java 2019 Flutter Native code Canvas Events Application GPS location Bluetooth Audio Sensors Camera Etc Services Widgets, Rendering Platform Channels Platform
20. An introduction to Flutter I Code Java 2019 The Flutter "stack" Material Cupertino Widgets Rendering Foundation Animation Painting Gestures Framework (Dart) Skia Dart Text Engine (C++)
21. The Widgets
22. An introduction to Flutter I Code Java 2019 The concept of "declarative UI" SwiftUI iOS / iPad OS / Mac OS / TV OS / Watch OS Jetpack Compose Android
23. An introduction to Flutter I Code Java 2019 The concept of "declarative UI" SwiftUI iOS / iPad OS / Mac OS / TV OS / Watch OS Jetpack Compose Android import SwiftUI struct Content : View { @State var model = Themes.listModel var body: some View { List(model.items, action: model.selectItem) { Image(item.image) VStack(alignement: .leading) { Text(item.title) Text(item.subtitle) .color(.gray) } } } }
24. Everything is a widget “ “
25. Everything is a widget “ “
26. Everything is a widget “ “ Composition over inheritance “ “
27. Everything is a widget “ “ Composition over inheritance “ “ Each widget is specialised “ “
28. Each widget is specialised “ “ Hello world Text("Hello world")
29. Each widget is specialised “ “ Text("Hello world", style: TextStyle(
 fontWeight: FontWeight.bold) ) Hello world
30. Each widget is specialised “ “ Text("Hello world", style: TextStyle(
 fontWeight: FontWeight.bold, color: Colors.red) ) color: Colors.red) Hello world
31. Each widget is specialised “ “ Padding( padding: EdgeInsets.all(8.0) child: Text("Hello world", style: TextStyle(
 fontWeight: FontWeight.bold, color: Colors.red) ) ) Padding( padding: EdgeInsets.all(8.0) Hello world
32. How many widgets are displayed on this screen? Quiz
33. How many widgets are displayed on this screen? Quiz 1 5 1
37. class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ Icon(Icons.people, size: 60.0), Text("Hello Johannesburg!") ], ), ); } }
38. class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ Icon(Icons.people, size: 60.0), Text("Hello Johannesburg!") ], ), ); } }
39. class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ Icon(Icons.people, size: 60.0), Text("Hello Johannesburg!") ], ), ); } }
40. class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ Icon(Icons.people, size: 60.0), Text("Hello Johannesburg!") ], ), ); } }
42. class TotalPosts extends StatelessWidget { @override Widget build(BuildContext context) { return Container( decoration: ShapeDecoration(shape: RoundedRectangleBorder()), child: Column(children: <Widget>[ Icon(Icons.photo_album), Text('260'), Text('Total posts'), Row(children: <Widget>[ Icon(Icons.trending_up), Text('26.84%') ]), ]), ); } }
43. class TotalPosts extends StatefulWidget { @override _TotalPostsState createState() => _TotalPostsState(); }
44. class _TotalPostsState extends State<TotalPosts> { int posts = 260; @override Widget build(BuildContext context) { return Container( decoration: ShapeDecoration(shape: RoundedRectangleBorder()), child: Column(children: <Widget>[ Icon(Icons.photo_album), Text('260'), Text('Total posts'), Row(children: <Widget>[ Icon(Icons.trending_up), Text('26.84%') ]), ]), ); } }
45. class _TotalPostsState extends State<TotalPosts> { int posts = 260; @override Widget build(BuildContext context) { return Container( decoration: ShapeDecoration(shape: RoundedRectangleBorder()), child: Column(children: <Widget>[ Icon(Icons.photo_album), Text('260'), Text('Total posts'), Row(children: <Widget>[ Icon(Icons.trending_up), Text('26.84%') ]), ]), ); } }
46. class _TotalPostsState extends State<TotalPosts> { int posts = 260; @override Widget build(BuildContext context) { return Container( decoration: ShapeDecoration(shape: RoundedRectangleBorder()), child: Column(children: <Widget>[ Icon(Icons.photo_album), Text(posts.toString()), Text('Total posts'), Row(children: <Widget>[ Icon(Icons.trending_up), Text('26.84%') ]), ]), ); } }
47. class _TotalPostsState extends State<TotalPosts> { int posts = 260; @override Widget build(BuildContext context) { return InkWell( onTap: () { setState(() { posts++; }); }, child: Container( child: Column(children: <Widget>[ // Same content ]) ), ); } }
48. class _TotalPostsState extends State<TotalPosts> { int posts = 260; @override Widget build(BuildContext context) { return InkWell( onTap: () { setState(() { posts++; }); }, child: Container( child: Column(children: <Widget>[ // Same content ]) ), ); } }
49. class _TotalPostsState extends State<TotalPosts> { int posts = 260; @override Widget build(BuildContext context) { return InkWell( onTap: () { setState(() { posts++; }); }, child: Container( child: Column(children: <Widget>[ // Same content ]) ), ); } }
50. The platform views
51. An introduction to Flutter I Code Java 2019 Sometimes, Flutter must make some concessions Google Maps or WebView require a lot of work to recreate them in Flutter Essential Widgets Hello ads SDK Some Widgets will never exist The solution: The Platform Views
53. Supported platforms
54. An introduction to Flutter I Code Java 2019 Android and iOS
55. An introduction to Flutter I Code Java 2019 Mix an existing native app with Flutter code Mix native & Flutter Can be integrated to any existing Android/iOS app
56. An introduction to Flutter I Code Java 2019 Communication between the Dart code and the “platforms” Method Channel Ask for a single value Stream Channel Listen to a stream of data
57. One last thing…
58. Web Desktop Embedded devices
61. Thank you! Any questions? @g123k