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

Rapid Mobile App Development using Flutter

Rapid Mobile App Development using Flutter

Rapid Mobile App Development using Flutter

0e85b7c8ba425d53570b1fbfadb5436a?s=128

Joshua de Guzman

November 20, 2019
Tweet

Transcript

  1. Flutter Philippines Community Partner: DSC Loyola Ateneo de Manila University

  2. Flutter Philippines Community JAN 2019 Founded FEB - JUL 2019

    Interest Growth AUG 2019 - PRESENT Meetups, Study Jams, Recognized by Google Timeline Groups Facebook Flutter Philippines Community 400+ Meetup.com meetup.com/flutterph 190+
  3. Events November 20, 2019 Mobile Development Workshop @ DSC Loyola

    November 23, 2019 Flutter Philippines Online Hackathon 2019 December 11, 2019 Flutter Interact Viewing Party
  4. Rapid Mobile App Development using Flutter Speaker: Joshua de Guzman

    Mobile Software Engineer, Freelancer.com @joshuadeguzman @joshuamdeguzman
  5. 1. Flutter Intro 2. Flutter 101 3. Live Coding 4.

    Wrap up! Agenda
  6. Flutter Intro

  7. Flutter is Google’s UI Framework

  8. “To the metal” approaches “Cross platform” approaches Must fund two

    apps Two teams, codebases, & investments Inconsistent brand, features Different across devices & OEMs Poor Performance Slow, jerky, unpredictable Non-Native Look/Feel Users can tell the difference High-quality apps Platform and system integrations Fast development Quick iterations, hot reload High-performance UIs Native code, GPU accelerated Portability, reach Single codebase Challenges of mobile development today
  9. Flutter offers the best of both worlds ” Flutter combines

    native performance and quality with high-velocity development and multi-platform reach. “
  10. Flutter is a modern UI toolkit for native apps ”

    Framework (Dart) Engine (C++) Skia Dart Text Material Cupertino Widgets Rendering Animation Painting Gestures Foundation Flutter app (client) State MethodChannel FlutterMethodChannel MethodChannel iOS host Android host AppDelegate Activity FlutterViewController FlutterView iOS Platform APIs 3rd-Party APIs for iOS Android Platform APIs 3rd-Party APIs for Android
  11. Flutter is a modern UI toolkit for native apps ”

    Framework (Dart) Engine (C++) Skia Dart Text Material Cupertino Widgets Rendering Animation Painting Gestures Foundation Flutter app (client) State MethodChannel FlutterMethodChannel MethodChannel iOS host Android host AppDelegate Activity FlutterViewController FlutterView iOS Platform APIs 3rd-Party APIs for iOS Android Platform APIs 3rd-Party APIs for Android
  12. High-Velocity Development Expressive and Flexible Toolkit Native iOS and Android

    App
  13. 30 FPS 40 FPS 50 FPS 60 FPS 120 FPS

    Blazingly fast...
  14. Sub-second reload times Paint your app to life Iterate rapidly

    on features Test hypotheses quicker than ever More time to experiment & test features Single-codebase for faster collab 3X Productivity Gains High-velocity development
  15. Confidential + Proprietary Control every pixel on the screen Make

    your brand come to life Never say "no" to your designer Stand out in the marketplace Win awards with beautiful UI Flexibility and Control for beautiful UI’s
  16. Compiles to ARM native code, GPU accelerated graphics Canvas Events

    Render App Compiles directly to native ARM code Does not use a JavaScript bridge 60fps, GPU accelerated Smooth animations Deep platform integrations Natural look and feel Critical platform differences (scrolling, navigation, fonts) Natively- Apps for iOS and Android
  17. Full frame is great, use a scrim for text. Flutter

    seamlessly combines user interface widgets with 60fps animated graphics generated in real time, with the same code running on iOS and Android Graphic Horsepower
  18. Built and used by Google, developers and companies around the

    world
  19. Full frame is great, use a scrim for text.

  20. Material Design Firebase VS Code Android Studio Android APIs iOS

    APIs Redux Xcode 3rd-party Android SDKs 3rd-party iOS SDKs Works with popular tools and platforms
  21. Bring your app to the the other platform Start a

    new app from scratch Test Flutter in production with one or two screens in your existing app. You already have an iOS or Android app? Use Flutter to build for the other platform. Combine codebases when you’ve proven your Flutter app. Build your new idea in Flutter, and reach both iOS and Android at the same time. Use Flutter for a part of your app Prototype a new app idea Use Flutter to test out an app concept or idea in record time. Four ways to use Flutter today
  22. Flutter 101

  23. Types of Widgets Stateful Widgets Mutable, can be redrawn multiple

    times Stateless Widgets Immutable, build is only called once
  24. None
  25. None
  26. None
  27. None
  28. Commands Check Flutter Version, Updates, Warnings flutter doctor -v Run

    App flutter run -v Hot Reload Press “R” Hot Restart Press “Shift” + Press “R”
  29. Commands Run in Release Mode flutter run --release Run in

    Profile Mode flutter run --profile Build Compiled Binaries flutter build apk or flutter build ios
  30. Other Useful Commands Clean Flutter Directory flutter clean Run on

    a specific device flutter run -d <DEVICE_NAME>
  31. Live Coding

  32. Wrap Up!

  33. Summary • Flutter Introduction • Import 3rd party dependencies •

    Request network data using http package • Serialize and deserialize incoming JSON payload • Basic implementation of animation
  34. None
  35. Furthermore • Fork the repo, https://github.com/joshuadeguzman! • Send a pull

    request! • Let’s connect!
  36. None
  37. Thank You! Speaker: Joshua de Guzman Mobile Software Engineer, Freelancer.com

    @joshuadeguzman @joshuamdeguzman