How Flutter for web works, how to run Flutter code into our browsers and Flutter for web scenarios.

1. by Rihanna Kedir
@rihanna_ke
for web

2. https://flutter.dev

3. Portable UI toolkit
create mobile Apps

4. Portable UI toolkit
create mobile Apps

5. single code-base that can be
compiled in native apps

6. for Mobile
Photo from Unsplash

7. - desktop
- embedded
- web
Photo by Juan Pablo Malo on Unsplash

8. for web

9. for web??
Code-compatible
implementation of Flutter that is
rendered using standard-based
web technologies
Photo by Greg Rakozy on Unsplash

10. - Expressive + flexible UI
- Native apps
&&
First ‘s Focus

11. Fast development

12. Focus for web
- graphically rich content , highly interactive
experiences
- benefit embedding Flutter visualizations in
web content documents

13. Focus for web
- replacement for the document experiences
that HTML is optimized for??
- web framework??

14. o5/201905/2017 12/2018
for web technical preview
Photo from Unsplash

15. Flutter vs Flutter for Web

16. Dart2js compiler
Flutter Web engine
(dart:ui)
Browser
Flutter framework
(widgets, gestures, etc)
Your own code
Hardware

17. Flutter Web engine
(dart:ui)
Dart code for HTML, CSS, Canvas
Javascript
Your Flutter code
Dart2js compiler
Browser

18. so….
- Compile existing/new Flutter code
- Use all features of Flutter without
any browser plug-in
- Embed in the web page
- Deploy to any web server

19. Flutter code for the web
Your App
The flutter framework
Web-flavored dart:ui lib
main.dart.js

20. for web scenarios

21. PWA with Flutter
https://blog.chromium.org/2017/02/integrating-progressive-web-apps-deeply.html
&&
||
&&

22. Embed interactive content
<iframe src="URL"></iframe>

23. rihannaKe.github.io/flutter_web_samples

24. Flutter Dynamic content
WebView(
initialUrl: 'https://flutter.io'
)

25. Hello Web from mobile code!!
flutter.dev/docs/get-started/web

26. Let’s see how

27. ok!!!
Flutter for web samples

28. ko!!!
...
...
something went wrong!!!!

29. What can go wrong?
- Platform specific code
- Flutter plugin (not yet supported)

30. Dart for web
- dart:io (file, socket, http, I/O support)

31. waiting Flutter for web beta, better yet ‘stable’ !!!

32. Some links for Flutter for web
- Flutter Beyond Mobile announcement Google IO19
- Flutter For Web Docs
- Flutter For Web
- Flutter web samples codes
- Flutter for web FAQ
Don’t miss Flutter interact!!!

33. @rihanna_ke
Rihanna Kedir
Photo from Unsplash