Mastering Layouts in FlutterFlow

In this video we show you a 4 step system for converting your designs into layouts in FlutterFlow:
1. Identify Atomic Widgets
2. Group Close Widgets
3. Add a Background (if needed)
4. Set Alignment & Spacing
Ready to try FlutterFlow for yourself? Start building your app today with a free trial 👉 www.flutterflo...
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.

[@jimvh7557]

This video is GOLD in understanding the concept. Brilliantly explained.

[@user-tm9qb6cc3i]

This is the most BEAUTIFULLY done layout tutorial video I have ever seen👍👍

[@reza2kn]

THANK YOU! I was SO LOST with FlutterFlow not understanding anything.. this helped a lot! I feel like this video should be recommended in the app to the new users :D

[@oluIsaac7]

This is one of the most not talked about concepts in flutterflow. Thank you for this🤗🤗

[@oussamanocode]

Great job! I am a beginner, and now I can design complex applications with just two months of experience. It's very easy to create a UI/UX with FlutterFlow, but adjusting the actions can be challenging for French and Arabic speakers like us. There is a shortage of courses in these languages. We need official channels that cater to all languages. Thank you, FlutterFlow!

[@RR-et6zp]

nah

[@oussamanocode]

Thank you to anyone who liked my comment

[@danielhabibi]

There's a great FF YT channel in Arabic already.

[@oussamanocode]

yes it is too good , thanks to this channel but there is therefore no backend course and tutorial of actions, and the channel offers paid training for the entirety@@danielhabibi thanks for your feedback

[@Samatha5]

Great Explanation 🙌... Thank you soooooo muchhhhhh❤

[@jamiechen168]

Just want to say special thanks to you and your team for producing this and so many training videos for FlutterFlow. You and your team are awesome!!

[@FlutterFlow]

Thank you so much, Jamie! These comments keep us going ❤

[@IsaacWilsonSI]

Great video! Could you please make a video on how to make reusable components - and how to connect these components to your database. I think this is important for anyone trying to build a scalable app - and its quite tricky!

[@supertab365]

Great video. Finished the Flutterflow University playlist. Would love to see a Masterclass/advanced level videos.

[@danielhabibi]

Awesome video! So clear and simple. Beautifully done! I'll be sharing this with one with every new FF user. Thanks, John!

[@majweezy]

he's soo good at explaining in these videos soo concise and right to the point maan I have learned so much

[@AudaciousHub]

Excellent Video. Wish we can get a detailed video like these for actions/logic and for database. It will really help non-coders like us to build something amazing.

[@the_digitalpro]

Awesome video and nicely annotated!

[@MarlonVan]

This is so good, thank you guys again for awesome videos. I'm learning so much.

[@sujaritnrc]

I have watched your previous layout tutorial but this one is clear than and nice video edition.

[@hakaishin101]

I am a full-stack developer with Code. I got into the No-code boat about 3 months ago and I got to say flutter-flow is amazing and makes my work so much easier. I have a lot of ideas that I think would improve the app. 1. Imagine a feature where all (Variable Text widgets) have access names, developers can access the variables from the widget and use them in custom functions on the same page. Maybe call them (Widget Variable States).

[@roboduck4248]

Thank you for visualizing this! Helps a lot!

[@blueli6351]

So good. Only took 10 mins to explain such complex concept

[@junmagic8847]

this is so helpful thanks!

[@shrihari5259]

How can we make it responsive? I always have some overflow seen after deploying? How to avoid overflow and responsive for all screens? Is auto adjustment feature is available? Or we have to do it manually?

[@PA20243]

What a value! Thanks a lot :)

[@hasankhalid]

Very helpful. More videos like this and also on how to plan/develop this from scratch

[@zhixory]

Can you extend functionality to the chart widget? So that color on the lines can be set from backend, same with legendname, etc. More custom options. Maybe use fl_chart as starters?

[@ShaunyTravels.]

Was just struggling with this thank you 😂❤❤❤

[@tanujain2605]

Great video❤

[@user-cd8on3um6o]

You're the best teacher.

[@clanflow-gf5le]

Beautiful!

[@BruceLee-tm3cg]

