Skip to main content
Flutter Basics – Complete Beginner to Advanced Guide
CHAPTER 12 Beginner

Flutter Lists and GridView

Updated: May 16, 2026
25 min read

# CHAPTER 12

Flutter Lists and GridView

1. Introduction

If you open Spotify, you see a list of songs. If you open Amazon, you see a grid of products. If you open Twitter, you see a list of tweets. Vertical and horizontal scrolling feeds are the absolute core of modern mobile app design. While a standard Column stacks items vertically, it has a fatal flaw: it cannot scroll! If items fall off the screen, the app crashes. In this chapter, we will master Flutter Lists and GridView. We will explore the simple ListView, optimize our memory using the incredibly powerful ListView.builder, and create Instagram-style photo galleries using GridView.

2. Learning Objectives

By the end of this chapter, you will be able to:
  • Create a basic scrolling list using ListView.
  • Understand why standard Columns cannot handle large data.
  • Optimize memory and performance using ListView.builder.
  • Create a 2-column or 3-column layout using GridView.count.
  • Combine lists with the ListTile widget for standard UI patterns.

3. The Basic ListView

A ListView is essentially a Column that automatically knows how to scroll.
  • Use Case: A settings menu with a small, fixed number of items (e.g., 5 options).
dart
12345678 
ListView(
  children: [
    Text("Settings Option 1"),
    Text("Settings Option 2"),
    Text("Settings Option 3"),
    // ... if this list goes off the screen, you can just swipe to scroll!
  ],
)

4. The Performance Problem

If you have an array of 10,000 products, and you generate 10,000 widgets inside a standard ListView, Flutter will render all 10,000 widgets immediately. Your phone will run out of RAM and crash within seconds. Solution: We only need to render the 6 items currently visible on the glass screen! As the user scrolls, we recycle the widgets. This is called "Lazy Loading."

5. The Champion: ListView.builder

To achieve Lazy Loading, we use ListView.builder. It is the most important layout widget in Flutter. It takes two crucial properties:
  1. 1. itemCount: How many items are in your data list?
  1. 2. itemBuilder: A loop function that builds the UI for *one* item at a time, receiving an index (0, 1, 2, etc.).
dart
12345678910111213141516 
// The Data
List<String> userNames = ["Alice", "Bob", "Charlie", "Dave", "Eve"];

// The UI
ListView.builder(
  itemCount: userNames.length, // Tells Flutter we have 5 items
  itemBuilder: (context, index) {
    // This function runs 5 times. 'index' goes from 0 to 4.
    return Card(
      child: Padding(
        padding: EdgeInsets.all(16.0),
        child: Text(userNames[index]), // Dynamically inject the name!
      ),
    );
  },
)

6. The ListTile Widget

When building a list (like an email inbox), you usually want an icon on the left, a title, a subtitle, and an arrow on the right. Do not build this manually with Rows and Columns! Flutter provides the perfect pre-built widget: ListTile.
dart
1234567 
ListTile(
  leading: Icon(Icons.email), // Left side
  title: Text("Meeting at 3PM"), // Main text
  subtitle: Text("Don&#039;t forget to bring the reports..."), // Smaller text below
  trailing: Icon(Icons.arrow_forward_ios), // Right side
  onTap: () { print("Email opened!"); }, // Automatically makes it clickable with a ripple effect!
)

7. Creating Grids with GridView

If you are building Pinterest or a Photo Gallery, you want items side-by-side. Use GridView. GridView.count allows you to specify exactly how many columns you want.
dart
1234567891011 
GridView.count(
  crossAxisCount: 2, // Creates a 2-column grid!
  crossAxisSpacing: 10, // Horizontal gap between items
  mainAxisSpacing: 10, // Vertical gap between items
  children: [
    Container(color: Colors.red),
    Container(color: Colors.blue),
    Container(color: Colors.green),
    Container(color: Colors.yellow),
  ],
)

*(Note: For massive data, you should use GridView.builder for the exact same memory optimizations as ListView.builder!)*

8. Visual Learning: ListView.builder Memory

txt
1234567891011 
[ List of 10,000 Items ]

      [ Screen Glass ]
+------------------------+
| Rendered: Item 0       | <-- As Item 0 scrolls up and off the screen...
| Rendered: Item 1       |     ...Flutter destroys it from RAM!
| Rendered: Item 2       |
| Rendered: Item 3       | <-- As Item 3 scrolls onto the screen...
+------------------------+     ...Flutter instantly builds it!

Result: Flawless 60FPS scrolling with zero memory crashes.

9. Common Mistakes

  • Lists inside Columns: If you place a ListView inside a Column, the screen will turn white and crash. A Column tries to let its children be as tall as they want, and a ListView tries to be infinitely tall. This is an impossible math problem for Flutter.
Fix: You MUST wrap the ListView inside an Expanded widget. This tells the ListView: *"Only take up the remaining screen space, then start scrolling."*

10. Best Practices

  • Separators: If you want a thin grey line between your list items, don't build it manually. Use ListView.separated. It takes a third parameter called separatorBuilder where you can simply return a Divider() widget!

11. Mini Project: Build a Contact List

Objective: Use ListView.builder and ListTile to build a dynamic address book.
  1. 1. Create a StatelessWidget.
  1. 2. Inside build, define a list of 10 fake names.
  1. 3. Return a Scaffold with an AppBar.
  1. 4. In the body, return a ListView.builder.
  1. 5. Set the itemCount to the length of your names list.
  1. 6. In the itemBuilder, return a ListTile.
  1. 7. Set the leading to a CircleAvatar containing the first letter of the name!
  1. 8. Set the title to the full name.
  1. 9. Press Play and enjoy your beautiful, memory-optimized, scrolling contact list.

12. Practice Exercises

  1. 1. What pre-built widget perfectly formats an icon, a title, a subtitle, and a trailing arrow into a standardized list item row?
  1. 2. Why is wrapping a ListView inside an Expanded widget necessary when it is placed inside a Column?

13. MCQs with Answers

Question 1

Why is ListView.builder strongly preferred over a standard ListView when rendering an Amazon search result containing 5,000 products?

Question 2

You want to display a photo gallery with exactly 3 images per row. Which widget should you use?

14. Interview Questions

  • Q: Explain the mechanical and memory differences between ListView and ListView.builder.
  • Q: Describe the "Infinite Height" layout error that occurs when a ListView is placed directly inside a Column. What is the architectural solution?
  • Q: Explain the purpose of the itemBuilder function parameter in a ListView.builder. What are the two arguments it receives, and how are they used?

15. FAQs

Q: How do I make a ListView scroll horizontally instead of vertically? A: Inside the ListView, just add scrollDirection: Axis.horizontal!

16. Summary

In Chapter 12, we mastered dynamic, scrolling layouts. We learned that while a basic ListView is fine for small static menus, professional apps demand the RAM optimization of ListView.builder, which dynamically recycles widgets as they scroll on and off the screen. We streamlined our UI code by utilizing the incredibly versatile ListTile, and we explored GridView to create multi-column image layouts.

17. Next Chapter Recommendation

Our main screen content is scrolling beautifully, but our app needs a navigation shell. Proceed to Chapter 13: Working with AppBar, Drawer, and Bottom Navigation.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter Navigation and Routing in Flutter
Next Chapter Working with AppBar, Drawer, and Bottom Navigation

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 5

🎥 Related Videos 1