Flutter Web - Building a Responsive Website in Flutter | Flutter UI Design Tutorial

#flutterweb #flutterforweb #fluttertutorial
In this Flutter UI Design for Web Tutorial i will be taking you through the process of Building a Responsive Websites using Flutter. Flutter for Web (Flutter Hummingbird) is a code-compatible implementation of Flutter that is rendered using standards-based web technologies: HTML, CSS and JavaScript. With Flutter for Web, you can compile existing Flutter code written in Dart into a client experience that can be embedded in the browser and deployed to any web server. You can use all the features of Flutter, and you don’t need a browser plug-in for any of it.
We will be aiming to create a Responsive Flutter Webpage that could reformat its content based on the Target Device.
Flutter for Web Startup Guide:
flutter.dev/docs/get-started/web
Github (Source) : github.com/letsdoit07/flutter...
🔥 Auto-Generate Flutter Custom Paint Code TRY THIS FREE TOOL👇:
👉 Flutter Shape Maker: fluttershapemaker.com
🔥 Learn About the Most Important Widgets in Flutter 👇:
👉 Widget Essentials Series: bit.ly/3GpfiYw
👉🏻 Product Hunt: www.producthunt.com/posts/flu...
(Your UPVOTE Means a lot! 🙌)
If you find this video useful consider Supporting @RetroPortal Studio :
👉 Buy Me a Coffee: www.buymeacoffee.com/theretro...
👉 Patreon: / retroportalstudio
Social Links @RetroPortal Studio :
👉 Twitter: / theretroportal
👉 Medium: / retroportalstudio
👉 Instagram: / retroportalstudio
👉 Patreon: / retroportalstudio
👉 GitHub: github.com/retroportalstudio
If you like the tutorial, please hit the LIKE and Subscribe button and also consider supporting me on Patreon or Buy Me a Coffee for More Flutter Tutorial on RetroPortal Studio.
Thank you for Watching! Happy Coding :)
Flutter Hummingbird | Flutter for Web | Flutter Web | Flutter Web Development | Flutter Web App | Flutter Web Tutorial

[@JohnHAdams-vo2pk]

Nice!. Been playing with flutter for the last few months and was planning on looking at using it for a web app. Thanks for this video.

[@paulcodes]

Great tutorial! Awesome over the shoulder and thanks for showing (and talking through) how you navigate real world errors and issues.

[@atom8861]

First view and first like! Thank you for your amazing content! I'm planning on learning Flutter. I still haven't started, since I am busy right now, but I'm slowly gathering resources. Your channel is one of the best sources I've found! Cheers!

[@RetroPortalStudio]

Thank you very much for your Support! ✌😁

[@mamenggaluh8897]

So happy Flutter web is in Stable branch now. Can't wait for more Web tutorials!

[@hiimmehdi]

Amazing content ! Clear Audio and Video, thank you for this video and hoping for more content, good luck

[@jscoys3395]

Super cool tutorial! Honestly the best one because it shows us how to split code by devices!

[@mansaha9288]

The minute pls

[@jscoys3395]

@@mansaha9288 what?

[@mansaha9288]

@@jscoys3395 I mean tag the time

[@samyaksingh7445]

Make more awesome web tutorials like this 🙏

[@themelankolis1922]

Great! Please make more videos like this with different design.

[@user-lo7go5xz8i]

am 6th min and already you have saved my struggle with responsive layout, thanks bro

[@arifbudimanarrosyid]

Amazing content, keep it up!

[@abirahmed5398]

Thank you for this beautiful tutorial. You nailed it!!

[@garvwadhwa4871]

Thank you so much for this video man!!! great job!!!!!!!!!!!

[@sunaarun6603]

Thank you for the great effort, please do more videos like this one, and videos how to move from one page to another

[@MogTech]

I really loved it!

[@RetroPortalStudio]

If you find this video useful, consider Following me on: Twitter: twitter.com/theretroportal Instagram: instagram.com/retroportalstudio LinkedIn: www.linkedin.com/in/parasjainrps Happy Coding! ✌️😁

[@dalestewart]

Excellent tutorial!

[@LeagueRandomPlayer]

the issue with the image was that you typed "images.png" and was "image.png"

[@dearvivekkumar]

