Flutter setState() and Callback Function(with parameters) for Passing Data Between Classes

everyone assalamualaikum in this tutorial we'll  learn how to use flutter callback function and   at the same time how to use set state and callback  function together to update the ui now here i will   have a class within the class we'll have a  callback function the culvert function will take   parameter and within the callback function we'll  have set state but two important things about set   state and callback function callback functions are  functions that get called later certain time if   things happens or certain events get triggered and  set state function is used for rebuilding the ui   or your screen so in this tutorial we will see how  to use them together now once again class a will   contain callback function and callback function  will contain set state and from class a we'll send   callback function as a parameter to class b  and within class b will have an untapped event   it could be unpressed event it doesn't matter  and within it we'll have a callback function   the callback function we send from class a to  b will use that callback function over here in   class b within ontap function now once once  we use it over here we'll send a parameter   and that parameter would be sent through callback  function the function defined in class a so here   callback function will take parameter and  once we click on this button or event happens   it will call the body of this function which is  defined in class a and as it takes parameter from   here from here so we'll use that parameter within  our set state function and then we'll rebuild the   ui so let's go ahead and get started so now here  i'll have this main function and within main   function i'll call run app and within run app i'll  create a class which is called my app this one   and my app would be a stateful class  so we'll go ahead and create stful   it'll create a stateful class for us  and we'll name it my app now within   the app over here instead of returning a  container will return a material widget   or material app so it takes home property  and home property will take scaffold and within scaffold we'll have app bar so we'll  call our app bar and app bar here we'll have title   for our app bar and we'll wrap it around text  widget and here we'll name it learning flutter   like that and after that we'll define the body  of this scaffold okay and within body will have   column and within column will have children okay  now one thing here let me clear clarify with you   so here class a this is my app this class  is our class a okay so of course we need   callback function within class a as we can see  from the diagram and we'll do that very soon   okay before we go ahead now  let's define a container   so that it looks good on our ui so we'll do a  container over here and i'll be quick to do that so here we are done with this ui okay  now over here i'll declare a variable   and we'll call it string string type  variable uh the variable name is a   topic and we'll initialize value for  it and for now we'll call it packages so now what we'll do we'll connect this text  with the variable we declared so we'll do plus   topic okay now here we'll see the result okay  so we are learning flutter packages all right   so that's what we have right now okay now what  we'll do we'll go ahead and create some buttons   to do that we'll wrap our container we'll create  a new container and we'll wrap it around gesture   detector and it takes on tap event and also child  so in our case the child is a container okay so   here we don't want this one anymore for example  we want a different one we'll say get x like that   okay and over here we'll have on tap event   so once we click on this we want to change some  event or ui over here for example the packages   remember packages is a variable which is sitting  inside the variable topic so once we click on this   we want to change the variable value so what it  will do we'll do variable equal get x so what   we want we want once we click on this button  while button is not there yet let's refresh it so it is there and one thing we could  do very quickly top just say 20 not 50.   okay now they are closed so once we click on  this we want the variable to be changed over   here topic and show the result here get x  let's click on this but we don't see that   well but definitely it updated okay but  it didn't rebuild the ui to reveal the ui   we need to wrap it around set state okay  now let's refresh it now here we'll click   get now here you see get x okay so it means  it's working so once you have set state   it refreshes your ui rebuild the ui okay now  here we'll be very quick we'll create another one and here instead of calling get x we'll say  block okay and i'll also create the button name   as a block but button name could be different  it doesn't really matter now we'll refresh it okay now it started with packages with the default  value over here now we click on get x we see get x   here we are learning flutter get x now if i click  on this we see we are learning flutter block so   definitely we can do more than this anyway so now  here this two part of this this two section over   here now we can move to a different file okay  and once we create that file or create a class   so that class would correspond to our  class b over here okay and once we do   that then we'll see how to use callback okay  all right so let's go ahead and create class b   so let's do it over here so i'll create a new  class and i'll call it my buttons.dart okay and   over here i will create a step stateless class and  we'll call it my buttons now over here we don't   need any of this we can just copy one and delete  the other because would be calling this class from   here okay and passing parameter so here instead of  returning a container we're returning our gesture   detector the one we created early but we need to  import some libraries let's go ahead and do it   the error should be gone and here for now we don't  need this set state function okay we'll get rid of   that one and we also need to import our material  library okay and the arrow should be gone now here   we don't want to use a hard-coded value so we  want to use a value that would be passed from   here okay so we'll create an instance of my well  we'll call the constructor on my buttons and   we'll pass the text all right to do that first  let's go ahead and declare a variable over here   and we'll call it final string the variable  name is topic and over here within it we need   to initialize we do this dot topic and we need to  use the required keyword the arrow should be gone   now this value value would be passed from  over here so as it is passed we can use it   over here so we'll use the value topic okay now  error should be gone whatever this ontap will   take care of that very soon so now as this  is done we can actually call my buttons over   here and it takes a parameter which is well  now in this case this is an argument okay   so the argument it takes an argument so argument  say for example here we can use qubit okay   there's another flatter state management package  you know it so let's go ahead and refresh it okay now we see cubit here so what do we want we  want to able to click on this and change the word   here we can prove that we are clicking on this  simply we can do a print over here and say tapped   okay now let's refresh it now click on this now  we see the word tapped but what we want we want   once we click on this we want to send this text  this value back to this button over here okay   while over here actually we want to send it to  here we want this value should be changed once we   click on this click on this it should come  back over here and change the value and   how can we do that and here the  callback function comes to help you   so create a function and we'll call it callback  you can call it anything you want and it'll take   a variable uh it'll take a parameter and we'll  call it var topic okay and with invert topic we   will use a set state okay and do you see that it  takes a parameter over here so this parameter will   give it to topic variable over here  okay topic equal var topic i'm sorry   ver topic okay so now we need to call  this function so we can call this function   from here over here but before we call it we  need to pass it as you can see from the diagram   that we need to pass it to class b so we can do it  easily because over here we are already passing uh   argument so we can create another argument  property over here and we'll call it callback   and callback function and callback okay well this  property name is callback function and our actual   function is this one okay so now if you hover  over on it it says that at named parameter over   here okay so it will do it automatically for  you but we don't want actually this format so   we can just change it what we'll do we'll  do over here this dot well now before we so if you hover over on it you'll see it  says add a named parameter so what we'll do   first here we'll create a variable and it the  type is a function because we'll pass a function   and the function would be call back function okay  now over here we need to add it we'll do it this   dot callback function and most role it wants you  to add the required keyword and the error should   be gone okay now from here we are sending this  callback function and over here will receive   within this value or this variable now within  it we can use the variable so we'll go ahead   and use it callback function but now as we saw  earlier that callback function takes a parameter   so here we'll send it as an argument so here we'll  send a topic so this is the string value that we   are receiving from the other side of this app now  this callback function would get triggered once we   tap on this button or button like this one  okay so now let's go ahead and restart it okay hopefully it restarted make sure it did yes  it did now what we will do we'll click on this so   once we click on this what do we want we want  events to happen like this so it will find the   callback function and the parameter and we should  in return trigger the actual callback function in   class a and then it will have a ui rebuild  using set state that will happen so let's go   ahead and click on this as you see it changed to  flutter qubit but this is another file okay this   is another class so using callback function we  can send a value from one class to another class   actually even here you can do a different one for  example say laravel if you want you don't have to   send that value you can send any value okay so now  i'll click over here and it will change to laravel   but we don't want hard-coded value we want dynamic  values so now we'll create some more buttons over   here using this one so i'll go ahead and create  two more buttons and over here i'll call it   block and over here we'll say get x now let's  go ahead and run it and we'll see our three   buttons over here now if we click on this get x  say change to get x because we are passing the   callback and callback function from here gets the  value and send it back to the callback function   the body which is defined over  here and this is wrapped within   set state so the ui get revealed immediately let's  do it one more time so it's working perfectly okay   so if you learned something don't forget to smash  that like button and subscribe thank you so much

Channel: dbestech

Views: 37,292

Keywords: flutter setstate example, flutter setstate callback, flutter callback function

Id: zq-JGQxNwtU

Length: 15min 45sec (945 seconds)

Published: Sat Nov 06 2021