Image for post
Image for post

Flutter: Conditional Rendering — The Right Way

Tl;dr: Visit this package and read the “Usage” section.

Problem

In Flutter you can do conditional rendering:

You may also conditionally render a list of widgets:

But what if you want to use a tertiary (if-else) condition?

It is okay for a single Text widget, but the readability quickly become very bad when the child widget is multi-layered.

Solution

That’s why I created a package: `flutter_conditional_rendering`

If-Else condition:

Switch condition:

You may also use Conditional.list() and ConditionalSwitch.list() if you want to conditionally render a list of widgets:

If-Else condition:

Switch condition:

Design concepts

Why the Conditional.single() function accepts a condition builder and 2 widget builders instead of accepting 1 boolean value and 2 widget variable?

Encapsulation:

Typically when you decide a condition, you need to: i.e. Get some data from the context(by using provider package), or find some value within a list. Those logic/statements are often related to the condition only, encapsulating them into a builder function makes the code cleaner, and reduces the conscious load while reading the code:

Here is what you should do:

So this is how you should do conditional rendering in your flutter apps.

Now go visit this package, install it and give it a try!

A JavaScript/Node/Flutter developer who love technical stuffs.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store