Nice video tutorial for showing how to make the responsive UI in flutter. Thanks a lot :) Coming from web development background, writing these seems a lot. Hoping to get used to it. I wish if flutter have some way like css.

[@kenomar]

Thanks for this !!!

[@airadisini1293]

this is the tutorial that i have been looking for...thx. can u make more tutorial please?

[@Junior-vm9sh]

We appreciate everything you do for your subscribers. Can you please post a video on how to integrate any type of payment in Flutter? Such as google pay, apple pay or Stripe? I will really appreciate. Thanks

[@EDIRomanul]

Thanks for the tutorial

[@someshsahu4638]

Very nice explanation thankyou so much 🙏🏼🙏🏼🙏🏼

[@bonisebi4044]

Thanks for the tutorial. It was very helpful and easy to catch up. Can u do one showing how to build a single page scrolling website, with a btn click that scrolls to particular page.

[@Day-yc4it]

you are the best, make more tutorial please

[@slow_fk8]

you are the best. thats all

[@ChaminduWeerasinghe]

Nice explanation. thanks alot

[@almanamo6858]

Great, great.

[@youling1997]

Hello, great video. I wonder what are the plugins that you use for the VS code?

[@reactdev101]

4:30 just use TAB there in order to jump into another value, it is way more easier.

[@vladyslavababich9272]

Thank you for tutorial

[@celestesierra2462]

Amazing!!

[@saswatsaubhagyarout3480]

thanks for this

[@f00kwhiteblackracismwarsh07]

Flutter is king Everybody bow i said bow right now!

[@monikasharma3403]

Nice tutorial

[@jotrockenmitlocken]

Great job. Thanks :)

[@Ankit_2002]

Ctrl+.

[@uhim10]

GREAT.

[@amjadfarooq1361]

Nice

[@victormendoza3295]

Wondering if I should start with NextJS first keeping an eye on svelte and dart.

[@dennismagolo8731]

This is goated

[@nayanamtanuj]

Generally we wrap every UI widget element in a container. and then it might be a part of row or column. But when we look at the image widget that you have added, It's outside the container. Question 1 - Is there a specific reason for that? Question 2- When we move the page to size of tablet/mobile that image seems to be causing an overflow. Can you kindly look into it? Thanks!

[@amirhafizkhan9304]

Awsum

[@faizc9984]

Hi...nice one. Can I use this for my personal project? To get started?

[@zuherabud744]

hey can you make a video explaining the difference between developing websites in flutter and using other technologies also hosting how can it be live on any device around the globe thanks

[@user-cs1ym8dw8e]

Which Extension are you using to Cover With the Padding?

[@androidsavior]

I'm still not info Flutter, I wonder if you use the code same / most of it for both mobile apps and web or you need to rewrite everything twice ?

[@NuwanThisara]

22:49 yes I agree with you

[@ade_yee3116]

Awesome one, but how do I fix "prefer const with constant constructor warning" thanks!

[@narayanap5553]

Hi, nice video. Can u please explain flutter with firestore custom login auth, ie without email and password.some existing username and pwd.

[@rajaparivesh8395]

How to link the flutter web app with backend? Please make a video on this topic.

[@solagm4236]

I tried adding route to the "Our package" material button, and im getting the 'Context' can't be assigned to the parameter type 'BuildContext' error :(

[@TomerBenDavid]

how does it automatically add the closing comments like //column when you open such a section?

[@avi7278]

So much for DRY code!

[@Huholoman]

7:45 why is there in the "else if" also negation of first condition? this part of expression will be always true

[@shitabmushfiq-ulislam6974]

Wouldn't Wrap Widget be a better solution for multiple screen sizes?

[@Michael_Unce]

Hey I hope you're still here and I know this is almost a year old at this point but at 40:28 you changed the column to a Singlechildscrollview and this messes up the padding, and causes a white box to appear from the bottom as you decrease the width of the screen. I'm super new to flutter but at the bottom of the page there is a big white rectangle and it gets bigger as the width of the browser decreases. Any idea how to fix this? I think it has to do with the image size I used the same picture from your github and it seems to work okay. I'm super new to flutter and it would help me ALOT if you know some solution to this. Thanks!

[@RetroPortalStudio]

Well, i insist you to check the tutorial once more mate. I WRAP the Column with SingleChildScrollView... i do not replace it. ✌😁