clear and simple, get to the point!

[@user-df1zf9ti2w]

amazing beautiful！！amazing clear！！got it 。Thanks for awesome work。

[@jaguarconsultoriadigital8147]

Thanks, fantastic !!!

[@RR-et6zp]

Great vid

[@dare7410]

fantastic explanation

[@hellieimani1218]

Isn't it a good practice to wrap the whole thing in a container and to set its max width/height to 100% so as to get a bounded top-level setting? (This can help prevent crashed due to unbound widget/parent issue.)

[@FlutterFlow]

Yes. This video is just about getting the widget tree correct. There will be another video on alignment, sizing, and spacing

[@telsoamorim1101]

Perfect

[@soyaleye]

Awesome, one question though, what do you think about going the other way round, like starting big then going deep into smaller containers and widgets and rows/columns. Basically, you went inside out, I’m talking about going “outside in”

[@MoonDesignDev]

You can, the problem you run into there is its less clear which widgets you need because there are less visible organizational widgets. The more and more practice you get with layout the more you will be able to intuitively understand the layout so going from top to bottom will become easier. This is just the easiest most reliable way to layout if you're struggling with a design or are newer to layouts.

[@soyaleye]

@@MoonDesignDev okay, that makes sense. Thanks for the insight.

[@docmaillou]

are you guys hiring, love the project, 5 years in coding experience

[@gusbiais]

How this push up container is done? How does it expand?

[@FlutterFlow]

Hi Gustavo, can you explain what you mean?

[@gusbiais]

@@FlutterFlow This container below, looks like a bottom sheet, I wish to learn how make it expand over the content that comes first.

[@WEAREANTIDOTEDEL]

I believe that is regarding the bottom menu card which I believe expands into a push-up menu when clicked or dragged something I would also like to Implement. Please help

[@tariqzamir2916]

Can you please provide me with clear instructions on how to add an attachment file in the Flutterflow app?

[@Wormsandconditions]

did anyone else catch the “top is the bottom” reference?

[@clarkmakes]

I bet these four steps would make a wonderful Figma plugin.

[@gmostafaali]

Hi FF team please fix the web canvakit issue which broken the data. I am trying to publish user's profile but profile image not showing, only text data showing on the web.

[@Sergedable]

Hey, you have to look into the platform section in advance web settings.

[@gmostafaali]

@@Sergedableokay I will be looking on it thank you.

[@gmostafaali]

@@Sergedable still problem even i activated canvakit, crox proxy for image in platform advanced setting with blaze firebase

[@Sergedable]

are you storing or using firebase or supabase@@gmostafaali

[@dreamchaser5274]

This video is base for beginner. Brilliant video! thanx FF

[@maskedvillainai]

The issue is the context ‘unaware’ structure of this CDE UX. Nothing about how FF’s editors were built seem remotely relevant for any of your customers. It breaks multiple design laws. Fitt’s, common region, proximity law: alignment controls, fonts, inputs etc constantly move the change. they force scroll you some random place and alignment is scattered in areas all over that make absolutely zero sense for layout logic. This is strange because if you’re trying to force this extremely niche Dart hierarchy order on every human using it then…do that. But you can’t have some settings in grids and panels all over but then the widgets and layers tree in the reverse sort style. Nothing goes in any area that feels remotely relational in its position. Trying to find a setting takes forever (Hicks law) even after doing it over a thousand times. It’s never gotten easier. Pragnaz: this decision still boggles my mind. Logic of trying to match dart’s widget struct has no actual benefit to it. Dart doesn’t have “layers”. So why are you trying to relate them at all? Law of “familiarity” dies here. No sane person will ever grasp or feel comfortable with the layer issue. It’s more effort to focus on reversing your thinking which is really meant to stay unconscious than to accomplish the actual task. This ‘replace widget’ concept is just oooof. Who but dart devs will ever understand the behaviors behind this? Advice would be: make be logical. That’s it. Use directional positioning as a map for human behaviors in real life. Consider NOT hiding every text and font style. Copy figma, framer. Just make something that people don’t have to spend all day ‘dealing with the tool’ itself over using the tool to build.