Learn how Flutter enhances web apps

Take a deep dive into how Flutter uses the latest browser technologies to enable beautiful web experiences. See how WebGL and Web Assembly enable Flutter to democratize access to rich applications across all devices. Learn how upcoming standards will push the user experience even further.
Resources:
Flutter on the web → goo.gle/3LAqa7M
Dart → goo.gle/3uS9jXg
Web Assembly →goo.gle/3DGKuSc
Speaker: Kevin Moore
Watch more:
All Google I/O 2022 Sessions → goo.gle/IO22_AllSessions
Flutter at I/O 2022 playlist → goo.gle/IO22_Flutter
All Google I/O 2022 technical sessions → goo.gle/IO22_Sessions
Subscribe to Flutter! → goo.gle/FlutterYT
#GoogleIO

[@PaulBrassington_flutter_expert]

As a Flutter developer developing website all I can say is that Flutter seems perfect for responsive pages where it looks perfect at any size, the smallest mobile to the biggest screen. Anything seems possible.

[@flutterdev]

We love your motto, Paul! Anything is possible if you truly believe it to be ✨

[@abdimussa8932]

What package are you using if any, to make it responsive?

[@PaulBrassington_flutter_expert]

@@abdimussa8932 Fraction Size, Linited Box, Media Query. Of(context).size

[@Prince_chamola]

Hey brother i have problem in web. I am making website and getting issue to open drop menu in hover. Any suggestion please??

[@Enedee007]

@@PaulBrassington_flutter_expert LayoutBuilder, too.

[@Quik_Dev]

What about the SEO and the loading time

[@TheMohammadkhan]

I am a die hard Flutter fan and have written more than 400 k lines of code (mobile & web apps ) in this technology. Make it SEO friendly and it'd beat all other stacks used for web development

[@sachindraragul1094]

What are the other technologies you have used. Tried NextJS, Remix run? Just wanted to know

[@David-iq1kd]

Do you use it for web too or just mobile?

[@TheMohammadkhan]

@@sachindraragul1094 I've used React and Angular

[@TheMohammadkhan]

@@David-iq1kd For web too and it works great for web as well except for the fact that your website won't be SEO friendly

[@programmingg4948]

u r way too optimistic about Flutter web

[@benbaert2166]

The key thing is: Flutter on web is fine for apps, but not for pages. Somewhat ironically, it works for the '2022 use case', but not for the '2002 use case'. A user will be fine with a loading time to open fairly heavy and often deep web apps like the examples shown. A user will not be fine with a long loading time to open public and relatively simple sites like a basic landing site, a news site, or a blog. Just drawing on a canvas also means SEO and browser functionality like read mode doesn't work.

[@ivomuze]

It can work in the future, but yeah first step is t compete with react/angular/vuejs. Then will be time to start to think about server side rendering in a dart server, but even if it tries to enter the CMS arena, the CMS know-how only is more keen to PHP, so...does it even worth the effort?

[@ravitejaknts]

Websites should still prefer HTML and CSS way, whereas webapps can take advantage of Flutter like technology.

[@soultouchin]

@@ivomuze react bla bla. That's history in 2 years

[@agustinbjr]

Correct, as stated in the video. Flutter for basic pages is a misuse.

[@mektrode]

Agreed it is powerful for complex web apps. But with the prominent rise is high performance no-code tools to build static websites like Webflow, the question at the start of each project becomes, what tool is best for the job at hand?

[@royayon]

What about SEO?

[@samuelkings9416]

God, I so want this.

[@royayon]

@@samuelkings9416 me too... but flutter as of it is now its a SPA on all fronts... but there should be a better solution for flutter SEO... even if canvas is the future..

[@samuelkings9416]

