Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile development with Flutter

Thais Aquino
November 03, 2019

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

Thais Aquino

November 03, 2019
Tweet

More Decks by Thais Aquino

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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
  4. Dart Strongly typed Object-oriented language Performance in development and production

    Static types and sound type system - catch bugs at compile time
  5. 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
  6. Widgets Each view is built as an immutable tree of

    widgets (almost) everything is a widget!
  7. Declarative UI Dart code to create UI no XML or

    visual editors UI, widgets, paddings, layouts… all Dart code
  8. 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
  9. 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
  10. 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
  11. A simple ListView to show Hot Reload How would you

    build this with Android? Demo: ListView
  12. 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]}'), ); }, ), ), ); } }
  13. 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/
  14. 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