From mobile app to web app
ฝัง
- เผยแพร่เมื่อ 13 ม.ค. 2025
- Join Mariam Hasnany and John Ryan as they upgrade their mobile app into a web app. Learn how to adapt your app for desktop browsers, how to debug, and how to deploy your app to a web server.
Resources:
Web support for Flutter → goo.gle/2ZI2GaV
Creating responsive apps → goo.gle/3uouYFh
Scrollbar class → goo.gle/2ZI2Krb
Speakers: John Ryan, Mariam Hasnany
Watch more:
Flutter Engage playlist → goo.gle/Flutter...
Download the Flutter 2 SDK → goo.gle/Flutte...
Subscribe to Flutter! → goo.gle/FlutterYT
#FlutterEngage
0:00 Intro
5:34 plugin support
7:10 responsive design
9:59 navigation
11:08 desktop idioms
12:28 rendering
14:12 Debugging
17:08 Deployment
19:20 PWA
20:00 recap
I could feel the scripting XD... Great job for introduction success
Great! Web support and native mobile app development with one framework! That’s amazing 👍
Had me on "It's already a PWA" which is how it should be!!!
that is easy to do with many native web frameworks ;)
I think this could even make your code more readable because now you're kinda forced to split code into Widgets to support web layout (otherwise it gets extremely messy)
This really improving the possibilities for desktop usage of your app!
For those who haven't upgraded flutter for a more than 7 months (like me ;) ) run "flutter upgrade" in your terminal, restart your IDE and the "Chrome (web)" option will be available.
omg you should upgrade flutter more often…
I'm really excited about this. Can't wait to start learning the tech.
Great video, pacing, content so apt. Have been putting off “porting” app to web, so actually started laughing at the deploy step - so straightforward. Thanks.
My code is gonna get more messy now
How about SEO ? Is there any optimisation to be expected for Flutter Web ?
They mentioned at beginning of the video that it is "meant to build apps" , thus it's not seo friendly which is logical conclusion to me. at least as of now, I guess
I don't like how the page transitions appear in the browser
thx for the tutorial!! i'm new to flutter and this looks very promising! however does that mean we need 2 sets of code for app and web? or at least there is going to be a lot of conditional code?
I get a blank screen when I run my flutter app from command flutter run -d chrome --release
How great is this video, I enjoyed every minutes of it
Wonderfull, i am for sure joining to Flutter.
We're delighted to hear this, Vitor. Please check out these wonderful codelabs to help you on your Flutter journey😁: goo.gle/flutter-codelabs
Happy learning 🙌
It's awesome !! I haver been wainting for this !
What is the font of the code editor?
FantasqueSans Mono
@@ukietux766 Thank you
For the first time, I liked the Google dev video.
Amazing Introduction!
Awesome! Now its time to enroll in acting class
for a long time i tried to learn different languages but failed even though i am a computer science student to its either I am lazy or couldnt have a better understanding i don't know but now i feel like flutter was the one i must learn and easily understand.
😮
It's like guitar where you should choose the one that feels best in your hand - here you choose the one that best fits your mind. It's understandable that some languages feel better than other.
Hello! How can I render text in Flutter Web so it can be properly selectable? And is it possible to get the browser's default context menu? I've been struggling with this for a long time. Thanks!
flutter web es lo mejor de flutter y su futuro
Hi can we access the hardware that is attach of system through web , if that device driver is also written in c++
Great explanation But how to manage navigation for flutter web?
I use visual studio code. Will all these intelli sense work?
Yes. Install the Flutter and dart plugin for visual studio code.
I'm working on a web project, what I don't like in all of this is the convertion to javascript you think it would be better to make a version of chrome with full support for dart ?
Hi.
First of all thanks for the idea of creating web pages with the Flutter.
In this regard, I would like to ask you why, in your opinion, my server does not work with the new version of Flutter web ...
Can we import JavaScript libraires?
nice! great video guys, now im considering to move from angular to flutter🤔
i have begin the transition from angular to flutter. its great.
Very practical and informative! Awesome!
Are there any flutter images on docker?
0:30 it's a PRS Custom 24, isn't it? 🎸
hahhaha ... looks like!
Is the janky ios animations fixed in flutter 2?
can you explain about how can we migrate databases for web
looks awesome!
How do we specify Tab navigation ?
Can we add things on web which is not there on android mobile application and if yes then how to do it??
@flutter while using webview package, and Initializing an initialurl, while running it says url refused to connect. what should I do?
The webview in flutter uses more memory around 150 MB on start when compared to 40 MB on WKWebview. Is this a known issue
can you containerized the flutter webApp?
which fonts are those in the editor?
Sir..which theme are using ?
He is using CupertinoApp instead of MaterialApp.
I tried it but I didn't get the output does it only work if we host it somewhere? Can't we run the index.html in browser directly ??.. I tried but I got nothing.
Can we add HTML element in compiled web app of flutter?
So it's react native but in reverse?
Flutter is Awesome
when we uploaded image on web after didn't work but it work on mobile have big issue for us.
scrollbar class is still cannot scrollable using mouse ? why ?
Can u host ur flutter web app on sheared hosting
I guess as any other html and javascript yes
Now is my first option to use in all development.
Hello guys, i need some clarification here, is flutter web app automatically an SPA that is a PWA? what if i do not want the PWA feature but just a regular SPA.
Simple way, go to the index.html template in the /web directory and remove the link to the manifest.json file and (possibly) the link to the service worker, and it loses all the features of the PWA and becomes a regular SPA. However, that's not much needed, since a PWA behaves like a SPA if it's not installed in the home screen.
Hi can you also describe how to deploy flutter web apps too.
But the quesiton is. Does it have a scroll bar?
Why? You've left out native desktop programs.
What about Ads support?
I can't search for Texts on the main browsers.Thats to big of a bug to use on production Imo.
Please how to show web image on web?
What theme are you using?
He is using CupertinoApp instead of MaterialApp.
#Flutter should add an awesome SEO support for web
Firebase real time database is not working in flutter web. Plz make it plugin for it.
Great video! and how can i pass data from Native App to Flutter WebApp as a web view in native
Is this mean Dart would also to use at web development after Flutter supports web now. 😁
Can you hide apps through web app from your spouse because in Google history stuff is showing up but nothing on the phone?
how do I handle CORS issue when doing http requests ?
You need to configure the server you're sending your requests to. If your source is an apache server, you can add the following lines to the .htaccess
Header set Access-Control-Allow-Origin "*"
I feel bad for you guys for getting less likes while you teach the actual way of making a living!
Interested to try
thank you! nice use case learned a lot :-)
Pretty cool! Impressive!
How to protect API request made from Flutter Web app?
I built my mobile app for web, and it has many many bugs with rendering. Simple apps works, but real apps can't be usable.
Have you tried explicitly set to CanvasKit renderer?
Strange.. I'm using it in production with no problems. Was able to get around any problems (which really was around the way you navigate screens/urls on web vs mobile).
@@arthurlima923 my project relatively complex. Something like Facebook. Many many screens and features. We started native web version with Vue, because its not production ready:(
@@nickolaysavchenko2582 when this podcast was published Flutter web was in a relatively early version, last releases are much more stable
Great... It's very good 👍👍
Nice tutorial..! In flutter web app, flutter web view not working what to do? please help me Sir.
Is this example on github?
Awesome so can now run mobile app into web app what’s about the design
it's pwa ready already? noice
After running flutter create . Web directory is not created.pls help
Can you double check that you ran "flutter channel stable" and "flutter upgrade"?
@@johnryan4928 yes I did.
@@himanshuthakur2504 your flutter project folder should be in lower alphabet... & then re-enter the command flutter create .
Upgrade flutter to 2.0.0 by running flutter upgrade.
When you upgrade flutter to 2.0.0, don't forget to migrate to null safety,
Not Firefox?
Firefox is supported! flutter.dev/docs/development/platform-integration/web#which-web-browsers-are-supported-by-flutter
For debug chrome is required but for release it is not.
hi ı have problem with flutter web if ı click the ctrl and scroll the mouse crome zoom in and zoom out then
my pages are slipping anyone help me about this problem please. Thanks
I love flutter
Amazing!!
Teleprompter?
Support for screen readers?
Idk why but web is laggy on phone browser
Just don't try to reload the page.
Sounds great ,
loved it
Source code please
So love flutter
thanks.
yayy Flutter
Please Turkish subtitle
Finally!!
Excelente!!
SEO?
No SEO as of this version. It is in the roadmap but if is realy important to your app flutter is not the framework for you now. But it is on the works!
flutter web is not working correctly with the cursor in RTL direction. can you fix it?
In love
great!
awesome :)
Awesome.