by Rihanna Kedir
@rihanna_ke
for web

https://flutter.dev

Portable UI toolkit
create mobile Apps

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

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

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

Fast development

Focus for web
- graphically rich content , highly interactive
experiences
- benefit 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

Flutter vs Flutter for Web

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 flutter framework
Web-flavored dart:ui lib
main.dart.js

for web scenarios

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/flutter_web_samples

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

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

Let’s see how

ok!!!
Flutter for web samples

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

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

Dart for web
- dart:io (file, 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