SlideShare a Scribd company logo
1 of 73
Download to read offline
~ Priyanka Tyagi
Developing Cross-Platform
Apps in Flutter
“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
Google Trends link
Popular
cross-platform
solutions
Flutter
community
Stats
● StackOverflow : ~23K questions
● Github issues : ~7.5K open issues
● Github stars : ~74K
● Gitter : ~9K
● Reddit FlutterDev : 20.5K
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
flutter run
Android Studio CLI
flutter run -d Chrome
iOS simulator Android emulator Chrome
Anatomy of Flutter App
Scaffold
AppBar
Text
Center
Column
Text Text
FAB
Icon
title
You have pushed the button... Counter
A
B
C
A C B
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
● 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
`main.dart`
Unit Testing
Running test:
flutter test
test/widget_test.dart
test/widget_test.dart
Flutter Web : In technical preview
Source: https://flutter.dev/web
Until Sept- 1st week
Updated: Sept- 2nd week
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
● `pubspec.yaml`
Using custom font
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
flutter create --sample=<id> <your_app_name>
lowercase_with_underscores
Creating app from Flutter samples
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."
},
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
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:
ptyagicodecamp@gmail.com
● Twitter: @ptyagi13
● Blog:https://priyankatyagi.dev
Source: Designing Cross platform Flutter prototype for
Landing Page (Web-Hummingbird, Android, iOS)
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
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
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 !

More Related Content

What's hot

What's hot (20)

A flight with Flutter
A flight with FlutterA flight with Flutter
A flight with Flutter
 
Flutter introduction
Flutter introductionFlutter introduction
Flutter introduction
 
Build beautiful native apps in record time with flutter
Build beautiful native apps in record time with flutterBuild beautiful native apps in record time with flutter
Build beautiful native apps in record time with flutter
 
Google flutter and why does it matter
Google flutter and why does it matterGoogle flutter and why does it matter
Google flutter and why does it matter
 
Introduction to Flutter
Introduction to FlutterIntroduction to Flutter
Introduction to Flutter
 
Flutter Bootcamp
Flutter BootcampFlutter Bootcamp
Flutter Bootcamp
 
Flutter workshop
Flutter workshopFlutter workshop
Flutter workshop
 
Google flutter the easy and practical way
Google flutter the easy and practical wayGoogle flutter the easy and practical way
Google flutter the easy and practical way
 
Building beautiful apps using google flutter
Building beautiful apps using google flutterBuilding beautiful apps using google flutter
Building beautiful apps using google flutter
 
Flutter
Flutter Flutter
Flutter
 
Flutter
FlutterFlutter
Flutter
 
Flutter
FlutterFlutter
Flutter
 
Flutter
FlutterFlutter
Flutter
 
INTRODUCTION TO FLUTTER BASICS.pptx
INTRODUCTION TO FLUTTER BASICS.pptxINTRODUCTION TO FLUTTER BASICS.pptx
INTRODUCTION TO FLUTTER BASICS.pptx
 
Flutter session 01
Flutter session 01Flutter session 01
Flutter session 01
 
Flutter
FlutterFlutter
Flutter
 
Building beautiful apps with Google flutter
Building beautiful apps with Google flutterBuilding beautiful apps with Google flutter
Building beautiful apps with Google flutter
 
Flutter talkshow
Flutter talkshowFlutter talkshow
Flutter talkshow
 
Introduction to Flutter.pptx
Introduction to Flutter.pptxIntroduction to Flutter.pptx
Introduction to Flutter.pptx
 
Flutter Tutorial For Beginners | Edureka
Flutter Tutorial For Beginners | EdurekaFlutter Tutorial For Beginners | Edureka
Flutter Tutorial For Beginners | Edureka
 

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

