Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Developing Cross platform apps in flutter (Android, iOS, Web)

150 views

Published on

Sharing slides from my Flutter talk at SV Code Camp: https://www.siliconvalley-codecamp.com/Session/2019/developing-cross-platform-applications-using-flutter-web-android-and-ios

Published in: Technology

Developing Cross platform apps in flutter (Android, iOS, Web)

  1. 1. ~ Priyanka Tyagi Developing Cross-Platform Apps in Flutter
  2. 2. “Cross-platform development is the ability to build and deliver apps that can run across multiple device platforms.”
  3. 3. Agenda 1. Challenges 2. How Flutter helps ? 3. What is Flutter ? 4. Cross-platform Flutter project 5. Anatomy of Flutter app 6. Deployment options
  4. 4. Challenges
  5. 5. Cross-platform development is Hard.
  6. 6. Screen-form factors + Devices + Platforms = Interesting developers’ life :)
  7. 7. Credits
  8. 8. Hard for Solo developer to reach out to all platforms
  9. 9. How Flutter helps ?
  10. 10. ● Code sharing ● One code editor ● Own widgets, not dependent on OEM Widgets ● Great for Custom designs ● Decent built-in widget library of Material Design and Cupertino (iOS) widgets ● Code once, Deploy thrice !
  11. 11. What is Flutter ?
  12. 12. ● Open-sourced SDK to develop cross-platform applications (by Google) ● Flutter apps are written in Dart language ● Flutter is a complete framework which provides: ○ UI rendering & Widgets ○ State Management ○ Hardware APIs ○ Navigation ○ Testing
  13. 13. Google Trends link Popular cross-platform solutions
  14. 14. Flutter community Stats ● StackOverflow : ~23K questions ● Github issues : ~7.5K open issues ● Github stars : ~74K ● Gitter : ~9K ● Reddit FlutterDev : 20.5K Source: Google Blog
  15. 15. Native SDKs Separate apps for each platform Platform specific Widgets Different languages Source: Hackernoon
  16. 16. JS + WebViews PhoneGap (Adobe) Apache Cordova Ionic Source: Hackernoon
  17. 17. Reactive Views React Native (2015) Reactive-style views for mobile apps Context switching: JS realm ⇔ Native realm Source: Hackernoon
  18. 18. Flutter (2017) Reactive-style views Dart compiles AOT into native code for multiple platforms No JS Bridge needed Source: Hackernoon
  19. 19. Cross-platform Flutter Project
  20. 20. Download & Setup Flutter Source
  21. 21. Choose your environment
  22. 22. Creating Flutter Project
  23. 23. CLI (Command Line Interface)
  24. 24. Cross-platform Flutter Project Structure Android iOS Shared code Web
  25. 25. Dependency management `pubspec.yaml`
  26. 26. web/index.html
  27. 27. web/index.html (Firebase) Tutorial
  28. 28. Running Flutter project flutter run Android Studio CLI flutter run -d Chrome
  29. 29. iOS simulator Android emulator Chrome
  30. 30. Anatomy of Flutter App
  31. 31. Scaffold AppBar Text Center Column Text Text FAB Icon title You have pushed the button... Counter A B C A C B
  32. 32. Stateless Widget Text Icon Card Stateful Widget Checkbox Radio TextField ● Immutable ● Widgets can not be redrawn ● `build()` method is called only once ● Mutable. ● Rebuilds several time over its lifetime ● `build()` method is called multiple times
  33. 33. ● Immutable ● Widgets can not be redrawn ● `build()` method is called only once ● Mutable. ● Rebuilds several time over its lifetime ● `build()` method is called multiple times Stateless Widget Stateful Widget
  34. 34. `main.dart`
  35. 35. Unit Testing Running test: flutter test test/widget_test.dart test/widget_test.dart
  36. 36. Flutter Web : In technical preview Source: https://flutter.dev/web Until Sept- 1st week Updated: Sept- 2nd week
  37. 37. Caveats ● Flutter Web is (~was) a fork of Flutter Repo ● Not all plugins are available for Web in Dart Packages repo: pub like FlutterFire ● A set of libraries are platform specific ○ dart:html: DOM manipulation for web apps. ○ dart:io: I/O for non-web apps.
  38. 38. Launching URL Code Organization Handling Unsupported Platforms Recommendation
  39. 39. Source code
  40. 40. Custom Fonts ● Download font ● `pubspec.yaml` Using custom font
  41. 41. Developer Tooling
  42. 42. Command Line Tools ● flutter doctor: ○ Checks if your machine has all the needed packages and software to build flutter apps. ● flutter create: ○ Generates new flutter app ● flutter build: ○ Builds flutter app ● flutter run: ○ Run flutter app on attached device
  43. 43. Available Commands: `flutter help`
  44. 44. Android Studio: Flutter plugin
  45. 45. Android Studio: Live Templates
  46. 46. Flutter Outline Tool
  47. 47. Deploying Flutter Apps
  48. 48. Deploying Flutter Web App ● Generate contents in “build/” directory: ○ `flutter build web` ● Hosting compiled contents: ○ Copy contents from “build/web” directory to hosting directory “public/”
  49. 49. Deploying Flutter Native Apps ● Manually ● CodeMagic (CI/CD) ● BitRise (CI/CD) ● CircleCI (CI/CD) ● Fastlane (CD) + Travis/Cirrus (CI)
  50. 50. Codemagic (CI/CD) ● Build ● Test ● Deliver Pricing
  51. 51. Bitrise (CI/CD) ● Build ● Test ● Deliver Pricing
  52. 52. Exploring Flutter Samples code
  53. 53. flutter create --sample=<id> <your_app_name> lowercase_with_underscores Creating app from Flutter samples
  54. 54. How to get sample ids ? flutter create --list-samples=samples.json { "sourcePath": "lib/src/material/switch_list_tile.dart", "sourceLine": 255, "serial": "2", "package": "flutter", "library": "material", "element": "SwitchListTile", "id": "material.SwitchListTile.2", "file": "material.SwitchListTile.2.dart", "description": "![Switch list tile semantics sample](https://flutter.github.io/assets-for-api-docs/assets/mat erial/switch_list_tile_semantics.png)nnHere is an example of a custom labeled radio widget, callednLinkedLabelRadio, that includes an interactive [RichText] widget thatnhandles tap gestures." },
  55. 55. Creating app from Flutter sample id Run "flutter doctor" for information about installing additional components. In order to run your sample application, type: $ cd svcc19_switch_list_tile $ flutter run Your sample application code is in svcc19_switch_list_tile/lib/main.dart. flutter create --sample=material.SwitchListTile.2 svcc19_switch_list_tile 1 2 3
  56. 56. Checkout tutorial
  57. 57. Demo
  58. 58. Debugger & Profiler
  59. 59. Observatory debugger / profiler ● $ flutter run -d all An Observatory debugger and profiler on Android SDK built for x86 is available at: http://127.0.0.1:52118/b2c0_v_ywns=/ An Observatory debugger and profiler on iPhone Xʀ is available at: http://127.0.0.1:52161/MDl88nhIz78=/
  60. 60. Android emulator observatory debugger/ profiler
  61. 61. iOS simulator observatory debugger/ profiler
  62. 62. Dart DevTools Flutter Inspector -> More Actions -> Open DevTools
  63. 63. 5 months of Flutter...
  64. 64. Check-out ● Flutter-to-fly: https://flutter-to-fly.firebas eapp.com/#/ ● Github : https://github.com/ptyagic odecamp/x-flutter-landingp age Contact ● Email: ptyagicodecamp@gmail.com ● Twitter: @ptyagi13 ● Blog:https://priyankatyagi.dev Source: Designing Cross platform Flutter prototype for Landing Page (Web-Hummingbird, Android, iOS)
  65. 65. Check-out ● Flutter-to-fly: https://flutter-to-fly.firebas eapp.com/#/ ● Github : https://github.com/ptyagic odecamp/x-flutter-landingp age Contact ● Email: ptyagicodecamp@gmail.com ● Twitter: @ptyagi13 ● Blog:https://priyankatyagi.dev Part 1: Designing Cross platform Flutter prototype for Landing Page (Web-Hummingbird, Android, iOS) Part 2: Making Cross-platform Flutter Landing Page Responsive (Web-Hummingbird, Android, iOS) Part 3: Using Flutter Themes for Cross-platform Landing Page (Web-Hummingbird, Android, iOS) Part 4: Implementing Flutter FactsBot using DialogFlow Part 5: Migrating to Flutter 1.9: Implementing Cross-platform Firebase Login in Flutter Apps
  66. 66. Check-out ● Flutter-to-fly: https://flutter-to-fly.firebas eapp.com/#/ ● Github : https://github.com/ptyagic odecamp/x-flutter-landingp age Contact ● Email: ptyagicodecamp@gmail.com ● Twitter: @ptyagi13 ● Blog:https://priyankatyagi.dev
  67. 67. Useful links ● Installing Flutter ● Setting up Flutter-Web project ● https://api.flutter.dev/ ● Dart Packages for Flutter ● Flutter for Web ● Testing ● Getting started with Custom Fonts ● Google Fonts ● Flutter Inspector ● Declarative UI ● Why Dart ? ● CircleCI setup, Fastlane deployment
  68. 68. Imagery credits ● Android, iOS icons , Web icon, Android Studio icon ● iOS devices, and Android devices ● Visual Studio icon, IntelliJ Studio icon ● Team image, money image
  69. 69. Thank you !

×