[@NewSubmitterGuy]

Don't know if you figured this out after you re-watched the video, but you initially referenced the image in your code as lp-images.png instead of lp-image.png 😉 Great tutorial. Thanks for sharing your skills.

[@RetroPortalStudio]

Keen Observation 😁🤣😂

[@jahnavinaik9427]

does the tutorial content database connectivity also?

[@harishbariya3463]

flutter back what use

[@zerosandones7547]

What do you call the art style of the image in the right side pf the landing page? It looks so good

[@mr_adisa]

Zeroes and Ones I believe it’s called Isometric

[@zerosandones7547]

@@mr_adisa THANK YOU

[@manashejmadi]

How to deploy this?

[@blenderup919]

could you please tell me what is this VS Code theme?!

[@markjason2]

Why if I refresh the browser, it sent me back to starter screen, or first page of route.

[@abiramidevsd2519]

How to auto navigate to the content by selecting appbar button in the "Flutter Web". For example: if I click on the AboutUs in the app bar, it has to automatically scroll down to AboutUs content. Kindly, help me with this..

[@nayanamtanuj]

If we add one more word to title of the application. Let's say "Homepage Retro Portal Studio" and you change the size from desktop to tablet, we see overflow exceptions.

[@RetroPortalStudio]

Hey! My bad i might have overlooked that while making the tutorial. You can add overflow property to Text Widget and that will do it! or you can change size of text with device size. 😁 If you want to learn how to do that i do have a video kzbin.info/www/bejne/bF7HcnR4lKaWjMk

[@nayanamtanuj]

@@RetroPortalStudio It's all good. Thanks for the prompt response. I would go with decreasing the size. :)

[@satishgummadi4158]

How we hide the url bar & bottom navigation in the flutter web responsive mobile browser?

[@MrRiyality]

Where can we find search cool royalty-free images?

[@Madurai2Malaysia]

how to resolve , "unable to load assets error. please reply to me Asap

[@noblenetdk]

Nice explanation, but please tell me that there's a way around all that copy code. I'm new to dart and flutter but code DRY

[@jellyamna5521]

when Flutter web ready to production ?? any idea

[@loaymohamed8134]

Hi Sir, Thanks a lot for this great video it helped me a lot in building and deploying my web app.. But there is a small problem if you could help me, there some images from the assets doesn't load in the website but also others did upload!! .. so do you have any reason for that? once again thanks a lot..

[@RetroPortalStudio]

I'll need look at your assets folder for that. Please check if you have mentioned them in pubspec.yaml file ✌😁

[@loaymohamed8134]

@@RetroPortalStudio I mentioned them of course at the pubspec.yaml as they are appearing fine at debug mode .. but once deployed some aren't loaded :(

[@tonydavidz]

@@loaymohamed8134 probably because flutter web is still in beta

[@poisonels8023]

please how to display image on web build with flutter

[@TomerBenDavid]

How did you automatically put in full code snippets?? Like you typed something and the whole code for widget appeared.

[@RetroPortalStudio]

These snippets are available for both VSCode and Android Studio. If not accessible you can download the extension from marketplace 😁

[@royalagent2113]

@@RetroPortalStudio what is the name o the extension?

[@shashwataditya6685]

Thanks for the easy-to-understand content @RetroPortal! Is it possible to create (Instagram/Snapchat) story-like interactive websites using flutter?

[@RetroPortalStudio]

Interesting idea man! Will soom create something great for this ✌😁

[@shashwataditya6685]

@@RetroPortalStudio Would be great! Do let me know when you make one. 👍

[@RetroPortalStudio]

@@shashwataditya6685 Sure man! I'll reply you with the same. Appreciate if you also subscribe ✌😁 Happy to have you here!

[@shashwataditya6685]

@@RetroPortalStudio Sure! Thanks a lot :)

[@saliyabandara8989]

Sir can you plz make dart course.

[@wildanabrar5576]

why my logo can not appear on the desktop? please respon

[@aldinlapinig]

How to deploy this to a shared hosting? Thanks

[@ExtraServingsBTS]

'firebase deploy'

[@ericong520]

Hi, does . these code only work for webapp? can i run the same flutter code to build native app? so 1 single codes to build both andriod, ios and webapp?

