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

Exploring new possibilities with Flutter for web

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
470
How to create flavors in Android, iOS & Flutter
Avatar for Pawan Kumar iampawan
1
650
Become a PRO Flutter Developer
Avatar for Pawan Kumar iampawan
3
2.3k
Flutter, the future of mobile.
Avatar for Pawan Kumar iampawan
3
750
Flutter is the best. Best practices & tools
Avatar for Pawan Kumar iampawan
3
1.2k

Other Decks in Technology

See All in Technology
こんなアーキテクチャ図は嫌だ BEYOND THE TIME: 半年後の自分へ贈る15のメッセージ / 15 of Anti-pattern in AWS Architecture Diagrams
Avatar for Naomi Yamasaki naospon
3
230
#jawssonic2026 あの時代が悪かった ~動かなかったSageMakerと共に迎えたイベント当日~
Avatar for Kana Kitagawa ktkn1129
0
130
AI時代に、プロダクトの数だけ積み上がる所有コストをどうエンジニアリングするか / Engineering the Cost of Ownership
Avatar for Kazuki Maeda kzkmaeda
0
990
Amazon S3 Tablesに全部任せてみた結果——コンパクション/スナップショット管理は本当に手放せるか
Avatar for ShigeruOda shigeruoda
0
370
動画配信アプリでの Engage SDK 導入 — TVer Android が Play ストアにコンテンツを届けるまで
Avatar for TVer Inc. techtver
PRO
0
110
Tab5をRubyで動くパソコンにする
Avatar for Katsuhiko Kageyama kishima
1
180
Nav2、Nav3 ... はたまた自作？〜 作って理解する Nav3 の設計意図 〜 / Nav2, Nav3 ... or Build Your Own? — Understanding Nav3's design intent by building it from scratch
Avatar for Yuki Anzai yanzm
0
220
振り返りこそエンジニアの本領
Avatar for Negima negima
0
280
Genie Code ワークショップ 応用編 / Genie-Code-Workshop-advanced
Avatar for Databricks Japan databricksjapan
PRO
0
320
Level Up Your CDK DX: 5 Tools I’ve Been Building
Avatar for k.goto gotok365
2
190
いかに伝えるか　〜新卒エンジニアの教育のための、ライトノベル活用の一例
Avatar for Akira Ikeda（池田 暁） ikedon
1
190
Autonomous AI Databaseサービス・アップデート（FY27）/ adb-service-update-jp-fy27
Avatar for oracle4engineer oracle4engineer
PRO
0
110

Featured

See All Featured
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
300
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.5k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.4k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
400
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
3k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
490
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
400
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
330
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
600

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