This video is an introduction to gesture detectors and explores how leveraging them correctly adds interactivity and functionality to your app.
of our app, when we click on either of these icon cards they actually change color to show that they've been interacted with, and they've been selected. But currently, our cards don't really do anything when we click on it. We can see that our cards or what it's based on be it the icon content or the reusable card, So let's fix this in this lesson and let's make our icon cards interactive. Now, one way of doing this is we could wrap our reusable card in a flat button, so we could hold down option or alt and hit enter. We could wrap with a new widget, and the widget would be a flat button. And this of course will give us access to that crucial on pressed, which allows us to tap into the moment when a user actually presses on either of these reusable cards and we'll be able to change the color that way. Now the problem with flat button is, if I hit save right now, you'll be able to see that it actually affects the styling of our card. It's trying to change the margin and various other styles of its children. So it's quite an opinionated widget. And the use case for a flat button is you want to be able to implement the style of a material flat, button. And that includes various colors, various themes, and its appearance. But in our case all that we actually need is just the ability to detect a touch on our already pretty much well-styled, reusable card. So instead of a flat button we can use something called a gesture detector. A gesture detector does pretty much what it says on the tin. Right? It detects gestures. And the gestures it can detect are things like on tap, which is the same as on pressed, but it can also detect a whole lot more. So, for example it can detect a long press or drag or force press, and a whole lot more. All that this widget is concerned with is detecting gestures, it doesn't try to force any sort of styling or appearance or animations onto the children widgets. So this is a very pure way of detecting when a user interacts with a widget of ours. So by having our reusable card as a child of our gesture detector, we can now start tapping into the gestures that it can detect. So, for example on tap is your classic single tap on the screen. So it's the same as the on pressed of a flat button. Or we can detect a vertical drag, horizontal drag, double tap, force press, whole lot more. But all we need right now is the on tap gesture detector. So I'm going to add our classic anonymous call back and inside here I'm just going to print that the male card was pressed. And now if we hit save and go into our app, making sure that our run tab is showing. And if I click on the male button you can see that we get male card was pressed every single time I press on it. So it works just like a flat button and it's really easy to implement. Now that we've got our gesture detector, we're able to detect when a user actually clicks on our cards. Be it male or female. And what we want to happen is when we click on the male card we want it to change color to show that it has been selected. And in order to do this we have to of course use our set state. I'm going to update the color property of our reusable card. This is why we have a state full widget here, so that we can actually change the state of our cards. The way that we're going to do this is our cards will start out with a slightly darker background color and when it's tapped it will change to have the same color as the rest of the cards, so the active color. So, firstly up here in our constants we're going to have an active card color and we're also going to create a new constant for the inactive card color. And the inactive card color is also going to be a custom color and it's going to have a hex value of 0xFF111328. And you can see over here in the gutter that it's just a little bit darker from the active card color. But it's not exactly the same as the main background color, it's just a little bit lighter. And if I go ahead and simply change the color for the male card, for example to the inactive card color, and hit save, then you can see that it's just a little bit darker than the active color but it's not quite the same And this is going to take an input, which is going to somehow tell us which gender was clicked on. So it's going to be called gender and it's simply just going to be an integer right now. And we could say that maybe, for example, if we pass in a 1 than that equals a male. And if we pass in 2 than that equals female. Inside this method we're going to use an if statement to check to see if the gender is equal to 1, so if we pass in the value 1, than this means that it was the male card that was pressed. Then in this case we're going to check to see if the male card color is currently equal to an inactive card color. Well in that case we're going to change it to the active card color, so we're going to toggle the color of the card. But if it was already in the active card color than we're going to change it to the opposite, which is going to be the inactive card color. So now if we go into our on tap and instead of printing the male card was pressed, we used a set state to update the state of our male card color property. Which is used to determine the color, then we can call that method just now update color and we said that the number 1 was going to represent the male gender. So now if we hit save and you see that my cards both start out being the inactive color, so they're not quite the same as this one. But as soon as I click on it, it changes to the active color. And that's because I'm passing in 1 into this method and while male card color started out being inactive, as soon as it detects the touch then it will update to the active color. But right now it's the active color so if I click on it again it will go back to the inactive color. So this way we can toggle the background color of the card. To be able to represent when something is selected or not. So let's go ahead and do the same for the female card. All we need to do is to add another else, if the gender is not equal to 1. Or if you want to have more than one gender in your app than you might simply just add an if statement, that checks if gender equals 2. So we'll say that 2 is equal to female card pressed. And in this case we're pretty much going to do the opposite. So we're going to check to see if the female card color is starts out being inactive. If so we're going to change it to the active color. But otherwise we're going to toggle it to inactive. So now inside our female card we're going to also wrap our reusable card inside a new gesture detector. And this is also going to have an on tap, which is an anonymous function that gets triggered when the tap gets detected. And when that happens we're going to call set state to update the color. And we're going to pass in the gender as number 2. To say that the female card got pressed. So let's hit save and let's check out our app. So now when I click the male card, the male card lights up and I can deactivate it by clicking on it again. And if I click on the female card, the female card gets activated. So now we're able to select a gender in our BMI calculator. Now at the moment though when I click on the male card, when the female card is selected, the female card stays selected, right? But let's say that I made a mistake and I actually meant to select this one, than when I click on it, it should turn off this one. Because they probably shouldn't both be selected at the same time. So how can we do this? Well it's pretty easy, although it's going to add to our already super wordy method. Don't worry we're going to make it a lot easier on the eye a little bit later on. But we're first mapping out the functionalities so we understand what's going on. So if update color is called and it was the male card that was pressed, so gender is 1. Then we're not only going to switch on the male card color, but we're also going to switch off the female card color. So we're going to change this to inactive card color. And the opposite is also true, when the female card gets pressed then we're going to switch off the male card color. So we're going to change that to inactive. And now let's hit save and you can see that if I click on the male card the female card switches off. If I click on the female card the male card switches off. And this behavior makes a lot more sense. Now in the coming lessons we're going to simplify all of this logic to something that's a lot shorter and more succinct and easier on the eye. Because at the moment its super wordy and very confusing what's actually going on. But in order to achieve this we need to learn a little bit more about Dart. So in the next lesson we're going to talk about Dart enums. For all of that and more I'll see you then.
This course was created by London App Brewery. We are pleased to host this content in our library.
- Using Flutter themes
- Refactoring widgets
- Customizing widgets using themes
- Routes and navigating
- Dart maps