Dart first-class objects

And now it looks a lot simpler and a lot easier to read. But there's just one thing, we know that we're currently using a reusable card to be able to create a card that has a particular margin, or a particular look, or a particular rounded border. But we're also adding it as a child And that's what we're going to do in this lesson. And in the process, I'm going to show you something really cool that you can do with Dart, which is passing around functions as if they were just any other object. And I've just noticed that I've actually got a typo in the name of my file. Over here you can see that I've written imput instead of input, but this is really easy to fix because it's not affecting any of our code. And so if you ever get a typo or a spelling mistake in your file name, simply just right click on it and click on refactor, rename, and it will change all the places where this is used. So let us change that to input. It'll search for references, search for comments and strings, and it will refactor everything to the right spelling. In Dart functions are first class citizens. This means that they have a type and they can be passed around just like any other type. For example, a string or an int. And they can also be set as the value of the variable or a constant. So let's take a look at this now. So here in my Dart pad I've got two functions. One is a function called add, which simply adds the two numbers that it's given. And the second one is called multiply, and it multiplies the two numbers that it's given. Now if I wanted to perform a calculation I could say add and then provide my numbers three and five, for example. And then I would end up with a result. So let's call it A int results equals the results of the add. And then we'll print the result to the console. And you can see that I will be able to run it as it is. But what if I wanted to build a calculator where the user is able to tap on the plus button or the minus button and perform the calculation that they need? Well, what if instead of having to call a different function each time, instead what if I create a new function that returns an int and it's called calculator. And it not only takes two numbers int and one and int and two, but it can also take a function as an argument. So we would be able to add it as a type. So for a string it would be string, for an int it would be an int, but for function we would just write the name function with a capital F. And we could give it a name. Let's call it calculation. And then inside the body of the function, I will perform the calculation on those two numbers n1 and n2. And then I would return the result of this calculation as the output of my calculator. Now what I'm able to do is instead of having to call add, then multiply, then whatever, then in this case I could simply write the result is going to be calculator performing a function on two numbers, let's call it five and eight, and then the third input here and actually trigger the functionality that's when I add the parenthesis and any inputs if necessary. Now that we've seen how flexible functions can be and how they can be passed around, just like any other object or any other type, it's time for your challenge to apply what you've learned to our code. The goal of the challenge is to do the gesture detector on the first icon card and also the second one and refactor it into the reusable card .Dart file. So that way we can actually pass a function into our reusable card just as we passed a color property, or a card child, and our function is also going to be passed as a value for one of these properties. So if you're successful by the end nothing about your app will have changed other than the fact that the gesture detector should now live in the reusable card and inside this build method. Pause the video and see if you can solve this challenge. Alright, so first things first. I'm going to simply delete my gesture detector from this page. So I'm going to hold down optional alt, hit enter, and I'm going to remove my widget from both places. So both in the first card and the second card. Now I just have a pure reusable card. And I'm going to pass over the functionality where I set state and change the selected gender when the user clicks on this card, or this card, into my reusable card. So inside here, in the build method, instead of just returning a container, I'm actually going to wrap the container inside a gesture detector. And here, of course I will now again have access to the on tap, and I'm going to pass over a function into my reusable card widget. So in exactly the same way that we did with our previous two properties, color and card child, I'm going to add another final property which is going to have a function as the type and I'm going to call it onPress. And this is also going to be initialized when I create a new reusable card. So I'm going to add the this.onPress over here, so that I can pass over whichever function I want to be used inside my reusable card. And then it's going to be set as the value of the on tap. So this means that when I create a reusable card I can specify a function that is going to be the function that will be called when the gesture detector detects a tap on the reusable card. So now I can go back to my input page and add some properties to my reusable card. So I can add my onPress, which I just defined just now. And it's going to be the same as what we would've done with the gesture detector. We're going to add an anonymous function and inside the anonymous function we have our set state, and inside the set state we change the selected gender to gender.male in the first reusable card. And in our second reusable card we have our onPress and in this case the set state is going to change the selected gender to female. Now when I hit save on my code nothing about my app will change. You can see that it still works exactly the same way as it did before. But now we simply refactored the ability for our reusable card, this custom widget that we've built, based on gesture detectors, based on containers, based on box decorations, etc. And it's now also able to take a onPress. So it's able to respond to taps. So we've essentially upgraded our reusable card to also to be able to detect touch simply by passing over a function as the value of the onPress property. And the result of this is cleaner code with less things being embedded. And all the functionality and the design is now together in one widget. It's always good practice to refactor your code as you go along. This way you don't end up with spaghetti code at the end and lose all motivation to tidy it up. You know that when your room gets to a certain state where it's just no longer possible to recover it and then you give up. That's not what we want with our code. We want it to be neat and tidy. And performance. Now in the next lesson, we're going to continue working on the other cards that we have in our user interface. And we're going to implement a flutter slider to be able to select the users height on a scale. So for all of that and more, I'll see you on the next lesson.