[@RetroPortalStudio]

It most definitely would. But minor tweeks are recommended✌😁

[@promvisal-741]

@@RetroPortalStudio yes thanks for your great video! Can you show us how to use minor tweeks

[@mouzinu]

@@RetroPortalStudio how can I do that?

[@narayanap5553]

Hi, nice video. Can u please explain flutter with firestore custom login auth, ie without email and password.some existing username and pwd.

[@LosTresPollos7]

Flutter web allows you to use one single codebase for both web and mobile.

[@JK92007]

what programing language should I know to create a responsive website in flutter....? plz. let me know...reply any one, please...

[@bhuvanesharasu]

Dart is the default language used by Flutter SDK.

[@buraksinikci1532]

What is the name of the plugin for the auto-comment code?

[@Gabeyre]

The Flutter plugin for visual studio code has the auto end tags. Its not comments either its judt therre only on editor. If you oprn the .dart files someehere else these end tag overlated virtual comments arent there.

[@jamal6847]

Do I still need to learn HTML, CSS and JavaScript to develop webapps in flutter?

[@AccessCode101]

No you don't but you need to learn dart and flutter. Mainly flutter if it's all visual.

[@LosTresPollos7]

Jamal No. Flutter compiles to JS, and builds the html and css for you. Only language you need to know to use Flutter, is Dart programming language

[@debasishbiswas3809]

What should I learn flutter or web dev

[@RetroPortalStudio]

Both 😅

[@MohitChaprana]

How to make website like yourstory.com, youthkiawaz.com, dev.to.

[@TomerBenDavid]

:)

[@mysuperemecy]

How to do navigation in this flutter web app?

[@RetroPortalStudio]

Well, It works the same way regular navigation works in flutter.

[@mysuperemecy]

@@RetroPortalStudio I want to understand that how to create a bookmark able url and later of I open the same url I should be able to land on same widget

[@pedrokalil4410]

@@mysuperemecy named routes.

[@Flumyn]

14:04 how to do that

[@saagilkhan5854]

In flutter website should we know HTML ,CSS and JavaScript also ??

[@mahdisalah6834]

No, you shouldn't.. Because you will not use them :)

[@saagilkhan5854]

@@mahdisalah6834 thanks ✌️

[@Fishycheeze]

IF YOU ARE ASKING YES ANDROID STUDIO SUPPORTS WEB

[@RetroPortalStudio]

Yes it does now!

[@israelterorisprikopat]

Will fluter take down html/css or even js in the future ?

[@keithbacalso9433]

Is this what they call "Hummingbird"

[@akashuday7107]

Some errors i got and how i fixed it (ERROR 1) [flutter] flutter doctor -v 'crumb' is not recognized as an internal or external command, operable program or batch file. Error: Unable to find git in your PATH. exit code 1 (FIX) Go to flutter installation folder and inside flutter/bin edit the flutter.bat file using a text editor and remove the line (20) that says IF EXIST "%mingit_path%" SET PATH=%PATH%;%mingit_path% The code should look like this on those lines REM If available, add location of bundled mingit to PATH SET mingit_path=%FLUTTER_ROOT%\bin\mingit\cmd Save and Run flutter doctor and everything should work fine. (ERROR 2) flutter doctor takes too long (fix) I downloaded the previous version of the sdk it worked like a charm (ERROR 3) Android sdkmanager not found. Update to the latest Android SDK and ensure that the cmdline-tools are installed to resolve this. (fix) Open Android Studio Tools Menu, SDK Manager In the window that comes up there are inner panels, choose SDK Tools panel Tick Android SDK Command-line Tools Choose Apply button near the bottom of the window This worked (ERROR 4) `The term 'flutter' is not recognized as the name of a cmdlet, function, script file, or operable program. (fix) put the correct part in the env variables like i had put D:\flutter insted of D:\flutter\bin that worked

[@madhairsilence]

Sorry but worst way to design this app. Adding empty boxes inbetween to create spaces ?? Really ??

[@RetroPortalStudio]

Well, i dnt remember what exactly i did there but SizedBox is much efficient way to add space or else you can use Expanded to wrap you element and then align content accordingly. ✌😁 .

[@sunaarun6603]

Thank you for the great effort, please do more videos like this one, and videos how to move from one page to another