Flutter Tutorial for Beginners #20 - Extracting Widgets

Key Takeaways

okay then going so far we've seen how to map through our list up here and then for each quote what we're doing is calling the quote template function over here and we're returning a card widget so that for each quote up here we're out putting a card widget to the screen and that's fine but there is a better way to do this which doesn't include creating this function over here and it also helps to modular eyes our code too so we can do this by creating our own custom stateless widget which represents this card template right here now a quick way of doing this of creating this stateless widget for this card template is to go into the flutter outline up here and then select the card that we want which is this thing this is the thing we want to put in its own stateless widget we can right-click this and we can go to extract widget right here so press that and then we need to give this widget a name now I'm going to call it quote card which makes sense right because it's a template for a quote card then click on refactor I'm going to close the flutter outline and notice what happens first of all it's removed all of the return statement here where we returned the card and instead it says return new quote card now down here we actually see that it's put quote card into its own class which extends stateless widget so it's created a new widget called quote card and then down here we have a build method which returns the same card template so basically it's taken that template and it's put it in its own widget so if ever we wanted to use this template in the future we could just use an instance of this quote card class now we also see this constructor right here with the Souper we don't need all of this stuff for now and that's kind of beyond the scope of this tutorial so I'm going to delete this but we do have a problem inside this thing over here we're trying to output the quilt text and also the quotes author now inside this stateless widget we don't actually know what the quote is when we up here create a new instance of the quote card then we're not passing any date into that we're taking a quote into this function quote template but we're not passing any data into the quote card no kind of parameters so what I'm going to do is actually pass that through into the quote card class and then down here we can accept that into a constructor so first of all I'm going to create a variable called quote which is going to be equal to object-- so I'm gonna say quote and then quotes so now we're going to have this local quote variable inside this stateless widget and I want to accept that in when we instantiate a class now we're passing it in here but we're not passing it in as a named parameter so I'll do that now I'll say the quotes property is going to be the quote right here and then down here we'll do our constructor so quote and then we're using named parameters so I can just use curly braces and then say this dot quote so whatever we pass in is going to be assigned now to this value now at the minute we're getting some squiggly lines over here and that's because we're using a stateless widget at the minute but we're trying to use data inside that stateless widget now we can use data inside a stateless widget but it's not allowed to change over time so what we have to do is put a final keyword in front of this right here and then this is saying look this is going to be the final value of this variable so it's not going to change now one more thing we need to do is actually change this to quote card because that's what the class is called and the constructor should be the same as the class so we're receiving this in now and we're storing it inside this local quote variable so now we can use that down here and now we no longer get the squiggly lines where we try to output the author and the text so if we were to save this now it should all work because from the top we're mapping through the data we're firing this function taking the quote we're calling quote template and passing in that variable the quotes an inside quote template we receive that and we're returning a new quote card instance by the we don't need this new keyword anymore the new version of dart doesn't require that so we can take that off and we're calling this to return a new quote card instance and we're passing that in as a name parameter so down here we're receiving that name parameter and assigning it to this value right here this variable so now we have access to that quote inside this stateless widget remember we have to put final in front of that to say this is not going to change over time it allows us to use the data this way now we have that quote we can inside return this card template and in there we can output the information from that quote so essentially we're returning this card for every quote inside the list so this should all work now I'm going to save this and see if this works and we see no change over here and that's a good sign because it shouldn't change over here you know we're not doing anything new over here we're just rewriting our code to be better more efficient and more reusable so now we've done this there's one thing I'd like to do and that is to actually delete this function because it's become a bit redundant why do we need to call this function down here just to return a new instance of the quote card can't we do this directly down there inside the map function so let's instead get rid of this dude and delete this and what I'm going to do is paste this down here so now what we're doing is we're saying okay well still map through the quotes and fire a function for each one then for each quotes I want you to get a new instance of the quote card which is returning this widget tree to us and outputting the quote data so that's going to do exactly the same thing and if I save we can see nothing changes so that's a good sign again this all still works now one more thing that promise because we've externalized all of this template into its old quote card class we've made this a bit more modular and reusable right so we might want to use this in a different file later on now if that's the case what we should do is maybe put this inside its own file so then we can just import this into what the file needs it in the future so let's do that let me now just highlight all of this class and cut it and we'll go to our project files over here and what I'm going to do is right click and go to new and then we'll choose a new doubt file down here and I'm going to call this quote underscore card art so now we have this file I'm going to paste this in and I'm just going to save it now notice we get a lot of these different squiggly lines at the minute and that's because we've not even imported the quotes into this file yet and we've not imported the material library so let's just do that at the top we can just copy this from main darts so let's copy those things and import them here we need to import this because we're using the flutter material package and also we need to import this because we're using the quotes object right here so now we have those imported we don't see any of the errors so let's save this now and the next thing we need to do is import this into our other file so let me go to main darts and now let me import quote underscore card dart like so and now this should work now we've imported it we should be able to use this quote card class so if I save it again again nothing changes over here which is always a good sign I'm even going to do a hot restart just to see if it didn't catch any changes when I saved but still it still works over here so everything still works but now we've made our code much more modular we've created an external template in its own widget and we can use that custom widget whenever we want now in the template