@@royayon one way I've seen people do something of a sort of hack if create different HTML pages with the SEO done but redirects to the flutter web pages when clicked. Seems like I'm going to settle for that for now. Another thing I'm thinking of but I haven't seen it tried anywhere (I'm planning to test it in my next project) is to use firebase deep/dynamic links. I read that those links can be optimised for SEO. If it works, I'll most likely make a video or write an article about it.

[@rsocial453]

I really hope they fix the Seo for flutter web as fast as they can. As the only thing stopping a lot of flutter app developers to move on to flutter web is the Seo. If they crack it soon they might be the market leader in web. Since a lot of flutter devs are on a hold

[@samuelkings9416]

How I so want this badly

[@KManAbout]

I don't know if they will ever quite do this at least without the source code. Raw pixels just are not readable by machines.

[@shokhbozabdullayev6260]

I'm just interested how are you going to handle SEO with canvas?

[@mdshariqq1976]

Basically google algo's will update their indexing model for canvas.. but we programmers need to tell Google that canvas is the future and update their seo indexing

[@JaredHasson]

@@mdshariqq1976 How can we do that?

[@mdshariqq1976]

@@JaredHasson contributing to the new stack & making it so preferable for web development, just like WordPress changed the CMS industry, we need to make a change in the SEO industry. Technology is all about making lives better, isn't it?

[@mdshariqq1976]

@@JaredHasson awareness & communities

[@davidlearnforus]

thanks for your great work Flutter/dart teams. Making flutter fully work on the web (with its advantages) will be crucial for so much wider adoption of flutter

[@k4ba]

I wish they just push for a state management library

[@Canadianishere]

That's amazing, flutter always using graphics libraries to do there amazing work

[@nimrsawafta1682]

My main question about flutter web is SEO, like I could develop any sort of web application that I want the search engine bot to understand my containt, SO!?

[@JaredHasson]

Fantastic talk. Thanks for bringing up Rive! I interacted with it in its early days but had forgotten about it, and it's perfect for my current project.

[@flutterdev]

Happy that the video was helpful, Jared. If you'd like to try building and releasing your own web app via Flutter, check out this neat resource: goo.gle/3EyYmjP

[@seanknowles9985]

No SEO support?! You heard it here first... The race right now is between Blazor, Maui, Flutter and Kotlin Multiplatform. If flutter support SEO so that flutter for Web is indexable and can reduce the bundle size just a tiny big it wins the complete multiplatform race, it's that simple.

[@Concentrum]

excited to see what will happen with the aom and wasm-gc! props to everyone involved, you seem to be looking far ahead!

[@rydmike]

Great talk Kevin, thanks! Looking forward to WASM-GC and Flutter using it! Is there any ballpark timeline on when there might be a usable beta of it?

[@kevmoo]

We don't provide timelines 🙂- For Chrome GC status, follow along at chromestatus.com/feature/6062715726462976

[@psclip3309]

Great work for the flutter teams

[@xitize]

As he said Url > html . so by one url web app can be loaded. and html is still there to take care of seo.

[@mohammadpakravan9516]

I started flutter last month and i cant stop thinking on flutter web and how great it is thanks flutter team and thanks google

[@s.bamahfoodh]

Hello Mohammad, are you still on flutter? just curios, as I'm just starting

[@thebasicstoday1366]

That sounds great what flutter web is doing! I do have a question..whats the progression when it comes to the SEO, is that something that has improved with flutter web, or is that something that is still in the same place as it once was?

[@robbyriverside]

I feel like ten years from now, I will remember this video.

[@chaitanyadamarsingu9925]

Material UI inside a video is awesome 💙

[@flutterdev]

When we were creating this video, Material UI just felt right 😎 You can find more awesome content by subscribing to our channel: goo.gle/FlutterYT

[@mohamedhamde6611]

Thank you very much .

[@blackstarkami]

Flutter is amazing! Hope to use it for many many years

[@flutterdev]

We hope to have many updates for years to come 😀

[@himmelkami3308]

is it possible to embed canvaskit in chrome？ The loading time is the pain of flutter webapp.

[@ismadev]

SEO is also the pain of flutter webapp

[@iGhostr]

@@ismadev nah, there are workarounds to have great SEO on flutter web

[@ismadev]

@@iGhostr but how?! :0

[@dabelydadi7551]

Rivaan you're a genius, looking forward for those videos

[@IshtiaqAhmad786]

can you please resolve the issue in web slow page loading issue

[@piotrskodowski3942]

Thank You!

[@David-iq1kd]

I'd really like to give flutter a try, but most sites have mentioned the Flutter for web performance being really poor (which seems at odds with the pitch in this video). Has this changed?

[@Apenschi]

Solve SEO and this will be the new standard for web-development!

[@damiantriebl1747]

i like to see beter SEO with flutter web apps, I think is the most important on programming in this platform

[@damiantriebl1747]

any options to do a server side render like Next but whit flutter? better seo, and velocity

[@Sam-ch4jh]

How about creating very large application like Amazon , using flutter for front end, deploying in Google cloud platform as web app

[@abegehr]

Wow, strong! Flutter for the win 🎉

[@Sominemo]

Looking forward to wasm Dart at some point

[@Selbstzensur]

Thanks for your Hard work.

[@otea-app]

I love your work it is integral to companies like ours! Thank you

[@anon3118]

Kevin Moore for president!

[@as269]

flutter is the future

[@flutterdev]

Thanks for the love 😎

[@joseantoniomolinabusquiel1617]

Of course

[@neuzen]

Will Flutter ever have JSX-like syntax?

[@selvakumarmurugesan9013]

@Kevin, Thanks for awesome flutter web insight. Can we use flutter web for our regular e-commerce kind of website. I have my mobile already built on flutter and I like to extend for web. I don't find any good example of websites who is using flutter web. All you show as examples are web tools and not regular website. Can you please help me with some examples of regular websites which built on flutter?

[@jvmachado1204]

Well, you could... It would be terrible for your site's SEO though, wich is absolutely crucial for an e-commerce.

[@selvakumarmurugesan9013]

@@jvmachado1204 Then there is no use for Flutter Web Pages until we have good SEO like webpage built on html/js.

[@maxhuk]

Such great and inspiring work 😊 Amazing achievements, Flutter team 🤩

[@flutterdev]

Max, thank you for your kind words of encouragement. We greatly appreciate the support of viewers like you 🙌

[@SapphireTvYt]

I use flutter to make phone apps but as soon as I switch to web it sucked, single js lib of 7mb, this is not good experience on slow internet. This take time to be functional. Or I might be totally wrong with flutter web. In either case please discuss it

[@safiussifat]

Flutter web is currently used mostly to build admin dashboard or web apps where you do not need seo

[@safiussifat]

Flutter web is currently used mostly to build admin dashboard or web apps where you do not need seo

[@gaetanguiffo9378]

@@safiussifat can it be fast enough to end users?

[@safiussifat]

@@gaetanguiffo9378 Yeah, its very fast. Even faster with the flutter 3. You can warch flutter web examples on KZbin .

[@Ahmadsp-ow4ey]

In flutter web when i relaod the page why it's all data destroyed in debug mode And on live hosted it's shows 404 web page not found

[@manjeshvishwakarma4842]

How to run web app on Safari browser ?

[@j.k24]

keep up the good work 🔥

[@rechi_0054]

I think here is the best place to ask this question: would you build a webshop with business analytics and this kind of stuff in Flutter or use a JS/TS framework

[@Sivaprabu]

Flutter under OpenSource?

[@greatestuff]

Anyone else confused by... (at 7:49) refers to "Google Maps" but shows "Google Earth" logo? ...maybe I'm being pedantic? I love Google, but am constantly confused by what product is which, so please forgive me

[@christianuldallpedersen1213]

Great video :) Quick question, how does Flutter render a WebView on the web? I.e. how does webview_flutter_web work from a technical point of view? Does it utilize the browser to render things inside the canvas? How does it do this?