GoogleDSC_ GHRCE_ flutter_firebase.pptx
GoogleDSC_ GHRCE_  flutter_firebase.pptxGoogleDSC_ GHRCE_  flutter_firebase.pptx
GoogleDSC_ GHRCE_ flutter_firebase.pptx
GoogleDeveloperStude22
 

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

Developing cross platform apps in Flutter (Android, iOS, and Web)
Developing cross platform apps in Flutter (Android, iOS, and Web)Developing cross platform apps in Flutter (Android, iOS, and Web)
Developing cross platform apps in Flutter (Android, iOS, and Web)
 
flutter intro.pptx
flutter intro.pptxflutter intro.pptx
flutter intro.pptx
 
#Code2Create:: Introduction to App Development in Flutter with Dart
#Code2Create:: Introduction to App Development in Flutter with Dart#Code2Create:: Introduction to App Development in Flutter with Dart
#Code2Create:: Introduction to App Development in Flutter with Dart
 
GoogleDSC_ GHRCE_ flutter_firebase.pptx
GoogleDSC_ GHRCE_  flutter_firebase.pptxGoogleDSC_ GHRCE_  flutter_firebase.pptx
GoogleDSC_ GHRCE_ flutter_firebase.pptx
 
Flutter technology Based on Web Development
Flutter technology Based on Web Development Flutter technology Based on Web Development
Flutter technology Based on Web Development
 
flutterbootcamp
flutterbootcampflutterbootcamp
flutterbootcamp
 
flutter_bootcamp_MUGDSC_Presentation.pptx
flutter_bootcamp_MUGDSC_Presentation.pptxflutter_bootcamp_MUGDSC_Presentation.pptx
flutter_bootcamp_MUGDSC_Presentation.pptx
 
Mobile development with Flutter
Mobile development with FlutterMobile development with Flutter
Mobile development with Flutter
 
Flutter vs React Native | Edureka
Flutter vs React Native | EdurekaFlutter vs React Native | Edureka
Flutter vs React Native | Edureka
 
Intro to Flutter SDK
Intro to Flutter SDKIntro to Flutter SDK
Intro to Flutter SDK
 
Mobile Application Development class 001
Mobile Application Development class 001Mobile Application Development class 001
Mobile Application Development class 001
 
Adopting Flutter in Native Mobile Applications
Adopting Flutter in Native Mobile ApplicationsAdopting Flutter in Native Mobile Applications
Adopting Flutter in Native Mobile Applications
 
Android App Development - 01 Introduction
Android App Development - 01 IntroductionAndroid App Development - 01 Introduction
Android App Development - 01 Introduction
 
GDSC-FlutterBasics.pdf
GDSC-FlutterBasics.pdfGDSC-FlutterBasics.pdf
GDSC-FlutterBasics.pdf
 
Flutter App Development Building Cross-Platform Apps.pdf
Flutter App Development Building Cross-Platform Apps.pdfFlutter App Development Building Cross-Platform Apps.pdf
Flutter App Development Building Cross-Platform Apps.pdf
 
6722_AS_ Top 8 Flutter app development tools to consider in 2024.pdf
6722_AS_ Top 8 Flutter app development tools to consider in 2024.pdf6722_AS_ Top 8 Flutter app development tools to consider in 2024.pdf
6722_AS_ Top 8 Flutter app development tools to consider in 2024.pdf
 
Flutter presentation.pptx
Flutter presentation.pptxFlutter presentation.pptx
Flutter presentation.pptx
 
Introduction to flutter's basic concepts
Introduction to flutter's basic conceptsIntroduction to flutter's basic concepts
Introduction to flutter's basic concepts
 
Getting started with android dev and test perspective
Getting started with android   dev and test perspectiveGetting started with android   dev and test perspective
Getting started with android dev and test perspective
 
What makes Flutter the best cross platform sdk
What makes Flutter the best cross platform sdkWhat makes Flutter the best cross platform sdk
What makes Flutter the best cross platform sdk
 

Recently uploaded

EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
 

Recently uploaded (20)

08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 

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