Conditional Builder vs Visibility | Best Practices

Wondering whether to use Conditional Builder or Visibility in FlutterFlow? This video covers the generated code differences, practical use cases, and tips to help you choose the right approach for your app's UI
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 visual development platform for building 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.

[@Nicolae98]

I love flutterflow! ❤️ The flutterflow team is doing great things 🏅🏆

[@Roman-wq8ei]

This is exactly what I needed to see! Thank you!

[@Nocode_Solutions]

Nice one Pooja.
In had an understanding from looking at the generated code but it's super clear having you explain.
There are so many weird scenarios I use conditional builder to limit my backend calls.

[@FlutterFlow]

Glad it was helpful! :)

[@angryyoungman4389]

Thanks Pooja, Har Har Mahadev Jai Mata Di❤❤❤❤❤❤❤❤❤❤

[@designnocode]

Love this Pooja!! You are the best! Would love to know how to handle responsiveness -- Should we use responsive visibility or conditional builder and then responsive breakpoints being the condition? I am mainly wondering from a best practice / performance perspective.

[@PoojaBhaumik1]

Thank you Andrew 💜
And responsive visibility may be better because it handles most of the cases and under the hood, its still "if else" so it renders one child at a time + handles the breakpoints in a more cleaner way. But I can dig into this topic more and see if I can create a video about best practices around responsiveness once I find more details. Thank you again :)

[@designnocode]

@@PoojaBhaumik1 Nice! Thank you, much appreciated!

[@16td]

Need more case videos like this. Great video, thanks Pooja!

[@PoojaBhaumik1]

More incoming! Ty! 💜💜

[@francomuoio]

Bravo pour cette vidéo 🙏

[@amongstar1407]

Add Video Call Feature!

[@anli6987]

can i ask, why the simple search do not use the conditional builder according for flutterflow document,
When we don't use the conditional builder, use the conditional visibility, the two list view will count query two time from firebase?

[@alisaen2128]

Up

[@Pankomentator]

Dear FF Team, please focus on speed up initial rendering of WEB APP. Thank You!😊

[@Jaiho-cl1jr]

They are working on it, in FFDC it is mentioned... there will be WASM & 70% improvement

[@Jaiho-cl1jr]

flutterflow team pla work on it quicker

[@RR-et6zp]

@@Jaiho-cl1jr when?

[@pramodgeorgehq]

Great video

[@jeanpierreunis]

Nice video thx

[@leandro71254]

I needed a more detailed example and how you did it in practice, I myself can't recreate this counter system and how you did it to show or not the responses to the comments, I made my comment counter using supabase query and filtering the post id with the comment id and putting it in a text as the number of items, I have no idea how to hide it from the interface when there are no comments.

[@flutterflowexpert]

PRO TIP: if you are having an error in your code and you see the red screen of dead just hiding the widget will not work. You need to delete it.

[@FlutterFlow]

It can work in some cases though, for example, inside a list like widget, it will not render that widget when the condition is false.

[@flutterflowexpert]

@@FlutterFlow I ment if you have a syntax error or a null error in your code even hiding the widget will not help it. I learnt that the hard way 😂

[@donghyeonkim9957]

please let me us how to integrate GPT-4o Realtime(Voice) API into Flutterflow.

[@chinmaykhandelwal7171]

OR Suppose let us take an example - if their are two list view inside a Stack with opposite conditional visiblity conditions they both render or not

[@chinmaykhandelwal7171]

Suppose let us take an example - if their are two list view inside a column with opposite conditional visiblity conditions they both render or not

[@FlutterFlow]

If they are dependent on the same variable (like one should be rendered on true, and one on false), only one of them will render at any time (bcz they are inside a Column, so in generated code its doing a if() block)

[@chinmaykhandelwal7171]

@@FlutterFlow thank you for your reply but still I am confused that what is the use of conditional builder because listview Or rows are always inside a parent column while building a widget tree

[@FlutterFlow]

@@chinmaykhandelwal7171 Check out the last part of the video where we summarize the usecases. Like if you are creating a component, the root widget doesnt necessarily have to be a column. (You only care about the direct parent) Also major usecase for a conditional builder is when you have multiple UI elements for 1+ or 2+ conditions, so "if, else if, else if, else"

[@flutterflowexpert]

I use 99% Conditional Builder and 1% conditional Visibility 😊

[@FlutterFlow]

Do you always have an else condition 99% of the cases? Because conditional builder requires a widget for the else condition everytime and sometimes we just want to hide/show things and not switch UI (and using an empty container for "else" may not be a good practice)

[@flutterflowexpert]

@@FlutterFlow when I use Conditional Builder I always have widgets in both If and Else statements

[@silentobserver964]

Gosh, Indian accent again. FlutterFlow, don’t go down this path.