Responsive Design | Tutorial

Подписаться 78 тыс.

Просмотров 41 тыс.

50% 1

In this video we're going to walk through the two main ways to make responsive apps in FlutterFlow:
1. Duplication - you have one layout that you show on desktop and another you show on mobile
2. Wrap Widget - you configure the width of containers inside the wrap widget so they stack next to each other on desktop and on top of each other (taking up the full width) on mobile.
Ready to try FlutterFlow for yourself? Start building your app today with a free trial 👉 www.flutterflow.com
Follow us on Twitter 👉 / flutterflow
--------------
FlutterFlow is a low-code builder for native apps, bringing design and development into one tool. With drag-and-drop functionality, you can build pixel-perfect UIs and easily connect your app to live data via Firebase or APIs. Plus, you can add advanced features like push notifications, payments, animations, and more. Whether you build your own custom widgets or write custom code, FlutterFlow makes it easy to bring your app ideas to life.

Наука

Опубликовано:

13 апр 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 65

@ermanozkaya Год назад

You are the Morgan Freeman of tutorials 😎 I love all of your tutorials. Thank you..

@FlutterFlow Год назад

🤣

@soupaulomorales Год назад

When I watch this video, it reinforces what I always see in the FlutterFlow team. The mission is clear: you can have your own cross-platform project and be its owner! It's a business model from another planet. Thank you for this enlightening video. 💜

@VictorAlmeida-bg6fl Год назад

Tu poderia trazer um desse pro teu canal só que em português

@soupaulomorales Год назад

@@VictorAlmeida-bg6fl com certeza farei, obrigado por essa sugestão 👊

@novelflowai Год назад

Super helpful. Thank you for sharing this. The little nuggets (like hovering over an element in the widget tree to create a sibling: pure gold!

@vince2nd Год назад

One of the better videos releases by the team. I expect this same quality going forward, stop f'ing around with the content

@xox14 Год назад

Thank you for these amazing videos!

@abelotoikhian5003 10 месяцев назад

Thank you Flutterflow. More wisdom

@CAMILOH Год назад

Very much appreciated thanks guys ❤

@Sergedable Год назад

hello, Thank you for the video. At 3:19, you turn off the flexible widget; how do we get that option? I don't see it in my flutter.

@Nocode_Solutions 11 месяцев назад

One of the best ways to do this now is to structure components in a wrap on your page. That way you don't have to go back and forth when updating logic. I'll be making a video on this. :)

@DanVanDamme 8 месяцев назад

Do you still plan on creating this video? Couldn't find it in your channel, but very interested in it.

@flutterflowexpert Год назад

Great video as always!

@vq8gef32 Месяц назад

Amazing. Thank you

@LeonardoZeferino Год назад

Amazing!!!

@camilatechuni Год назад

Thank you :)

@nogafouz2174 6 месяцев назад

thanks alot but i have problem when i'am using the wrapper - how do you deal with the white space, font sizing etc for mobile view? can you define styles for desktop and mobile separately when using wrapper method ?

@manyan213 5 месяцев назад

exactly how to do that?

@tonyK_72 Год назад

This seems like a lot of work to achieve what tools like Webflow and Framer provide much more efficiently. I love everything else about Flutter Flow, but this example is very basic. As a designer, I am used to working in flex box and grids set at breakpoints. The duplication of widgets doesn't feel very efficient for long-haul management. The programmatic approach seems like a ball-ache. So, can someone help me and my peanut sized brain - I take it that flutter/dart doesn't work in the same way as CSS styling? As in, you can't set specific widths and styles for different breakpoints?

@georgy.design 9 месяцев назад

As a Webflow expert I do agree. Curious why the development process regarding responsiveness in FlutterFlow is so… well, confined if I may.

@AW-pm7tr Год назад

but if using the wrapper - how do you deal with the white space, font sizing etc for mobile view? can you define styles for desktop and mobile separately when using wrapper method ?

@abdulkadirmohammed6230 Год назад

Love it

@Diablist Год назад

Thank you dear , i have one question : What is the pros / cons or whats the better way doing it ? first one or 2nd one or its the same but different approch thank you once again.

@chuckles1980 Год назад

I'm excited for the ability to add responsiveness, and I think the best place for me to start is with the duplication method using two breakpoints as shown. I like the power of visually designing items without having to run the app. I'm very curious how I will duplicate things when many form elements are in play, such as a profile update. Andrew made a few responsive templates I'm reviewing 🙏🏽 but I don't much with forms in those examples. I'll try to play with a single page of items though.

@aribaanjum5761 10 месяцев назад

Pls let me know if the mission went successful. I know how to make widgets responsive mainly but what about text size padding sized boxes in containers columns etc. Too complicating still for me.

@user-hs2ih7pk3b 4 месяца назад

no one can explain like this, its so simple, clear and point to point, by the way when you will launch window app for flutterflow??

@FlutterFlow 4 месяца назад

