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 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!
