Custom Classes | Flutter Tutorial For Beginners #18 – Custom Classes

The Net Ninja

Subscribe Here





Flutter Tutorial For Beginners #18 - Custom Classes


So that at the minute, we have a list of quotes right and without putting each quotes now at the minute. Each quote is just a single string, but what? I’d like to do is associate an author with each one. So how are we going to do that well? I suppose what we could do is we could create a new separate list and you know, this would be strings as well. And then this could be called authors and then that could be equal to a new list and then with placing the author each time around for each item in here now we could do that, but this isn’t good for two reasons, first of all. It could get quite messy because we’d have to make sure that the index of each author is the same as the index of the quote for that author in this list, as well. They’d have to match up, and it also means you’ve got two sets of data for what is essentially one thing a quotes and that makes no sense whatsoever. So let’s delete that. Let’s throw that idea in the bin and think of something else. Because instead it would be nice to have a list of maybe quotes objects inside here instead and each object would have the quote text property and the quote author property. Now for this, we’re going to need to make our own quote class, so what? I’m going to do first of all is in the Lib folder is create a new dart file, so go to new and then Dart file, and then we’ll call this quote and inside here, we’ll create a quote class, so we’ve seen how to do this in the dart Primer. If you’ve not watched that, maybe check out that video first of all, but it is quite simple. We’ll create a class called quotes and inside. We need two properties. We need a property for the text and a property for the author. Remember, a class is basically a blueprint for an object type or a type of data. It’s going to describe what properties of functions that data house so classes are a way to describe and create new object, which is going to help us because we’re going to make quote objects, right, so these quote subjects they’re going to have a text property and an author property, so let’s create these string text and remember we don’t define the actual value for this. We don’t set it equal to whatever the text of the quote is going to be because we want to define that as we create a new quote object, so that’s the first property, and that is going to be the actual quote. It’s the text of the quote and the other property is going to be an author which is also going to be a string. So let’s do another one of those string author. Now, just quickly, another reason that classes are good for things like this is that it starts to be modular eyes, your code and you start to implement some abstraction and separation of concerns into your code as well, which is always good, especially as your code base gets bigger. It separates things off into its own logical sections so anyway. We have this class now. We also need a constructor because the constructor is the thing that actually takes values in when we instantiate a class and it sets the values the text in the author, so let’s do that. The constructor is the same name as the class so quotes and it’s going to take in two parameters, so the string, which is the text and also a string which is author, Let me just add the Gion, So its string text and also a string author, So it’s taken in those two things right, so inside here. What we need to do is say, okay. Well, this dot text. So this property right here is going to be equal to the text value that we take in so set it equal to that. And then this dot author is going to be equal to the author down here, all right, so that’s pretty simple, isn’t it? Now, If we wanted to create a new quote, then we just say something like this In the future, we’d say quote, and then we’d pass in the two different parameters, which say the text is something like this is the quote text, and then we’d passing the author and the author would be. I don’t know, Oscar. Wilde, okay, So if we wanted a new quote, that’s pretty much what we do, and we’d say quote my quote. It is equal to this, so that’s all we’re doing. We’re making a new quote object and we’re passing in these two strings. These two strings then get taken in to the constructor and we’re setting the values of that instance of the quote now just before we go any further what? I’d like to do, and by the way that should say quote not quite or kite. What I’d like to do is talk about different ways. We can assign these values and the first thing. I’m going to talk about is named parameter so instead of doing this. Let me just comment this out. What we could do is use named parameters, And in fact, it won’t comment This out. What I’ll do is Ill. Just edit this. So if I add curly braces around these things right here, what we’re saying now is that these must be named parameters so when we pass them in instead of just passing the actual data in we pass in the values or the names of these data, so this one is called test because we set it with call text there, so we’d say well. This is the text that’s the value, and then this is the author right here, Okay, So now we’re using named parameters and one of the benefits of this. Is that now we could do any order? So if I wanted to put the author first, I could do. It doesn’t matter what order they’re passed into the constructor It did before because the first value would be the text and the second value would be the author automatically, but now we’re using named parameters. Were saying explicitly this is going to be the author and this is going to be the text value, so that’s how to use named parameters and another good advantage of using named parameters is that we can get rid of this right here. We don’t need this anymore and we don’t need the curly braces. And instead we can get rid of this. We can say this dot text and this dot author. So what that is doing is taking in the author right here, and it’s automatically assigning it to this property and it’s taken in the text and it’s automatically assigning it to this property. So anyway, now we have our class. Let me just delete this down here. We don’t need this anymore. I’m going to save this file and what I’d like to do is use this quote class over in main dot now to use this the first thing. I’m going to have to do is import it up at the top, so I’m going to say import and then just quote Dot Dot. We don’t need to go into any folders. It’s in the same directory. So now we’ve imported that we can go ahead and use it down here. So instead now of just having the actual text, the actual quote, we can have three quotes objects, so I could now say quote, and then I could do an author and the author would be Oscar Wilde so Oscar Wilde. And then we’d also have a text property and the text property. It would be the string itself now. I’m just going to copy this from my Github Repo. I don’t want to be writing this up from scratch and boring you so anyway. That’s the first quote object now. So comma. And let’s do another two now again. I’m just going to copy these from my repo, so we don’t bore you typing these out from scratch, But we have three quotes now, and you can see that each one now has an author property and also a text property. Now we’re getting an error at the minute. All this is red and underlined and it’s saying that element type quote can’t be assigned to the list type string. And that’s because right here when we declare this list. We’re saying that these things are strings no longer. Are they strings? They are quotes, so we have to update this to quote like so, and then everything is fine now. Okay, so now we have this list of quotes with two properties each now down here we’re trying to output the quote, but now each quote refers to a quote object, so not the text, so we’re trying to now output a quote object inside a text widget, which makes no sense whatsoever, so what we need to do instead is output a string here and then we’ll output, the different properties of the quote object that we get each time we cycle through that list of quotes and we’ll output the text first and then the author, so we’ve seen how to output variables inside a string before we use the dollar sign, and then whatever the variable name is. Now what we want to do now is tap in to a property and we want the text property, so it’s say Dot text, right, but we can’t do this. If we’re outputting a variable, which requires a property like this, we have to surround this in curly braces, so we do a dollar sign, then curly braces and then the property on the object that we need. So if we’re just outputting a single variable if it was just quotes, for example, we don’t need two curly braces, but the minute we introduce a dot or some kind of square bracket notation if it’s an item in a list, then we need these curly braces around, so that’s the way it works so without putting that first of all, then inside the string. I’ll do a -, There won’t output another part of the object, which is going to be the quote Dot author, so we’re now outputting the quad text – the quote author. So if I save this now, then we should see this. Oops, it says here. String is not a sub type of type quote quote, so what I’m going to do is just go to the wrong tab over here and do a hot restart to refresh the data because we changed all the data now, and now it works so we can see we now have all of the author names as well as the author text. So there we go my friends, That’s how we can create a custom class to create our different objects inside this list and then we can still cycle through those objects and output different properties of those objects in the text widget.

0.3.0 | Wor Build 0.3.0 Installation Guide

Transcript: [MUSIC] Okay, so in this video? I want to take a look at the new windows on Raspberry Pi build 0.3.0 and this is the latest version. It's just been released today and this version you have to build by yourself. You have to get your own whim, and then you...

read more