[@ivomuze]

Webview on flutter is a plugin and it's a different animal than flutter web

[@shenyan008]

When to solve the first load slow problem?

[@catagna7273]

He already said it is under development to become stable first with WebASM, i guess the next version will be much around making web apps load faster and more recognisable by browser in term of SEO and loadspeed. CMIIW

[@yuvoria.official]

Still difficult

[@jesusmysavior7843]

dart has bright future !

[@StarOnCheek]

I think at the moment the 'web' has more potential to become the third major OS than GNU+Linux. Perhaps the flutter team should put more effort into distancing itself from Google (or any other big centralized organization)

[@StevenAkinyemi]

Google owns Flutter. I don't understand what you mean.

[@SomtoOfonagoro]

Can I send an email template built with flutter/dart that will run on a browser via a service like nodemailer?

[@joseantoniomolinabusquiel1617]

Yes, only use an api (nodejs, goland, php, dart)

[@chaitanyadamarsingu9925]

Expecting Flutter web to outgrow the performance of [Node Angular Vue etc ] soon by Flutter 💙web 4.O

[@ngocduchuynh4896]

The "closing brackets syndrome" is the most reason I throw this Flutter away, very easy get confuse with around 4 or 5 brackets punch on your eyes, like nested of nested if else, wonder do they notice this design

