GESTURE DETECTOR • Flutter Widget of the Day #08

[Music] hey what up guys welcome back to another quick flutter tutorial the widget of the day is the gesture detector which you're going to need in your apps if you want the user to be able to press buttons on the screen and make things happen so let me show you how to use this by jumping into the code so i've got here a blank scaffold now one thing to note right away is we are using a state full widget as opposed to a stateless widget and the basic difference between the two is when we want to change values on the screen we want to use a stateful widget whereas a state less widget is more of like a static page where you don't expect the values on the screen to change so for us we want to use a gesture detector so that once the user hits the button i want to change some values of the screen so that's why we're using a stateful widget and in the scaffold just to illustrate this let's create a column in the body and for the children let's just start off with some basic text widgets so what i want to do is i want to show how many times the user has tapped the button okay so for now let's just put in a fixed string saying tapped zero times so if i save this you can see it's by default scrunched in the corner so let's just space this out a little the column firstly let's center it and then use the main access alignment to space evenly so now that i've got it spaced evenly let's give the tab here button a container so that it looks more like a button so let's just give it a color of green and also let's give it some padding so that there's some space around the text and also let's just quickly increase the size of these fonts so that you guys can see a bit more there we go now for the green box that says tap here i'm going to wrap this container with a widget called gesture detector so as the name implies it's going to detect a gesture from the user and so if you look at the options there's actually a bunch of options that you can choose from so double tap force press down long press but the one you probably will use mostly is this on tap so that's just when the user taps the screen once and inside here we can create a little function and perform some certain tasks that you code up so just to illustrate this what i'm going to do is right now it says tap zero times so if i tap the green button i want the number zero to increase to one and two and three and so on which means right now the zero is hard coded in right as a fixed string so if i want to be able to change this value we're going to have to make it a variable so let's just create a simple integer at the top and call it number of times tapped and we will initialize it to be zero at the beginning then we can come to the text and instead of hard coding to zero we can separate this string out and in the middle we can place our variable inside and because it's an integer we're going to need to convert it to a string so if i save this it should look the exact same looks like we should add some spaces in between actually there we go and so this way we can leave the tapped string and the times string on either side to be fixed and the number in the middle is the one that's going to change so this number should change when we hit the on tap so inside the untapped function we can set the state and what that does is it rebuilds the page with your new value so inside i want to say number of times tapped and i want to increase this by one so if you're not familiar with this double plus notation this just means you're incrementing by one so it's the exact same as if i said number of times tapped is the number of times tapped plus one but a nice shorthand way of writing it is just plus plus so that just increments by one cool so if i save this and i tap the green button you can see the number is now going up by one so you can keep tapping this and that's how you use a gesture detector now one more thing i want to show you is instead of placing all of our functional logic in the ui it should be noted that it's probably good practice to separate out your logic from your ui so instead of putting all this code inside where the ui is when the user hits on tap let's create a method called increase number and if you come back to the top under the variable we can create a new method called increase number and just do our set state inside of this in terms of functionality they should do the exact same thing but just some good coding practices for you to adopt to make our code cleaner and easier to work with in the future so that's how easy it is to make something tappable on your screen now the reason why i love gesture detector and flutter in general is because of the very simple philosophy of everything in flutter is a widget so this gesture detector i just wrapped it around the container of tap here but you can even wrap it around literally whatever you want so i could wrap it around the scaffold and so if i do the exact same thing but instead of the green button being tappable the entire scaffold is tappable now so if i just get rid of the button and i save this and i tap the screen the entire scaffold is tappable and it will do the same function so any widget at all whether it's a text widget a container a column or even just the entire scaffold you can use a gesture detector to get the user to tap on wherever you like so hopefully that was helpful and if you have any questions just let me know thanks for watching and i'll catch you guys in the next one laters

Channel: Mitch Koko

Views: 27,429

Keywords:

Id: iTrqA8Ec0gQ

Length: 5min 45sec (345 seconds)

Published: Tue Oct 12 2021