Flutter for web

by Rihanna Kedir
@rihanna_ke
for web

https://flutter.dev

Portable UI toolkit
create mobile Apps

single code-base that can be
compiled in native apps

for Mobile
Photo from Unsplash

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

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

- Expressive + ﬂexible UI
- Native apps
&&
First ‘s Focus

Focus for web
- graphically rich content , highly interactive
experiences
- beneﬁt embedding Flutter visualizations in
web content documents

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

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

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

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

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

Flutter code for the web
Your App
The ﬂutter framework
Web-ﬂavored dart:ui lib
main.dart.js

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

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

rihannaKe.github.io/ﬂutter_web_samples

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

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

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

What can go wrong?
- Platform speciﬁc code
- Flutter plugin (not yet supported)

Dart for web
- dart:io (ﬁle, socket, http, I/O support)

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

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!!!

@rihanna_ke
Rihanna Kedir
Photo from Unsplash

Flutter for web

More Related Content

What's hot (20)

Similar to Flutter for web (20)

Recently uploaded (20)

Flutter for web