Previous episode: 11. Introduction
Next episode: 13. Use a List Tile
Get immediate access to this and 4,000+ other videos and books.
Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and
4,000+ professional videos in a single subscription, it's simply the best investment you can make in
your development career.
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.
All videos. All books.
One low price.
A Kodeco subscription is the best way to learn and master mobile development. Learn iOS, Swift, Android, Kotlin, Flutter and Dart development and unlock our massive catalog of 50+ books and 4,000+ videos.