Slide 1

Slide 1 text

Mobile development with Flutter Thais Aquino GDG Adelaide @thaisandrade_s First steps

Slide 2

Slide 2 text

What is GDG?

Slide 3

Slide 3 text

What is Flutter? Framework to write iOS and Android APPs from a single codebase.

Slide 4

Slide 4 text

Why Flutter? Beautiful UI and animations Fast development with Hot Reload and Hot Restart One codebase compiles to native code for each platform Speedup business and development

Slide 5

Slide 5 text

2 Different codebases Sometimes features are not consistent Common native apps development Services Services OEM Widgets Canvas Events Bluetooth Location Sensors Audio Camera Etc. Platform OEM Widgets Canvas Events Bluetooth Location Sensors Audio Camera Etc. Platform

Slide 6

Slide 6 text

Flutter App Canvas Events Bluetooth Location Sensors Audio Camera Etc. Platform Your app Services Widget rendering Platform channels Draws widgets directly on platform Canvas no bridging between the framework and the widgets Services are accessed by channels

Slide 7

Slide 7 text

Other multiplatform Frameworks WebViews Canvas Events Bluetooth Location Sensors Audio Camera Etc. Platform Your app Services Bridge

Slide 8

Slide 8 text

Other multiplatform Frameworks OEM Widgets Canvas Events Bluetooth Location Sensors Audio Camera Etc. Platform Services Bridge Your app

Slide 9

Slide 9 text

Dart Strongly typed Object-oriented language Performance in development and production Static types and sound type system - catch bugs at compile time

Slide 10

Slide 10 text

Dart for mobile apps Performant in development and production JIT - recompile code directly in the device while the app is running (enables Hot Reload ) AOT - code compiled to native ARM code, enables native code starts quickly and predictable performance More about it? flutter.dev/docs/resources/faq#why-did-flutter-choose-to-use-dart

Slide 11

Slide 11 text

Widgets Each view is built as an immutable tree of widgets (almost) everything is a widget!

Slide 12

Slide 12 text

Declarative UI Dart code to create UI no XML or visual editors UI, widgets, paddings, layouts… all Dart code

Slide 13

Slide 13 text

Reactive Framework when a widget state changes (user inputs/actions) the widget rebuilds to handle the new state No extra code to update UI since is based on immutable widgets being rebuilt

Slide 14

Slide 14 text

Material and Cupertino Quickly build Material or Cupertino widgets out of the box Or you can build your own design

Slide 15

Slide 15 text

Widget Inspector

Slide 16

Slide 16 text

State Management Scoped Model Redux BLOC InheritedWidgets

Slide 17

Slide 17 text

Existing Android or iOS project Add a Flutter module to your existing app In Preview, not stable and are subject to change https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps

Slide 18

Slide 18 text

Concerns for your project Dart obfuscation issues in some devices Non-Google libs (AWS) SDK providers to support Flutter APK/IPA sizes with Flutter engine Google Play Instant is not possible with Flutter Android App Bundle (AAB) and Dynamic Delivery works since Flutter 1.2. If you do need some specific feature for your app is important to research about how it works with Flutter

Slide 19

Slide 19 text

Let’s build something!

Slide 20

Slide 20 text

A simple ListView to show Hot Reload How would you build this with Android? Demo: ListView

Slide 21

Slide 21 text

void main() { runApp(MyApp( items: List.generate(10000, (i) => "Item $i"), )); } class MyApp extends StatelessWidget { final List items; MyApp({Key key, @required this.items}) : super(key: key); @override Widget build(BuildContext context) { final title = 'Long List'; return MaterialApp( title: title, home: Scaffold( appBar: AppBar( title: Text(title), ), body: ListView.builder( itemCount: items.length, itemBuilder: (context, index) { return ListTile( leading: CircleAvatar(child: Icon(Icons.person_outline), backgroundColor: Colors.blue,), title: Text('${items[index]}'), ); }, ), ), ); } }

Slide 22

Slide 22 text

Next GDG Meetup 03/12 6pm @ DXC Technology Applications of Cloud Native Machine Learning More 2 topics TBD meetup.com/en-AU/GDG-Adelaide/events/265426487/

Slide 23

Slide 23 text

Want to present a talk? We would love to have more speakers! You don’t need to be a Jedi, just need to feel good about sharing some experience and content with the community! Submit your talk: https://forms.gle/Ky5r6MqcCsE8E6Au7

Slide 24

Slide 24 text

Thank You! Thais Aquino GDG Adelaide @thaisandrade_s