Developing Cross-Platform

Apps in Flutter
~ Priyanka Tyagi
“Cross-platform development
is the ability to build and deliver
apps that can run across multiple
device platforms.”
Agenda

1. Challenges
2. How Flutter helps ?
3. What is Flutter ?
4. Cross-platform Flutter project
5. Anatomy of Flutter app
6. Deployment options
Challenges
Cross-platform development is
Hard.
Screen-form factors + Devices + Platforms =
Interesting developers’ life :)
Credits
Hard for Solo developer to reach out to all
platforms
How Flutter helps ?
● 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 !
What is Flutter ?
● 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
Popular
cross-platform
solutions
Google Trends link
 ● StackOverflow : ~23K questions
● Github issues : ~7.5K open issues
● Github stars : ~74K
● Gitter : ~9K
Flutter ● Reddit FlutterDev : 20.5K

community
Stats

Source: Google Blog

Native SDKs

Separate apps for

each platform

Platform specific
Widgets

Different
languages

Source: Hackernoon
JS +
WebViews

PhoneGap (Adobe)

Apache Cordova

Ionic

Source: Hackernoon
Reactive Views
React Native
(2015)

Reactive-style
views for mobile
apps

Context switching:
JS realm ⇔ Native
realm Source: Hackernoon
Flutter (2017)
Reactive-style
views

Dart compiles AOT

into native code for
multiple platforms

No JS Bridge
needed
Source: Hackernoon
Cross-platform Flutter Project
Download & Setup Flutter

Source
Choose your environment
Creating Flutter
Project
CLI (Command Line Interface)
Cross-platform Flutter Project Structure

Android

iOS
Shared code

Web
Dependency
management

`pubspec.yaml`
web/index.html
web/index.html (Firebase)

Tutorial
Running Flutter project

Android Studio CL
I
flutter run

flutter run -d Chrome

iOS simulator Android emulator Chrome
Anatomy of Flutter App
 Scaffold
A
A C B
AppBar Center FAB

C
Icon
Text Column

title
Text Text

You have pushed the button... Counter

B
 Stateless Widget Stateful Widget

Text Icon Card Checkbox Radio TextField

● Immutable ● Mutable.
● Widgets can not be redrawn ● Rebuilds several time over its lifetime
● `build()` method is called only once ● `build()` method is called multiple
times
 Stateless Widget Stateful Widget

● Immutable ● Mutable.
● Widgets can not be redrawn ● Rebuilds several time over its lifetime
● `build()` method is called only once ● `build()` method is called multiple
times
`main.dart`
 test/widget_test.dart

Unit Testing

Running test:

flutter test
test/widget_test.dart
 Flutter Web : In technical preview
Until Sept- 1st week

Updated: Sept- 2nd week

Source: https://flutter.dev/web
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.

Launching URL

Code Organization Handling Unsupported Platforms

Recommendation
Source code
Custom Fonts

● Download font Using custom font

● `pubspec.yaml`
Developer Tooling
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
Available Commands: `flutter help`
Android Studio: Flutter plugin
Android Studio: Live Templates
Flutter Outline Tool
Deploying Flutter Apps
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/”
Deploying Flutter Native Apps

● Manually
● CodeMagic (CI/CD)
● BitRise (CI/CD)
● CircleCI (CI/CD)
● Fastlane (CD) + Travis/Cirrus (CI)
Codemagic
(CI/CD)
● Build
● Test
● Deliver

Pricing
Bitrise (CI/CD)
● Build
● Test
● Deliver

Pricing
Exploring Flutter Samples code
Creating app from Flutter samples

flutter create --sample=<id> <your_app_name>

lowercase_with_underscores
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.SwitchListTi
le.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)\n\nHere is an example of
a custom labeled radio widget, called\nLinkedLabelRadio, that
Creating app from Flutter sample id

1 flutter create --sample=material.SwitchListTile.2 svcc19_switch_list_tile

Run "flutter doctor" for information about

installing additional components.

In order to run your sample application,

3
type:
2
$ cd svcc19_switch_list_tile
$ flutter run

Your sample application code is in

svcc19_switch_list_tile/lib/main.dart.
Checkout tutorial
Demo
Debugger & Profiler
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=/
Android emulator observatory debugger/ profiler
iOS simulator observatory debugger/ profiler
Dart DevTools
Flutter Inspector -> More Actions -> Open DevTools
5 months of Flutter...
Check-out
● Flutter-to-fly:
https://flutter-to-fly.firebas
eapp.com/#/
● Github :
https://github.com/ptyagic
odecamp/x-flutter-landingp
age

Contact
● Email: pty
[email protected]
● Twitter: @ptyagi13
● Blog:https://priyankatyagi.dev

Source: Designing Cross platform Flutter prototype for

Landing Page (Web-Hummingbird, Android, iOS)
Check-out Part 1: Designing Cross platform Flutter prototype
● Flutter-to-fly: for Landing Page (Web-Hummingbird, Android, iOS)
https://flutter-to-fly.firebas
eapp.com/#/
● Github :
Part 2: Making Cross-platform Flutter Landing
https://github.com/ptyagic
odecamp/x-flutter-landingp
Page Responsive (Web-Hummingbird, Android,
age iOS)

Part 3: Using Flutter Themes for Cross-platform

Contact Landing Page (Web-Hummingbird, Android, iOS)
● Email: pty
[email protected]
● Twitter: @ptyagi13 Part 4: Implementing Flutter FactsBot using
● Blog:https://priyankatyagi.dev DialogFlow

Part 5: Migrating to Flutter 1.9: Implementing

Cross-platform Firebase Login in Flutter Apps
Check-out
● Flutter-to-fly:
https://flutter-to-fly.firebas
eapp.com/#/
● Github :
https://github.com/ptyagic
odecamp/x-flutter-landingp
age

Contact
● Email: pty
[email protected]
● Twitter: @ptyagi13
● Blog:https://priyankatyagi.dev
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
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
Thank you !