Improve your Flutter app performance with this small trick

Let’s embark on a Flutter-filled journey today, where we shatter the chains of the ordinary and unlock a secret weapon that’s been hiding in plain sight all along.

I’m sure you’ve bumped into the word “BlocBuilder” more than once in your Flutter dev escapades. But do you know all the tricks this smart widget has up its sleeve? Maybe you do, maybe you don’t. But, one thing is for sure — by the end of this post, you’re going to have a mighty revelation about Flutter optimization.

Drum roll please….

Welcome to the world of buildWhen! A lesser-known property of BlocBuilderthat might just become your best ally against redundant rebuilds, and help you scale up the performance of your Flutter applications.

You may be asking…

“Wait, what’s that? How does it work?”

Hold your horses; we’re getting there.

buildWhen gives you, the developer, the power to be the deciding factor on when the BlocBuilder should rebuild. This is incredibly handy when you have a Widget that is only changing when 1 or 2 properties of the state change, thus preventing unnecessary rebuilds. You can conserve resources and keep your app performance on point with this one cool trick.

Now that you know this… No need to panic

Does this mean you should rush to your code and add the buildWhen property in every BlocBuilder?

Definitely not! We aren't advocating for haphazard usage here.

Just like with every superpower

“with great power comes great responsibility“

Most times, you won’t need to add this property to your BlocBuilders. But when you do, the benefits are significant.

Now, you may be asking.

How does this property work?

Let's see it in practice with a simple example

The buildWhen method provides 2 parameters previous & current . These parameters represent the previous & the current state of the BLoC or Cubit.

It then returns a boolean . This boolean indicates wether the BlocBuilder should rebuild or not.

By comparing the previous and the current state you can determine if certain properties of the state changed. This allows you to decide which properties should prompt theBlocBuilder to rebuild.

In our example, we are comparing the current value of the comments & isLoading state properties to their previous values. Which means the method will return true only when one or the other change in value.

But you may be asking

Why would we want to do this? Doesn't BLoC take care of this for us?

Well, this is especially useful when you have a State that contains many other properties that can often change but don't really affect certain Widgets on the Widget Tree.

If for example our UserPostCubit has other properties like likes , reactions , views that may change frequently then this is a great occasion to make the use of buildWhen property. Since we will not update the comments section when one of these properties changes.

On a side note, you may notice, that you can rewrite the given code to return using expression body. You can also rename the parameters to be shorter to get a cleaner finish.

buildWhen: (prev, curr) => prev.comments != curr.comments || prev.isLoading != curr.isLoading,

This is totally optional, but I just wanted to share this little trick that I often use myself.

Still need more reasons to consider buildWhen?

Consider this, if you’ve got a widget that is computation-intensive, you might want to rethink the frequency of its rebuilds.

If your application’s performance suffers, or if you notice a widget that is rebuilding more often than it should, that’s your cue to bring in buildWhen to the rescue.

Picture a widget that renders a web image or that triggers an animation every time it rebuilds. Thanks to the buildWhen method, you can put a leash on the frequency of these operations, enhancing performance and giving YOU back the control over re-builds

In another post, I will talk about another way to achieve this with even less boilerplate.

So if you are interested stick around and if you are serious about becoming a highly skilled and respected leader in the Flutter development space I would highly recommend you follow me for more tips like these and much more advanced content about Flutter development.

PS: Let me finish by saying that I’m on a mission to empower Flutter developers to become highly skilled & respected leaders in the Flutter space.

If you are a

Young & ambitious Flutter developer who is feeling a bit stuck in their current career and wants to become a highly skilled, confident, and respected leader in the Flutter development space so that you can feel accomplished, successful, and proud of your work, earn a higher income, and enjoy greater career growth and satisfaction

It would mean a lot to me if we could have a short 15-minute call with you, as I would like to know what topics are of importance to you.

If you are open to it, you can use this link to book a call with me: https://calendly.com/migalv/let-s-meet

In exchange for your time, I would be happy to answer any questions about Flutter development that you have for me.