Developing cross platform apps in Flutter (Android, iOS, and Web)
0 likes343 views
The document outlines the development of cross-platform applications using Flutter, emphasizing its capabilities such as code sharing, custom design capabilities, and the use of the Dart programming language. It discusses the challenges of cross-platform development, provides an overview of Flutter's architecture, deployment options, and developer tools, and highlights how Flutter streamlines app creation across multiple platforms. Additionally, it includes resources for getting started, sample projects, and community engagement around Flutter.
nnHere is an example of a
custom labeled radio widget, callednLinkedLabelRadio, that
includes an interactive [RichText] widget thatnhandles tap
gestures."
},](https://image.slidesharecdn.com/3-191017194723/85/Developing-cross-platform-apps-in-Flutter-Android-iOS-and-Web-58-320.jpg)
Developing cross platform apps in Flutter (Android, iOS, and Web)
- 1. Developing Cross-Platform Apps in Flutter ~ Priyanka Tyagi
- 2. “Cross-platform development is the ability to build and deliver apps that can run across multiple device platforms.”
- 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. Challenges
- 6. Screen-form factors + Devices + Platforms = Interesting developers’ life :)
- 7. Credits
- 8. Hard for Solo developer to reach out to all platforms
- 10. How Flutter helps ?
- 11. ● Code sharing across multiple platforms ● One code editor for all platforms ● 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 !
- 12. What is Flutter ?
- 13. ● 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
- 15. Flutter community Stats ● StackOverflow : ~23K questions ● Github issues : ~7.5K open issues ● Github stars : ~74K ● Gitter : ~9K ● Reddit FlutterDev : 20.5K Source: Google Blog
- 16. Native SDKs Separate apps for each platform Platform specific Widgets Different languages Source: Hackernoon
- 17. JS + WebViews PhoneGap (Adobe) Apache Cordova Ionic Source: Hackernoon
- 18. Reactive Views React Native (2015) Reactive-style views for mobile apps Context switching: JS realm ⇔ Native realm Source: Hackernoon
- 19. Flutter (2017) Reactive-style views Dart compiles AOT into native code for multiple platforms No JS Bridge needed Source: Hackernoon
- 21. Download & Setup Flutter Source
- 25. CLI (Command Line Interface)
- 26. Cross-platform Flutter Project Structure Android iOS Shared code Web
- 28. web/index.html
- 30. Running Flutter project flutter run Android Studio CLI flutter run -d Chrome
- 31. iOS simulator Android emulator Chrome
- 32. Anatomy of Flutter App
- 33. Scaffold AppBar Text Center Column Text Text FAB Icon title You have pushed the button... Counter A B C A C B
- 34. 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
- 35. ● 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
- 36. `main.dart`
- 38. Unit Testing Running test: flutter test test/widget_test.dart test/widget_test.dart
- 39. Flutter Web : In technical preview Source: https://flutter.dev/web Until Sept- 1st week Updated: Sept- 2nd week
- 40. 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.
- 41. Launching URL Code Organization Handling Unsupported Platforms
- 42. Source code
- 43. Custom Fonts ● Download font ● `pubspec.yaml` Using custom font
- 46. 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
- 47. Available Commands: `flutter help`
- 48. Android Studio: Flutter plugin
- 49. Android Studio: Live Templates
- 52. 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/”
- 53. Deploying Flutter Native Apps ● Manually ● Fastlane (CD) + Travis/Cirrus (CI) ● CodeMagic (CI/CD) ● BitRise (CI/CD) ● CircleCI
- 54. Codemagic (CI/CD) ● Build ● Test ● Deliver Pricing
- 55. Bitrise (CI/CD) ● Build ● Test ● Deliver Pricing
- 56. Exploring Flutter Samples code
- 57. flutter create --sample=<id> <your_app_name> lowercase_with_underscores Creating app from Flutter samples
- 58. 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": "nnHere is an example of a custom labeled radio widget, callednLinkedLabelRadio, that includes an interactive [RichText] widget thatnhandles tap gestures." },
- 59. 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
- 62. 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=/
- 63. Android emulator observatory debugger/ profiler
- 64. iOS simulator observatory debugger/ profiler
- 65. Dart DevTools Flutter Inspector -> More Actions -> Open DevTools
- 66. 5 months of Flutter...
- 67. 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)
- 68. 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
- 69. 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
- 70. 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: https://flutter.dev/docs/get-started/flutter-for/declarative ● Why Dart ● CircleCI setup, Fastlane deployment
- 71. 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
- 72. Thank you !