Flutter Tutorial For Beginners #4 - Button Presses and Callbacks

[Music] hello everybody and welcome back to another flutter tutorial so in today's video what we're going to be doing is talking about buttons and button callbacks so the goal of this video is going to be to add a button to this text input field here that we can press when we press that button we will take the text that's in the field we will put it somewhere else on the screen so hopefully in a text widget or something like that and then we will clear the input field so that's what we're going to be aiming to do this is going to kind of be building the component of our app that will allow us to actually get user input so if we're talking about some kind of blog app or messaging app or whatever we end up actually creating we're going to need some way for the user to type something in so that's what we're going to be doing here is just making that widget that we'll be keeping likely for the rest of these videos so with that being said let's get started now the first thing that i'm going to do is i'm going to remove the state from here that has to deal with text so if we see inside of here that's where we left off last time we had this text showing up and essentially when you would type as you type and i mean i can just show you it shows up right underneath now we don't want that anymore we just want it so that when you press a button which we're going to add then it actually pops up that message so we're going to remove this text for right now and we're not actually going to be doing anything with a regular text widget inside of this anymore so that means i can get rid of change text i'm going to get rid of this unchanged event as well we're not going to be using that so i can remove that comma there too and then i'm going to get rid of the text right here and i think that should be about it okay so that's all we need to remove and what i'm going to do now is i'm going to add the button that's actually going to go on the right hand side of where our little message box is here so we could technically um well we have a column here but we could technically have a row and we could have the text input field and then a separate button beside it but i actually want to overlay the button right on top of the text field so it looks nice and it'll have a little logo there so we'll use an icon for it and i'll show you how that looks so anyways what we're going to do is get rid of column here so we don't need the column so i can get rid of these square brackets like that i think i can actually remove one more set of brackets and let's just save so we get a nice format here now i'm going to go inside of the input decoration actually so input decoration sorry is this one and i'm going to add a icon for what is it the suffix so prefix obviously means before suffix is after so what we're going to do is we're going to add a suffix icon which is actually going to be a button so let's go if i could find the u key suffix icon and here we're going to say icon button so let's just save that so we get a nice format here so rather than just an icon this is actually going to be a button this is just the widget used for that we're going to pick the icon that we want so we'll say icons dot and in this case i want to say message or something so let's do message uh actually no we already used that one sorry let's do icon.send and i guess that's going to be the icon uh let's see what's going on here so for the icon i just remembered sorry we need to do icon and then inside of that we can say icons.send so just like we did here we said icon icon.message we need to say icon button icon is equal to icon icons.send i think it's a little bit uh confusing why they do it like this but that's fine we'll do that and then what else do we need here well since we have the icon now we need to add something for when you actually press the icon so what we're going to do is we're going to say on pressed and for now we're just going to leave this blank so i'm just going to make a blank arrow function uh because we don't actually have anything to put here yet so this don't worry about this this is just so it doesn't crash yet and that when i refresh we can actually see what this looks like so now we look at the window and we can see that we actually have this button right here you can see what happens when i press on it like that and we'll add a few other options just to see what we can do with the buttons but that is the button right there you can see i can click on it obviously different than this message icon which is not interactive at all so let me add a few other things to this icon so for the icon button i think we can do something like splash color or some other cool things so splash color essentially is what color does this splash or like what color splashes on it when you press on it so what we can do here is we can say color and then we can pick the color that we want sorry colors and then we can pick the colors so there's a bunch of different colors we can choose from i want to pick something that's going to show up just so we can see it really easily so i'm going to go with blue so colors.blue and now let's have a look at what happens if i save that file and i press on the button we get a nice blue splash so maybe you don't want the blue you can change that to whatever color you want but i just want to show you there's all kinds of options like that and again you can hover over the icon button and you can see all of the different things that we can give so we can give it a hover color highlight color splash color auto focus tool tip all of that and in fact it actually might not be a bad idea to add a tool tip just to tell us what this actually means so let's go ahead and do that we'll say tool tip and then i think we can just actually put a string here and for the string we're just going to say post message now we're going to change some of this text and once we have a better idea of what this is actually going to be the app that we're making we'll leave that there for now okay so let's have a look at it now and if i hover over it does it give me anything the tooltip is not showing up maybe there's something else that gives us like something when we actually hover over top of it disabled tool tip autofocus okay so i just realized just by hovering over tooltip that this actually tells us exactly what this is so this text is displayed when the user long presses on the button and is used for accessibility okay so let's just see if what happens if i long press now there we go we get post message so i wasn't sure how to activate that before but now we can actually see what that is so that's actually pretty useful and someone can just long press and see what it does okay so now that we have that what i want to do is i actually want to modify my home page to be a stateful widget the idea here is that what i want to do is i want to have a text field on my home page and when we press the button in the text input widgets when we press that it actually modifies the home page so i'll show you how we can do that but we need to make this a stateful widget because the text that's going to be displayed on the home page is going to have a state right it will change based on what the user does and them interacting with the program with the application so we'll copy this build method here so copy that and we'll use our shortcuts so just st ful to make a stateful widget press enter and now we'll just name it the same thing so my home page like that okay now we'll override this build method we'll just copy in what we had before and we should be good to go with a stateful widget for my home page so let's have a look here looks like everything is working fine and now what i'm going to do is just add a state to my home page so the first thing i'm going to do is i'm just going to do exactly what we did before and i'm going to say string text like that we'll set it equal to a blank string to start and now inside of the body what i'm going to do is i'm going to make a column and i'm going to add the text input widget as well as a text widget again like we did in the text info widget before we deleted that so let's go column oops like that i believe we need to say children and that's a colon that's going to be widget and a list like that and then inside of the list we're going to take our text input widget and we are going to put a text widget now the text is going to have this dot text as its text and if we save it now we'll get a nice format and this is what we're going to have for our body so really straightforward just have that widget that we already have there then we'll have some text and this will be equal to this.text now how are we actually going to modify this text here when the button is pressed all the way down here because notice that this is in a different class so i can't really actually access this text widget from down here because previously we had some method that method used the controller and it changed the text or cleared it or it did something like that right that was inside this class all of the stuff was in the same class so how can i make it so this button here actually modifies this text up here well this is where we could talk about something called a callback so on our button of course we have a method called on press what that does is it tells us what to do when we press the button so you right now i've just made a blank function this is just like imagine just an empty function that does nothing that's what i've put right here right now just so it doesn't crash but what we could do is we could make a method we could say void uh you know oops void click or something like that and then we could call this.click right so inside of here just like we did previously we'd say this dot click and then what would happen is whenever we press the button it would call this method so we'll actually leave this here for now but the idea is how do i modify this text so what we're actually going to do is use a callback and what a callback is is essentially we pass a function to this text input widget and when the button is pressed it will call the function that we passed it so we can write a function or a method whatever you want to call it right inside of our home page so we'll write one inside of here and then we'll pass it as a constructor argument to text input widget it will save that in here as a callback and then we will call the callback when this is pressed so that means that we can actually call a method that is not on our our class and since that method is in another class it can access say the text attribute right here so i know this is very abstract right now if you haven't seen something like this before but what we're going to start by doing is just making a method on my homepage state that we want to be called when the button is pressed so we'll hook it up after but imagine that this is being called when that button is pressed so i'm going to say change text is what i want this to be called and it needs to take a parameter of text so we'll just say string oops string text like that and then inside of here what i'm going to do is i'm going to say this dot text equals text like that now the important thing to remember though is that we need to wrap this inside of set state because if we don't then it will modify the text but it won't re-render the widget so we won't actually see any of those updates happening so let's say this dot oops dot set state then inside of here we will take this line and we will paste it okay so now we are modifying the text whenever we call this method uh so we'll change this up here and that in turn will change this and since we've wrapped it in set state that will re-render the widget now what we need to do is we need to give this method to the text input widget so what we're going to do is we're going to make a constructor inside of text input widget that takes one parameter which is the method that we want to use as a callback so we're going to start by saying function string callback oops if i can hit the l key call back like that so function string callback what this is saying is that we're going to have a property of this class which is a callback it is a function the function takes a string as one of the arguments so you can see the reason i did that is because we have string text here say i change this to number text or into text or widget text or whatever it is then i would have to change the corresponding type here as well now if you hover over the widget you see it's giving us this blue squiggly it's saying this class or a class that this class inherits from is marked as immutable but one or more of its instant fields are fine are not final so what this means this is an immutable widget or an immutable class so we can't modify any of the properties on it so we just need to change this to be final and what this essentially is saying what is this what am i getting the final variable callback must be initialized okay let's just do function callback okay i think we can fix this later but anyways final function callback uh final function string callback so this is just saying this is going to be final once this is set we are not going to change it that's what this line says right here when we declare something as final so now what we need to do is we need to make a constructor that's actually going to define what callback is so to make a constructor all we do is we type text input widget so the name of our widget like that we put two brackets we can do our semicolon like that and then inside of here we write this dot callback and in fact we're not actually going to put it inside of curly braces what happens when you put curly braces is that saying that this is going to be an optional named parameter so right now this is just like a regular function if we think of a constructor we must pass it one callback to be able to actually create this text input widget we have to give it something and you can see that because if we look at text input widget it's telling us one positional argument expected but zero found that's because we just put this.callback here so we're defining we have one argument or one parameter that needs to be passed now if i change this to be inside of curly braces notice that this squiggly line goes away that's because this now makes this an optional parameter that's named so that means now if i want to pass a callback i can but i don't have to so if i want to pass one then what i have to do is i have to say callback colon and i have to pass the callback there so that is that means this is going to be a named optional parameter so we need to define the name whereas if we don't have the curly braces we don't have to give a name at all we can just pass one argument into the function now if we put this inside of square brackets here this is an unnamed optional parameter so that means that we don't have to do callback like that and in fact notice i'm not getting the autocomplete for it i would just put the function here but i don't have to because it's optional so anyways i hope that makes sense but we will leave this as just a mandatory parameter that we have to pass in so a required parameter and then inside of here what we're going to do is we're actually going to pass this change text function here that we want to give to the constructor so we're going to say this oops this dot change text now it's very important that you don't include the brackets at the end the brackets at the end actually signify a call to the function so if i have a function right and let's just say you know i don't really want to define another one but if we say void test like oops void test for some reason i just cannot type if we have tests we say void test like that if we just type test what this actually is is a reference to what this function is or where this function is you can think of it as like a variable that's holding the reference to this function so if i just type test or i use test i'm not calling the function so i'm not going to execute anything that's inside of it but i will have access to where it is so let's say i do something like x equals test what i can actually do is i can call x because x is equal to test test is a function so i can call the function that's kind of what this is saying right if i have a callback so let's go now back to the original example if i have this function here and i don't call it and i just pass it through then we're going to assign callback equal to this dot change text so now whenever i call callback which we haven't done yet it will call change text so i hope that makes sense but i just want to go into enough detail that no one's super confused so what we're going to do now is we already have on press setup with this dot click so inside of click we are going to call the callback so we define the callback inside of here so how do i actually get that or use that from the other class because notice we have two classes here this one is handling all the constructor stuff and this one is actually handling all the state so if i go inside of here what i can do is i can use this fancy word called widget and what that does is it references this class right here so it has access to anything that's inside of this class when i use widget so i can say widget.callback because callback is right here and i can actually access that and then i can say widget.callback like that and i have to give it one parameter which is going to be text right because if we look at callback we can see it change text has one parameter so what i'm going to do is i'm going to give it controller dot text like that now the last thing i'm going to do here is i'm going to say controller.clear so what's going to happen is we're going to call the callback function and then we're going to clear the text input field because whenever we press the button we've submitted our message our post or whatever it is so let's just do a quick summary and then i'll show you how all this works we have my app which i'm not going to go through we already know how that works we now have a stateful widget for our home page and inside of here we have one state which is text right we have a method called change text this is going to be our callback function it simply changes the text here to be equal to whatever text we pass in we have a method here which is the build method what we do is we use a scaffold which we've talked about before we have an app bar which is that little thing at the top we have a body with a column inside of the column we have the text input widget we pass that callback function that we want to use when the button is pressed and then we have text which is going to be equal to whatever is up here so this dot text next we have our text input widget this is going to take a callback so that's a mandatory parameter we must give whenever we create this and then what we have is the state for all of that so we have this dispose method that gets rid of all the resources once we're done with this we have a controller that handles the text field controlling so clearing and getting the text we have a method called click when this is called we call the widget the widget callback which is what is defined right here then we clear the field and this is drawing all the stuff and we've already gone over how that works so let's have a look at our app now and see if everything is working so let me just type hello and press the button and nothing is happening so let me just refresh this and make sure i've saved and let's try it again and unfortunately nothing is happening okay so i just had to refresh the app seems like it's working now i just had to rebuild it but if i go and i type hello and i press enter we can see that it shows up right underneath and now i can say now or something i can say hi my name is tim and that will show up down there as well so that is kind of what i wanted to accomplish and what the goal of this video was essentially type something in press enter and it shows up underneath uh what we just typed in our i guess underneath this message box and it will change every single time and say if i delete all this stuff doesn't delete anything else let's just hit that again and it is working so in the next video what i think we're going to do is make it so that we can see a list of all these different things and we can scroll through them and then we'll make a widget that's going to hold this text and we'll have it nice and formatted it will have a like button a dislike button whatever we end up doing it'll be something along those lines so anyways that has been it for this video if you guys enjoyed do make sure you leave a like subscribe to the channel and hopefully i will see you again in the next flutter tutorial

Channel: Tech With Tim

Views: 40,838

Keywords: tech with tim, flutter, flutter tutorial, flutter tutorial for beginners, flutter beginner tutorial, flutter dart, dart, flutter app tutorial, flutter mobile app development, flutter app apps, flutter android studio, flutter tutorial 2020, flutter for ios, flutter mobile app, dart flutter, flutter app, flutter for beginners, flutter course, flutter button, flutter button tutorial, flutter callback

Id: mXREh3S8Yw0

Length: 18min 51sec (1131 seconds)

Published: Tue Jul 28 2020