Building Dynamic Lists with Streams in Dart's Flutter Framework

Key Takeaways

hey guys my name is tensor welcome to another flutter tutorial today we're going to be looking at how we can make use of data streams inside of flutter specifically we're going to be looking at json streams in this tutorial we're going to make a photo streamer and we're going to make use of the json placeholder api for this in this application we're going to be targeting the photos route on this API because the photos route has 5,000 different items and it will also allow us to bring in the photo URLs and then render those photos inside of our application so this is important because you won't always have a set amount of data when you have a dynamic amount of data that you want to load lazily you need to make use of something called a stream and that's what we're going to be doing in this application what the application will allow us to do is render the photos when we need them and not before to get started with this application we want to make our additional imports we need dart async because we want to make the call to our API asynchronous we need dark convert to convert the JSON into data that dart can use and we need the HTTP package so that we can actually make the HTTP GET request now the first thing we want to do is build out our photo class for our data model if we take a look at our JSON data we have five different fields here an album ID an ID a title a URL and a thumbnail URL in this application we only really want the title and the URL this means that our photo itself will only really need a title and URL field so we'll create two final variables both of them will be strings and one will be called the title and the next will be the URL and then we'll create a photo dot from JSON map function to allow us to set these values and to set the values all we really need to do is just say photo from jason map pass in our map and then have a colon and sign title to map title and URL to map URL okay so now that that's done let's set up our root widget for our my app class we're extending stateless widget and we want to override the build method we're going to return a material app widget will give our material app a title of photo streamer and then we will give it a theme and we can define the theme data directly inside of the widget so we just create a new theme data instance and then we define the property that we want primary swatch will just be colors green then we need to of course define the home for this application or rather the widget that will be embedded inside of the material app and this will be a class called photo list so we'll create our class photo list and we'll have it extend stateful widget and then of course we'll override the create state function and I forgot my parentheses there and now we need to create a photo list state class alright so now we have our photo list setup and our photo list state class setup and this is where most of the magic for this application is going to occur the first thing we want to do is create a stream controller that won't take in photo elements so essentially this is the controller that we're using to stream all of the data that we're going to get into this application next we want to create a list that we can use to initialize the state and this variable will just be called list and it will be a type of list with photos inside of it and we can initialize it to an empty list right off the bat below this we can override our void in its state function and inside of this we'll call super init state and then we'll set up our stream controller specifically we want to set this up so that we can broadcast our stream controller in other words we want to be able to subscribe to the stream and we'll do that on the next line so we'll set it up by saying stream controller dot stream dot listen and then we pass in a function that will allow us to essentially subscribe to stream and then set the state of our application inside of our stream controller stream dot listen we create a variable P which is a photo and we're going to pass P to a set state function and inside of this set state function we'll call list ad and we'll put P inside of the list then at the bottom of our initial state function we want to call a function called load with our stream controller in it and this will be the function that we use to actually load all of the data by creating an HTTP request to get all the data we're creating our stream with our load function and we're subscribing to that stream before the load function is called and so when items start to get loaded into our stream from our HTTP request they then get added to the list which we then can of course use in other ways so let's create our load function now we want our load function to be asynchronous so we'll call load and we pass in our steam controller and we're just going to call this SC and then we of course have to put the async keyword before the function body we get our URL which is just our jason placeholder type echo comm backslash photos then we want to create our HTTP client and we do this by instantiate an HTTP client we want to create our request by instantiating a new HTTP request and this will be a type get and then we will parse our URL by passing it into your RI dot parse and then we want to create our streamed response and we'll do this by taking our request putting it inside of our client and then sending it and of course we're going to use a weight this will only have a value inside of it once the client dot send function has actually executed so now we want to manipulate our stream so we subscribe to the stream by calling streamed response stream and then we're going to transform it we want to pass in a utf-8 decoder then we want to pass in our JSON decoder then we'll call expand with an anonymous function inside of it and this will allow us to essentially take each element from our stream and put them into a collection and then we want to map this on our photo from JSON map function so it takes each element and it passes it through and it turns it into a photo type and then we're going to take this stream and pipe it into our stream controller variable and this will make it so that we can take the data and then serve it to our application now we do also want to override the dispose method for this particular class and of course dispose allows us to tell the application how it should handle the action of removing the widget from our widget tree so in this case we want to take our stream controller and close it and then we will set it equal to null now that we have all of the backend logic setup for this application we want to create our build function will have our build function return a scaffold widget and we'll give it an app bar and our app bar will just have the text that says photo streams on it then we'll create our body and our body will have a center element as its main parent and then we'll give this body element a ListView builder and then for our item builder for this ListView we'll create an anonymous function that takes in our build context and our index and we'll pass it to a function called make element make element we'll take in an integer which will be our index and inside of this function we want to check to see if the index is larger than our list dot length or equal to our list dot length and if it is then we just return null remember that lists in dart are zero indexed so if it's equal to then it's technically larger than the list dot length now the reason why we're making this check is because our list it will be dynamically sized so the list is lazily built as we get the data in other words as far as our element is concerned our list could be infinite size then inside of this function we'll create a container and we'll give our container padding of edge in that's not all 5.0 and then our container will have a column inside of it and inside of that column will have multiple children and we will then put in the image based on the URL that we're getting from the network so this will actually get the URL from the network and then render the image and then we will take our title and we'll put it below it so our title will be converted into a string and then will be put into our text element all right so now let's bring up our emulator and run this application and see what it looks like all right so here's our application you can see we have our green app bar this is photo streams and then we've got our images and the titles below them and we can scroll down and there should be 5,000 elements here so as we keep scrolling down the application will keep fetching the images as we're scrolling down the images haven't been rendered yet until we get to a certain point then they get rendered if we go backwards it will then re render the images behind it I don't really like the layout of all of our images and our text so let's make this horizontal rather than vertical so to do that we go up to our list item and we add the scroll direction property to our list item and for our scroll direction we want to put in access corazon tool and this will make it so that our item will scroll horizontally rather than vertically now if we reload the application you can see here now we've got an overflow issue at the bottom because our images are too large for the screen and the text is actually being pushed below the application screen view we can fix this by adding a box that will fit around each of the children inside of our ListView or we could scale down the image itself I kind of just want to create a box that will fit around all of our children there are various different UI elements that we can use to fix this problem I've just implemented what's called a fitted box and for the fitted box element we also need to add the property fit and I'm going to specifically say box fit Haight so it will be constrained by the height of the element so you can see here and now our text and our photo fit inside of our application properly you may also notice that while I'm scrolling you can see this rather large text popping up and that has to do with how our stream is loading our photographs the text you see as we scroll is happening because the application is actually fetching the URLs faster than it can render them and this is most likely being caused by the fact that the images are so large we could scale down the images by coming down to our image and putting in a property called scale so say I want them to be one half of this size that they currently are I just put in 0.5 on reload you can see now the image is about half the size it was from before however if you look at the bottom our text is very very small we can also rescale the text by adding a text scale factor so if I want to scale it up by a factor of 10 I can do so by putting in 10.0 and of course now this is looking rather strange so we should probably use a different type of box rather than a fitted box for this particular element so to make this much smaller we can change this from a fitted box into a container and then for our image we can specify the width and the height and I'm specifically giving it 150 point 0 and 150 point zero and now you can see the images are quite a bit smaller and actually they're sitting at the top of the screen and if we want to Center all of this we can then replace the container with a padding and then we give our padding and edge in sets not only of top 200 and this will then put everything down into the center and you can see as I scroll it we aren't having the same issue that we were having before alright guys so that's it for now I hope you enjoyed this tutorial if you did feel free to like and subscribe if you have any questions or comments feel free to leave them in the box below and if you dislike the video then by all means download it as much as you like have a good night