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

Поділитися
Вставка
  • Опубліковано 3 січ 2025

КОМЕНТАРІ • 135

  • @mamenggaluh8897
    @mamenggaluh8897 3 роки тому +6

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

  • @RetroPortalStudio
    @RetroPortalStudio  4 роки тому +3

    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
      @dalestewart 4 роки тому +1

      Excellent tutorial!

    • @LeagueRandomPlayer
      @LeagueRandomPlayer 4 роки тому

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

  • @jscoys3395
    @jscoys3395 4 роки тому +21

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

  • @jeffvalzo
    @jeffvalzo Рік тому

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

  • @JohnHAdams-vo2pk
    @JohnHAdams-vo2pk 4 роки тому +6

    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.

  • @atom8861
    @atom8861 5 років тому +5

    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!

  • @abirahmed5398
    @abirahmed5398 11 місяців тому +1

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

  • @paulcodes
    @paulcodes 4 роки тому +3

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

  • @someshsahu4638
    @someshsahu4638 2 роки тому +2

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

  • @hiimmehdi
    @hiimmehdi 4 роки тому +1

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

  • @samyaksingh7445
    @samyaksingh7445 4 роки тому +3

    Make more awesome web tutorials like this 🙏

  • @ChaminduWeerasinghe
    @ChaminduWeerasinghe 3 роки тому +1

    Nice explanation. thanks alot

  • @sunaarun6603
    @sunaarun6603 4 роки тому

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

  • @reactdev101
    @reactdev101 4 роки тому +1

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

  • @themelankolis1922
    @themelankolis1922 4 роки тому

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

  • @Michael_Unce
    @Michael_Unce 4 роки тому +1

    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
      @RetroPortalStudio  4 роки тому

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

  • @celestesierra2462
    @celestesierra2462 Рік тому +1

    Amazing!!

  • @monikasharma3403
    @monikasharma3403 3 роки тому

    Nice tutorial

  • @Junior-vm9sh
    @Junior-vm9sh 3 роки тому

    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

  • @jotrockenmitlocken
    @jotrockenmitlocken 2 роки тому +1

    Great job. Thanks :)

  • @EDIRomanul
    @EDIRomanul 3 роки тому +1

    Thanks for the tutorial

  • @arifbudimanarrosyid
    @arifbudimanarrosyid 5 років тому +2

    Amazing content, keep it up!

  • @Madurai2Malaysia
    @Madurai2Malaysia 3 роки тому

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

  • @vladyslavababich9272
    @vladyslavababich9272 3 роки тому +1

    Thank you for tutorial

  • @Day-yc4it
    @Day-yc4it 4 роки тому +1

    you are the best, make more tutorial please

  • @almanamo6858
    @almanamo6858 Рік тому +1

    Great, great.

  • @dearvivekkumar
    @dearvivekkumar 4 роки тому

    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.

  • @androidsavior
    @androidsavior 4 роки тому

    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 ?

  • @bonisebi4044
    @bonisebi4044 3 роки тому

    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.

  • @garvwadhwa4871
    @garvwadhwa4871 4 роки тому

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

  • @BerrysweetXD
    @BerrysweetXD 4 роки тому +1

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

  • @NewSubmitterGuy
    @NewSubmitterGuy 4 роки тому +1

    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.

  • @Flumyn
    @Flumyn 2 роки тому +1

    14:04 how to do that

  • @Huholoman
    @Huholoman 4 роки тому

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

  • @victormendoza3295
    @victormendoza3295 3 роки тому

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

  • @TomerBenDavid
    @TomerBenDavid 4 роки тому +2

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

    • @RetroPortalStudio
      @RetroPortalStudio  4 роки тому +1

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

    • @royalagent2113
      @royalagent2113 2 роки тому

      @@RetroPortalStudio what is the name o the extension?

  • @MogTech
    @MogTech 4 роки тому +1

    I really loved it!

  • @zuherabud744
    @zuherabud744 3 роки тому

    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

  • @amjadfarooq1361
    @amjadfarooq1361 3 роки тому

    Nice

  • @ade_yee3116
    @ade_yee3116 3 роки тому

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

  • @rajaparivesh8395
    @rajaparivesh8395 4 роки тому +1

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

  • @kenomar
    @kenomar 4 роки тому +2

    Thanks for this !!!

  • @dennismagolo8731
    @dennismagolo8731 2 роки тому +1

    This is goated

  • @debasishbiswas3809
    @debasishbiswas3809 3 роки тому +1

    What should I learn flutter or web dev

  • @nayanamtanuj
    @nayanamtanuj 4 роки тому +2

    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
      @RetroPortalStudio  4 роки тому

      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 ua-cam.com/video/6-dAAB_AcVg/v-deo.html

    • @nayanamtanuj
      @nayanamtanuj 4 роки тому

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

  • @000a-e8k
    @000a-e8k 4 роки тому

    Which Extension are you using to Cover With the Padding?

  • @shitabmushfiq-ulislam6974
    @shitabmushfiq-ulislam6974 3 роки тому

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

  • @NuwanThisara
    @NuwanThisara 4 роки тому

    22:49 yes I agree with you

  • @zerosandones7547
    @zerosandones7547 4 роки тому +1

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

    • @mr_adisa
      @mr_adisa 4 роки тому

      Zeroes and Ones I believe it’s called Isometric

    • @zerosandones7547
      @zerosandones7547 4 роки тому

      @@mr_adisa THANK YOU

  • @ericong520
    @ericong520 5 років тому +2

    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
      @RetroPortalStudio  5 років тому

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

    • @promvisal-741
      @promvisal-741 5 років тому +1

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

    • @mouzinu
      @mouzinu 5 років тому

      @@RetroPortalStudio how can I do that?

    • @narayanap5553
      @narayanap5553 5 років тому

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

    • @LosTresPollos7
      @LosTresPollos7 4 роки тому

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

  • @jahnavinaik9427
    @jahnavinaik9427 4 роки тому

    does the tutorial content database connectivity also?

  • @faizc9984
    @faizc9984 4 роки тому

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

  • @youling1997
    @youling1997 4 роки тому

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

  • @loaymohamed8134
    @loaymohamed8134 4 роки тому +2

    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
      @RetroPortalStudio  4 роки тому +1

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

    • @loaymohamed8134
      @loaymohamed8134 4 роки тому

      @@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
      @tonydavidz 4 роки тому

      @@loaymohamed8134 probably because flutter web is still in beta

  • @saagilkhan5854
    @saagilkhan5854 4 роки тому +1

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

    • @MS6834
      @MS6834 4 роки тому +1

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

    • @saagilkhan5854
      @saagilkhan5854 4 роки тому +1

      @@MS6834 thanks ✌️

  • @slow_fk8
    @slow_fk8 4 роки тому +1

    you are the best. thats all

  • @nayanamtanuj
    @nayanamtanuj 4 роки тому

    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!

  • @markjason2
    @markjason2 3 роки тому

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

  • @manashejmadi
    @manashejmadi 5 років тому +3

    How to deploy this?

  • @noblenetdk
    @noblenetdk 2 роки тому

    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

  • @TomerBenDavid
    @TomerBenDavid 4 роки тому

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

  • @satishgummadi4158
    @satishgummadi4158 3 роки тому

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

  • @solagm4236
    @solagm4236 4 роки тому

    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 :(

  • @blenderup919
    @blenderup919 4 роки тому

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

  • @jellyamna5521
    @jellyamna5521 4 роки тому

    when Flutter web ready to production ?? any idea

  • @abiramidevsd2519
    @abiramidevsd2519 4 роки тому

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

  • @wildanabrar5576
    @wildanabrar5576 2 роки тому

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

  • @amirhafizkhan9304
    @amirhafizkhan9304 5 років тому +1

    Awsum

  • @MrRiyality
    @MrRiyality 4 роки тому

    Where can we find search cool royalty-free images?

  • @saliyabandara8989
    @saliyabandara8989 4 роки тому

    Sir can you plz make dart course.

  • @poisonels8023
    @poisonels8023 3 роки тому

    please how to display image on web build with flutter

  • @mysuperemecy
    @mysuperemecy 5 років тому +1

    How to do navigation in this flutter web app?

    • @RetroPortalStudio
      @RetroPortalStudio  5 років тому

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

    • @mysuperemecy
      @mysuperemecy 5 років тому

      @@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
      @pedrokalil4410 5 років тому +1

      @@mysuperemecy named routes.

  • @harishbariya3463
    @harishbariya3463 5 років тому +1

    flutter back what use

  • @Fishycheeze
    @Fishycheeze 4 роки тому +2

    IF YOU ARE ASKING YES ANDROID STUDIO SUPPORTS WEB

  • @narayanap5553
    @narayanap5553 5 років тому

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

  • @uhim10
    @uhim10 5 років тому +1

    GREAT.

  • @saswatsaubhagyarout3480
    @saswatsaubhagyarout3480 5 років тому +1

    thanks for this

  • @buraksinikci1532
    @buraksinikci1532 4 роки тому

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

    • @Gabeyre
      @Gabeyre 4 роки тому

      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.

  • @mohitchaprana
    @mohitchaprana 4 роки тому +1

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

  • @aldinlapinig
    @aldinlapinig 4 роки тому

    How to deploy this to a shared hosting? Thanks

  • @shashwataditya6685
    @shashwataditya6685 5 років тому +1

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

    • @RetroPortalStudio
      @RetroPortalStudio  5 років тому +1

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

    • @shashwataditya6685
      @shashwataditya6685 5 років тому +1

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

    • @RetroPortalStudio
      @RetroPortalStudio  5 років тому +1

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

    • @shashwataditya6685
      @shashwataditya6685 5 років тому

      @@RetroPortalStudio Sure! Thanks a lot :)

  • @JK92007
    @JK92007 4 роки тому

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

    • @bhuvanesharasu
      @bhuvanesharasu 4 роки тому

      Dart is the default language used by Flutter SDK.

  • @avi7278
    @avi7278 4 роки тому

    So much for DRY code!

  • @keithbacalso9433
    @keithbacalso9433 4 роки тому

    Is this what they call "Hummingbird"

  • @israelterorisprikopat
    @israelterorisprikopat 4 роки тому

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

  • @akashuday7107
    @akashuday7107 3 роки тому

    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
    @madhairsilence 4 роки тому +1

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

    • @RetroPortalStudio
      @RetroPortalStudio  4 роки тому

      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. ✌😁 .

  • @TomerBenDavid
    @TomerBenDavid 4 роки тому +1

    :)

  • @sunaarun6603
    @sunaarun6603 4 роки тому

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