Your Second Flutter App

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

Lists are incredibly important when working on mobile, it's a key part of both iOS and Android SDKs. Naturally, the same is true with Flutter. Now, in the old days of both iOS and Android, it took quite a bit of code to create a list. They often require the develop to create specialized classes. With Swift UI and Jetpack Compose, lists went from a complex machine, requiring a variety of components to simple constructs, oftentimes resembling a for loop. Flutter being declarative in nature is no different. In this episode, we'll create a simple list from the ListView widget. The ListView is quite configurable for a variety of situations. You can simply pass in the children in an array and the ListView will display them. In our case, we want to dynamically create our list. For this the ListView has three important properties; padding, an item count, and an item builder. Padding allows you to add padding surrounding the children in the list. You can pass the edge insets to the padding. The item count lets the ListView know how many children are contained within it. Finally, the item builder is called for each item, it is passed in with a context in a position in the list. Using these two properties, you can get the position in the list and then return a widget to display in the list. Okay, with all that said, let's see this in action. Open your project in progress or download the starter project for this episode. We'll create a list view for our courses page. Open up courses_page.dart in the Courses sub folder found in the UI folder. In Courses page state, we'll get started by creating a helper method that creates the widget for a row in the list. Okay, that's the row. Now it's time to create the actual ListView. We'll replace the Text widget with the ListView widget. First we'll add some padding. We'll set the padding to 16 all the way round. Next, we'll set the item count, which is the total amount of courses. Now for the item builder, we get the context and position. We'll get the current course based on the position and pass it into the build row method. Believe it or not, that's all we need to do to get our ListView up and running. Now, build and run our hot reload. We have a nice looking list of titles for our courses. Mind you, the formatting is lacking, but we'll spend the rest of this part making the list look good.