[@rsocial453]

You can modularize your widget tree into smaller functional components which return widgets.

[@ngocduchuynh4896]

@@rsocial453 even doing that when styling for individual widget still can't catch your eyes, if you using TextStyle or BoxDecoration or others property have many arguments it will break into many lines

[@iGhostr]

Lmao, idijot

[@ngocduchuynh4896]

@@iGhostr Next time use your brain before typing in any comment

[@mohammedaslam2912]

I'm learning flutter now

[@AgentZeroNine1]

Yay, another layer of complexity to learn web development, to get hired as a web developer, to build web applications, and having to wait for Flutter to be updated to use new web APIs. Sounds great... I'd prefer to see CSS and JavaScript continue to evolve, and the browser vendors create a Canvas UI framework to act as an alternative to HTML. The world doesn't need yet another third party UI framework for the web (hell, I don't think it needs even 1 with all of the powerful and useful CSS and JavaScript APIs).

[@ericlekwane423]

Flutter web sucks 👎👎 stick with js html css

[@communityband1]

Honestly, you're pointing out exactly why tools like Dart and Flutter should exist and evolve to become viable options. The world of web development is a mess, demanding developers become familiar with many different technologies even before they start diving into something like React. Over a decade ago, Adobe offered an alternative to web app development in the form of Flash, and those of us building complex web applications (as opposed to websites) enjoyed a far simpler, far more productive approach. While it's fair to say that Dart and Flutter are a different thing to learn, it should be with the understanding that in using them, we _replace_ a lot of technologies and tooling mess with a single unified system that's designed to work together. In other words, it's not "one more thing" to learn. It's something to potentially learn _instead._ And as someone who has lived in both worlds, I can definitely say that it's an option I want to see more of, not less.

[@danielelewis9303]

I tried to build a Flutter web app but the performance on mobile is absolutely terrible (built in release mode). Is this normal? The animations are REALLY bad and the scroll is almost broken.

[@asdk2006]

can flutter web develop rout api like laravel?

[@joseantoniomolinabusquiel1617]

use dart language for create an api

[@ISBE91]

Yea this souns really nice, but in reality it struggles even under an apple m1 chip (nothing complex, landing page with a few menus and fading effect)

[@VolkerAndres1]

For me it sounds like, Flutter for Web is dead for a lot of use cases. What happened to the HTMLRenderer?

[@_aakashpandey]

So flutter web apps don't lag on scroll anymore?

[@ArshdeepSingh-ob7rj]

That's what I wanna know too

[@patrickkdev]

Yes they do lag on scroll and in some animations and I cant find a workaround for it. (Flutter 3)

[@mohsinirfan4498]

make tutorial on background tasks

[@kevmoo-google]

Hey Mohsin! While we have solid support for background tasks on the native side, we have not implemented it on the web. The technologies are just too different. Web workers do exist in the browser that could support something like this, but it's quite tricky to make it work the same way. This is a common request. I hope we get to it!

[@lasaint589]

The Flutter and Firebase team gives me butterflies. I hope to one day work with other Flutter devs and Firebase devs around the world on my FlutterFire web app which is 3 months old now, a dev can only dream which such frameworks. 🥰🥺

[@pipzgutz]

I still prefer to code with Kotlin rather than Dart 2.x. I wish there is an option to compile Flutter using any third-party programming language

[@kadidibwa968]

I hate how right you are on HTML.

[@kuthub1989]

Why not Go? Why Google created Dart?

[@jvmachado1204]

Flutter needed both Just-in-Time (JIT) and Ahead-of-Time (AOT) Compilation, Dart was the better choice then.

[@kuthub1989]

@@jvmachado1204 thank you, finally found the answer.

[@shokhbozabdullayev6260]

The butterfly is a weird example because it lives for just a day and die :(

[@xtraszone]

Them: its best for web apps Me: Lets check google page speed insights.. Ohhh. its worst for web apps

[@AhmedElsaadany-ey7ri]

We need seo

[@sesa232]

Flutter is great but Flutter Web is far from production ready. HTML renderer render elements different or throws errors because some interfaces are not implemented. CanvasKit renders equal to Mobile or Desktop but the performance is just bad on the web for both render modes compared to Mobile/Desktop or normal web solutions. Special usecases could be faster but when we talk about normal business solutions with lists and charts, it is laggy for animations, page transitions and scrolling. There is also no solution to render images from another domain on CanvasKit. Since HTML renderer has so many issues and my app does not work with it and CanvasKit does not allow that for a lot of images (I opened a bug and it got pushed back) there is no solution to publish my app except to proxy all images what is a bad solution.

[@catagna7273]

I almost give up on Dart for web-app development, but this.... BRING ME H O P E. XD

[@thorstenschmidt21]

It is like a new gen Flash-Environment

[@AlexMercadoGo]

I just watched Billion Dollar Code, and these Terravision / Google Earth examples really burn

[@gnddndbddvshdbdb8300]

Google is really weird, you make PWA to make web apps behave as same as native apps, and you make flutter to make mobile & web apps 🤔

[@muhamadhaydar8419]

Mobile Developers => Web and Mobile Devlopers 😁

[@kretynek1]

DART EVERYWHERE.

[@xmanreturn]

Flutter on wed will just be awkward, we are still using vue/react

[@JohnWilliams-gy5yc]

HTML & DOM JS: We are kings of the world. AOM & WASM-GC: Well, your days are counted. The web is now a targeted platform of any languages.

[@techzone2009]

SEO sucks 😢 😪

[@AveryMendoza324]

Same feeling

[@techzone2009]

It's been more than 1 year but they don't even put small effort for seo optimization or server side rendering

[@rajapaswan2132]

Flutter not good for SEO and Loading Time

[@karanveersingh2264]

Flutter does not enhance web apps. It makes them far worse and slow. Plus, canvaskit is trash

[@Rogueixpresents]

personally i think flutter should just focus on native stuff, and let web dev be web dev, react, vue etc...

[@iGhostr]

Flutter web has lot of potential. Web dev with JS is a mess right now

[@raianmr2843]

the sole reason why dart saw the light of day is google's conquest of the web. this was in the making for a long long time. that said, this is actually good news for the most part, flutter has solved many problems for many people, and it continues to do so by making the web more approachable and flexible. really looking forward to the end of this monoculture surrounding the html dom (and js by extension).

[@catagna7273]

@@iGhostr true, even tho it is handy, but i felt like flutter soon can make the browser become "native" too in browser.

[@randomVideozzzzz]

Nobody: Hulk in Avenger: Infinity War

[@vacoder]

Flutter is trash in web world..!!

[@ericlekwane423]

Flutter web performance sucks, it's absolutely and I mean absolutely bad... I regret ever trying flutter web out 👎👎👎👎👎👎👎 absolutely awful, I'm moving back to react native, I would recommend anyone trying to build a webapp to look elsewhere, definitely not flutter 👎👎

[@_aakashpandey]

Kamar.shake().random()

[@danielbolivar9134]

What about SEO?

[@ismadev]

What about the loading time?