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

Exploring new possibilities with Flutter for web

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for Pawan Kumar Pawan Kumar
September 22, 2019
Technology
220
0

Exploring new possibilities with Flutter for web

Avatar for Pawan Kumar

Pawan Kumar

September 22, 2019

More Decks by Pawan Kumar

See All by Pawan Kumar
Flutter apps for everyone
Avatar for Pawan Kumar iampawan
1
450
How to create flavors in Android, iOS & Flutter
Avatar for Pawan Kumar iampawan
1
640
Become a PRO Flutter Developer
Avatar for Pawan Kumar iampawan
3
2.3k
Flutter, the future of mobile.
Avatar for Pawan Kumar iampawan
3
730
Flutter is the best. Best practices & tools
Avatar for Pawan Kumar iampawan
3
1.2k

Other Decks in Technology

See All in Technology
AIっぽい文章を採点して人間らしく直すアプリを作ってみた
Avatar for Yuuki Yamashita yama3133
2
120
ポケモンの型をTypeScriptの型システムで表現してみた
Avatar for subroh_0508 subroh0508
0
370
地球に⽣きるAI —GeoAIと「中間領域」— / AI Living on Earth — GeoAI and the “Intermediate Layer” —
Avatar for Kiyota Yoji, Ph.D. ykiyota
0
260
「速く作る」から「正しく作る」へ ─ 生成AI時代の開発フロー改革の ロードマップと実行 ─
Avatar for starfish719 starfish719
0
9.7k
あなたの AI ワークスペースに、 専門コーダーを連れてくる - Amazon Quick Desktop 最新情報
Avatar for kawaji kawaji_scratch
1
130
DevOps Agentで始めるAWS運用 〜フロンティアエージェントが変える運用の現場〜
Avatar for nyankotaro nyankotaro
1
380
Oracle AI Database@AWS：サービス概要のご紹介
Avatar for oracle4engineer oracle4engineer
PRO
4
2.9k
エンジニアリング戦略の作り方 / Crafting Engineering Strategy
Avatar for iwashi iwashi86
19
6.4k
AWSシリコン最前線 〜AI時代のチップ選択を読み解く〜
Avatar for Hiroshi Tokoyo htokoyo
2
390
Microsoft Build Keynoteふりかえり
Avatar for tomokusaba tomokusaba
0
120
中期計画、2回作ってみた　～業務委託と正社員、両方の視点から～
Avatar for 株式会社出前館 demaecan
1
640
2026TECHFRESH畢業分享會 - 葬送的通靈師：化系統與用戶雜訊成行動訊號
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
680

Featured

See All Featured
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
840
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
200
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
940
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
1
140
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.5k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
160
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
62
44k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
800
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.6k

Transcript

  1. Exploring new possibilities with Flutter for web By Pawan Kumar

  2. Google Developer Expert For Flutter, Firebase, Dart & WebTech

  3. Back in 2017 Native Android Me

  4. In 2018 Declarative UI Pattern?

  5. None

  6. In 2019?

  7. 2019 for declarative UI Pattern

  8. What is Flutter Flutter is Google’s portable UI toolkit for

    building beautiful, native applications for Android iOS, Web and Desktop from a single codebase.

  9. Expressive, beautiful UIs

  10. Stateful hot reload

  11. Native performance

  12. Flutter directly compiles your dart code to native machine code

    Mobile Web Desktop

  13. Raspberry Pi

  14. Desktop Embedding

  15. Integrate flutter app to existing iOS and Android app

  16. Flutter For Web

  17. Flutter vs Flutter For Web

  18. Scenario • A connected Progressive Web Application built with Flutter

    • Embedded interactive content • Embedding dynamic content in a Flutter mobile app

  19. Flutter Web Support Flutter 1.10

  20. None

  21. Cross Platform Mobile Apps

  22. Dart

  23. “Dart is particularly easy to learn because it has features

    that are familiar to users of both static and dynamic languages.” Why Flutter uses Dart

  24. Event loop

  25. Just-in-time compilation

  26. Ahead-of-time compilation

  27. Type safe

  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. None
  45. None

  46. Familiar

  47. None

  48. Everything’s a widgets!

  49. None
  50. None
  51. None
  52. None
  53. None

  54. Gotcha

  55. No templates

  56. No css

  57. None
  58. None
  59. None

  60. “Flutter widgets are built using a modern react-style framework” Flutter.io

  61. StatefulWidget

  62. None
  63. None

  64. State is long-lived

  65. Widgets get reborn

  66. Fast

  67. Stateful hot reload

  68. Reactive

  69. Animation

  70. None

  71. Custom Animation with Tween Zero to One with Flutter

  72. Testing

  73. Unit

  74. package:test

  75. None

  76. Widget

  77. package:flutter_test

  78. None

  79. Integration

  80. “tested app is launched on a real device or in

    an emulator” Flutter.io
  81. None

  82. Test more things

  83. None

  84. Flutter For Web – Technical Preview Android + iOS +

    (Not so good Web) = ♥ http://mtechviral.com/myportfolio/ http://mtechviral.com/Flutter-UI-Kit/ https://flutter.github.io/samples/

  85. Where to start

  86. Youtube.com/mtechviral

  87. Flutter.dev

  88. flutter.dev/docs/codelabs

  89. github.com/Solido/ awesome-flutter

  90. Thank You Twitter - @imthepk | Github - @iampawan |

    Youtube - @mtechviral