Tweet
Tweet

Slide 1

Slide 1 text

An introduction to Flutter I Code Java Conference 2019

Slide 2

Slide 2 text

An introduction to Flutter I Code Java 2019 Who am I? Edouard Marquez Android & Flutter developer @g123k [email protected] Co-founder of the "Flutter Paris” meetup @FlutterFrance

Slide 3

Slide 3 text

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)

Slide 4

Slide 4 text

An introduction to Flutter I Code Java 2019 What is Flutter? OpenSource On every layer Native code = high speed performance

Slide 5

Slide 5 text

An introduction to Flutter I Code Java 2019 The history of everything Developer Quest

Slide 6

Slide 6 text

The language

Slide 7

Slide 7 text

An introduction to Flutter I Code Java 2019 Dart From & by Google + renewed interest Multiplatform Cli, web and Flutter

Slide 8

Slide 8 text

An introduction to Flutter I Code Java 2019 AOT mode An introduction to Flutter I Code Java 2019

Slide 9

Slide 9 text

An introduction to Flutter I Code Java 2019 JIT mode An introduction to Flutter I Code Java 2019

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

An introduction to Flutter I Code Java 2019 Flare: the Lottie of Flutter

Slide 15

Slide 15 text

The Flutter architecture

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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++)

Slide 21

Slide 21 text

The Widgets

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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) } } } }

Slide 24

Slide 24 text

Everything is a widget “ “

Slide 25

Slide 25 text

Everything is a widget “ “

Slide 26

Slide 26 text

Everything is a widget “ “ Composition over inheritance “ “

Slide 27

Slide 27 text

Everything is a widget “ “ Composition over inheritance “ “ Each widget is specialised “ “

Slide 28

Slide 28 text

Each widget is specialised “ “ Hello world Text("Hello world")

Slide 29

Slide 29 text

Each widget is specialised “ “ Text("Hello world", style: TextStyle(
 fontWeight: FontWeight.bold) ) Hello world

Slide 30

Slide 30 text

Each widget is specialised “ “ Text("Hello world", style: TextStyle(
 fontWeight: FontWeight.bold, color: Colors.red) ) color: Colors.red) Hello world

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

How many widgets are displayed on this screen? Quiz

Slide 33

Slide 33 text

How many widgets are displayed on this screen? Quiz 1 5 1

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Column( mainAxisSize: MainAxisSize.min, children: [ Icon(Icons.people, size: 60.0), Text("Hello Johannesburg!") ], ), ); } }

Slide 38

Slide 38 text

class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Column( mainAxisSize: MainAxisSize.min, children: [ Icon(Icons.people, size: 60.0), Text("Hello Johannesburg!") ], ), ); } }

Slide 39

Slide 39 text

class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Column( mainAxisSize: MainAxisSize.min, children: [ Icon(Icons.people, size: 60.0), Text("Hello Johannesburg!") ], ), ); } }

Slide 40

Slide 40 text

class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Column( mainAxisSize: MainAxisSize.min, children: [ Icon(Icons.people, size: 60.0), Text("Hello Johannesburg!") ], ), ); } }

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

class TotalPosts extends StatelessWidget { @override Widget build(BuildContext context) { return Container( decoration: ShapeDecoration(shape: RoundedRectangleBorder()), child: Column(children: [ Icon(Icons.photo_album), Text('260'), Text('Total posts'), Row(children: [ Icon(Icons.trending_up), Text('26.84%') ]), ]), ); } }

Slide 43

Slide 43 text

class TotalPosts extends StatefulWidget { @override _TotalPostsState createState() => _TotalPostsState(); }

Slide 44

Slide 44 text

class _TotalPostsState extends State { int posts = 260; @override Widget build(BuildContext context) { return Container( decoration: ShapeDecoration(shape: RoundedRectangleBorder()), child: Column(children: [ Icon(Icons.photo_album), Text('260'), Text('Total posts'), Row(children: [ Icon(Icons.trending_up), Text('26.84%') ]), ]), ); } }

Slide 45

Slide 45 text

class _TotalPostsState extends State { int posts = 260; @override Widget build(BuildContext context) { return Container( decoration: ShapeDecoration(shape: RoundedRectangleBorder()), child: Column(children: [ Icon(Icons.photo_album), Text('260'), Text('Total posts'), Row(children: [ Icon(Icons.trending_up), Text('26.84%') ]), ]), ); } }

Slide 46

Slide 46 text

class _TotalPostsState extends State { int posts = 260; @override Widget build(BuildContext context) { return Container( decoration: ShapeDecoration(shape: RoundedRectangleBorder()), child: Column(children: [ Icon(Icons.photo_album), Text(posts.toString()), Text('Total posts'), Row(children: [ Icon(Icons.trending_up), Text('26.84%') ]), ]), ); } }

Slide 47

Slide 47 text

class _TotalPostsState extends State { int posts = 260; @override Widget build(BuildContext context) { return InkWell( onTap: () { setState(() { posts++; }); }, child: Container( child: Column(children: [ // Same content ]) ), ); } }

Slide 48

Slide 48 text

class _TotalPostsState extends State { int posts = 260; @override Widget build(BuildContext context) { return InkWell( onTap: () { setState(() { posts++; }); }, child: Container( child: Column(children: [ // Same content ]) ), ); } }

Slide 49

Slide 49 text

class _TotalPostsState extends State { int posts = 260; @override Widget build(BuildContext context) { return InkWell( onTap: () { setState(() { posts++; }); }, child: Container( child: Column(children: [ // Same content ]) ), ); } }

Slide 50

Slide 50 text

The platform views

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Supported platforms

Slide 54

Slide 54 text

An introduction to Flutter I Code Java 2019 Android and iOS

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

One last thing…

Slide 58

Slide 58 text

Web Desktop Embedded devices

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

Thank you! Any questions? @g123k