Mobile development with Flutter

Talk about the first steps with Flutter presented on GDG Adelaide Meetup 01, on Nov 6, 2019 at Oktal Sydac.
https://www.meetup.com/en-AU/GDG-Adelaide/events/265283354/

- Differences from common native app to a Flutter app
- Benefits of using Flutter
- Why does Flutter uses Dart?
- Reactive Framework
- Widgets
- Declarative UI
- Points of concern

Transcript

1. Mobile development with Flutter Thais Aquino GDG Adelaide @thaisandrade_s First steps
2. What is GDG?
3. What is Flutter? Framework to write iOS and Android APPs from a single codebase.
4. 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
5. 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
6. 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
7. Other multiplatform Frameworks WebViews Canvas Events Bluetooth Location Sensors Audio Camera Etc. Platform Your app Services Bridge
8. Other multiplatform Frameworks OEM Widgets Canvas Events Bluetooth Location Sensors Audio Camera Etc. Platform Services Bridge Your app
9. Dart Strongly typed Object-oriented language Performance in development and production Static types and sound type system - catch bugs at compile time
10. 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
11. Widgets Each view is built as an immutable tree of widgets (almost) everything is a widget!
12. Declarative UI Dart code to create UI no XML or visual editors UI, widgets, paddings, layouts… all Dart code
13. 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
14. Material and Cupertino Quickly build Material or Cupertino widgets out of the box Or you can build your own design
15. Widget Inspector
16. State Management Scoped Model Redux BLOC InheritedWidgets
17. 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
18. 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
19. Let’s build something!
20. A simple ListView to show Hot Reload How would you build this with Android? Demo: ListView
21. void main() { runApp(MyApp( items: List<String>.generate(10000, (i) => "Item $i"), )); } class MyApp extends StatelessWidget { final List<String> 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]}'), ); }, ), ), ); } }
22. 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/
23. 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
24. Thank You! Thais Aquino GDG Adelaide @thaisandrade_s