Flutter Community
Published in

Flutter Community

Breakdown setState() signature

Here is the million dollar question about the setState() signature in Flutter. Most of the times when I’m taking a workshop on Flutter, beginners are usually confused while writing the setState() method.

What is the order of the brackets and why are there are so many brackets, what are these even?

Is this a method?

Is this a function inside a function?

And furthermore, when people write this:

So is this a function call inside a function of a function? 🤔

So, let’s break this down for you!
But before that, let’s just define some functions:

Can you tell the difference between these two functions?

So, the first function is a Void Function(), basically a function with zero arguments and returns nothing.

And the second one is a String Function(), also a function with zero arguments but it returns String.

Let’s take a pause here and go back to our setState() method and open its documentation.

So setState is a class method from our State class. And this is also the reason why you don’t get to setState from any StatelessWidget because they don’t have an associating State class.

But also note that setState takes one argument which is of type VoidCallback .

Now what in the world is VoidCallback?

If you open the documentation of VoidCallback, it is nothing but …

… just an alias of void Function();

So you may ask, does this mean VoidCallback is equivalent to the displayMessage() function that we wrote earlier, basically equivalent to a function that takes no arguments and return no data?

So technically, setState needs a void Function() as an argument.

So setState() basically takes an anonymous function, a function with no name.

So next time, when you are providing an argument to setState(), just imagine writing a void function body without a function name, and you hopefully won’t have confusion about the brackets.

Reference to Functions As a Param / Tear offs

I’ve also noticed people doing this, sometimes:

If you are also one of them, did you realize that you are just doing a function call inside a function of a function with no added benefit?

Now that you understand the setState signature, do you think providing a reference to displayMessage() would simply just do the trick? Observe the change below:

Here, we are simply providing setState a reference to the function displayMessage() and that does the trick, with no nesting of functions required and less number of code.

Dart calls it tear-offs, and you can probably read a bit on this here ⤵️

In fact, you can also define a function variable, just how you would do for any primitive types like String or bool or int.

💡 Note: however, function declarations are more recommended than function variables.

But always, remember, this way of providing reference would only work if the function you want to provide is also void Function()

The following wont work 🔴

That’s it.

I hope you are less confused about the setState() signature after reading this article. 🙏
And if you ever feel like you don’t understand something, please please, try to dig into the documentation a little, it’s a magic treasure of information when it comes to Flutter.

I hope you say the same 🙏🏼

I got something wrong? Mention it in the comments. I would love to improve.

If you learnt even a thing or two, clap your hands 👏 as many times as you can to show your support! This motivates me to write more.

Feeling super generous? Buy me a cupcake. 🤩

Preparing for Flutter interviews? Grab my ebook on Standing out in Flutter Interviews at 50% off.

Find my other work at poojabhaumik.com

Have a nice fluttery day!





Articles and Stories from the Flutter Community

Recommended from Medium

DCA Docker Certified Associate Content on Docker Web Sites — 2

From Monolith to Microservice

MHSCTF 2022 — Avengers Assemble (Reverse Engineering)

Golang: gRPC Steps Explained

How to utilize Rails layouts to keep our view templates less clutter.

Elasticsearch optimistic concurrency implementation

A Beginner’s Introduction to the World of Code…

How to add existing project to Github

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
Pooja Bhaumik

Pooja Bhaumik

SDE II in Uni Cards | Google Developer Expert @Flutter | Mentor @Mentorcruise & GoogleForStartups | Youtube & Technical Writer

More from Medium

Flutter Isar Database — The complete crash course — part 2

Building a Generic and Performant Networking Layer in Flutter

How to Setup Logger in Flutter

Flying High With Design Pattern & Dependency Injection & State Management