Very soon...

@SamuelNickolas-yf7wh 5 месяцев назад

Hey @FlutterFlow I tried the 2nd method for responsiveness and when I published the app and tested it on my phone it was not working at all, any ideas?

@bigc1807 Год назад

Good tutorial. One question: on 5:29, the "row" element suddenly showed up. I add a "row" manually, but FlutterFlow does not allow me to drag "hero-copy" and "hero-image" under the "row" element. Does any one knows the solution? Thanks.

@innerthreatcircus5651 6 месяцев назад

I get a overflow in my text inside the wrap, container, or whatever. how can I solve this?? thanks a lot

@tamaowens6581 Год назад

Which method is not so data heavy on the server? Or does it not matter?

@flutter_fusion Год назад

Can you please tell me the video editor or tool used in making the video

@youngsdiscovery8909 Год назад

Is there performance difference between method 1 and 2? Method 1 seems to be more demanding, I guess.

@DanielGadus Год назад

This question is interesting, hope someone will answer

@nguyenquangngoc3993 Год назад

Maintenance for opt1 would also be harder

@youngsdiscovery8909 Год назад

@Nguyen Quang Ngoc Good point. However, we can use the theme widgets for that matter.

@tryderrick Год назад

YES I WANT TO KNOW

@victorwilliams1823 9 месяцев назад

hello....what about responsiveness between mobile device? .....lets say from iphone 13 to iphone 14 or samsung to iphone.....How do i go about it?

@user-rg5je4ls5b 3 месяца назад

Did you find a solution to the problem? I am also suffering from the same problem

@mridulanand1683 Год назад

How can we add custom padding via Method 2?

@AlfaRomeoFox 2 месяца назад

Jajaja I am strugglying with Queries with a date range... nothing to do with this video but I took the chance 🙃

@thepramodgeorge Год назад

@flutterflow Here's something I noticed. Even when a widget is not visible (by using responsive visibility), it still affects the spacing. For example, in the header section, when we use a row with three elements that is aligned by it' ends. Even if one of those elements are hidden, the spacing works as if all three are present. Any thoughts team?

@Nocode_Solutions 11 месяцев назад

Check to make sure you are applying on the container having the element (if it's in any)

@Mani1990 Год назад

Thanks John higgins

@FlutterFlow Год назад

😉

@Mani1990 Год назад

@@FlutterFlow I just asked for this video in yesterday's live and it was done ☺️

@AM-qk7ox Год назад

Unrelated, but when will user auth via supabase be released? Been waiting patiently for a long time, for something that should be on the top of the agenda for the supabase integration.. 😊

@talenodigital Год назад

It's out now!🎉 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-uQo9lkQh12Q.html

@AutomationWithSholz Год назад

FINALLY

@andreipolkanov 6 месяцев назад

Hi guys! I don't know why, but RU-vid plays videos from your channel with constant interruptions even if it was paused and partially buffered before playing. Playing without interruptions is possible only on the worst video quality settings. And it's not possible to watch your amazing educational videos this way. It's not an issue with my Internet because other channels play perfectly even with the best quality. And I have the Premium subscription. Just wanted you to know about the problem, and maybe I'm not the only person with this problem.

@reshmakitchanrecipes4782 25 дней назад

How can I make my app for different android screen resolution??? Please make video....

@divyanshkumar5053 Год назад

I think you need to update your getting started with flutterflow series

@tainguyen27 2 месяца назад

In most of the case, we want the "Fraction of Parent Width" not Screen Width. Is there the way to do that?

@ignacioblacksmith6764 Год назад

Make a video about creating galleries, carousel and slideshows..

@reecebrauer7289 Год назад

Wrap widget isn't working. I tried replacing it and it crashed. I created a seperate one and added a row and it crashed. Everytime i try to add a container it crashes... how exactly does this thing work?

@shrihari5259 Год назад

How to start mobile to pc or pc to mobile? Which is easy?

@user-mp7je8ls3w 6 месяцев назад

how can i make the container adjust its size based on its children?

@krasab Год назад

Hello! I don't have a Flexibe option in the Expansion settings.

@FlutterFlow Год назад

Coming very soon:)

@davidmimay 3 месяца назад

0:00 Intro 1:00 Duplicate widgets 5:25 Using wrap Your welcome.

@Abdullahmoukarrame Год назад

why when i try to duplicate anything it says cant duplicate root widget? trying ti duplicate container inside of the gridview and its just not working. can anyone help please! thanks!

@FlutterFlow Год назад

Sure! First, your root widget can only have one child (that's from Flutter), so if you need multiple children use a widget that can accept that like a row or a column. Second, you should be able to duplicate a container in a gridview. Try deleting it and adding the gridview and then the container. Let me know if that doesn't work.

@Abdullahmoukarrame Год назад

@@FlutterFlow I figured I had to change the navigator, looks like Mozilla doesnt respond properly. I moved to chrome and it's fine. Thank you!