Flutter - Widget Communication using VoidCallback and Function(x)

however thanks for watching this video we'll be looking at how we can do widget communication using something called the void call Bank and the function of type so right now we have a very simple counter we can't have an increment but we are going to be able to increment it very soon if we look at the counter page its astaire for Widger because we are going to be using this count as the state we have a centered count and if we click on accounts count is a stateless widget and currently it just displays the value of the count that has been a passed in so a very simple application we are going to add something called the avoid call bike and the void callback is going to allow us to instead of just displaying account we are now going to display a flat a button and that flat button will have an unprecedent so when we click this button we want to notify the parent component we don't want to pass anything we simply just want to notify that this count button has been pressed so let's at the top here and a final void callback of on count selected we're going to update the constructor to now we'll take this dot count and this don't on account selected perhaps the count should be required so we'll add required and the on count selected this doesn't need to be required because maybe we always don't want to listen for that bun maybe only sometimes so when we do hit that button we want to fire the on count selected method what exactly has this given us the ability to do well if we go back to our counter page we can now see that we need to pass the count in as a named parameter just like that but we also have access to this on account selected so now we can print out selected that counter if we open up the debug console we can see selected the counter anytime we hit to that count button so this now gives us the ability to communicate from this widget that we want to do something inside of this counter page whenever that has been selected so whilst that is great for identifying the callback events with no expected value hence the void what about if we want to return a value back to the parent well this is where we use the f-of-x methods so we can go to count and as well as the count selected we can add a final function of type integer called on count change now as you can imagine this on count change is fired anytime that the count changes so let's add this to the required and we'll set this don't on count change just like that this gives us the ability now inside of the counter page to set on count change we know then that's going to be an integer and then of course we can do something with that value right now we aren't doing anything so let's go back to the count dot and we can change up count dart to instead return a row instead of a flat button so we'll wrap that with a row and we'll have an icon button we'll give this the icon of icon icons don't add and the unpressed of on count change one will copy that plus are underneath the flap button this time it will set the icon to remove and we'll change the count by minus one we can also take this rule and set the main access alignment to center now what we're doing is any time that we select these plus and minus buttons we're calling this function right here with the integer value of either one or minus one and because inside of our counter page we are listening to this event we can then use a set state to set the stand a call to the count plus II called the value this should now change the value of our count based on whatever we passed inside the callback of the count widget so when we use the plus we can expect that the value goes up by one and when we hit the minus we can expect that it goes down up by one so while are multiple ways to manage states and manage different widget communication methods inside a flutter this is perhaps the most elementary we're using something called the avoid callback and we are using the function of type it allows you to create more flexible dynamic your widgets inside of flutter so I hope you found this useful if you have hit the subscribe button ring at the notification bell and all that jazz until next time I'll see you soon in my next video bye

Channel: Paul Halliday

Views: 42,260

Keywords: Flutter - Widget Communication using VoidCallback and Function(x), voidcallback, function(x) flutter, dart, dart voidcallback, dart function callback, dart callback, widget communication, widget flutter, widget, flutter tutorial for beginners, flutter tutorial, flutter widgets

Id: fWlPwj1Pp7U

Length: 5min 11sec (311 seconds)

Published: Wed Oct 09 2019