Welcome to Day 10, Lists & Scrolling – Displaying Endless Content!, and another exciting step in Week 2! By now, you’re comfortable with Dart, building UIs with widgets, arranging them with layouts, and making them interactive with setState() and even Provider.

ListView(
  children: <Widget>[
    ListTile(title: Text('Apple')),
    ListTile(title: Text('Banana')),
    ListTile(title: Text('Cherry')),
  ],
)

ListView.builder(
  itemCount: 100, // Total number of items
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Text('Item No. $index'),
      subtitle: Text('This is item number $index'),
    );
  },
)

ListView.separated(
  itemCount: 50,
  itemBuilder: (context, index) {
    return ListTile(title: Text('Message from User ${index + 1}'));
  },
  separatorBuilder: (context, index) {
    return Divider(height: 1, color: Colors.grey);
  },
)

GridView.count(
  crossAxisCount: 2, // Controlled by dropdown
  children: List.generate(10, (index) {
    return Card(child: Center(child: Text('Grid Item $index')));
  }),
)

GridView.builder(
  itemCount: 20,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    crossAxisSpacing: 8.0,
    mainAxisSpacing: 8.0,
  ),
  itemBuilder: (context, index) {
    return Card(child: Center(child: Text('Photo ${index + 1}')));
  },
)

ListView(
  physics: BouncingScrollPhysics(), // Adds iOS-like bounce
  children: [...]
)

But what if you have a lot of items to show? Think about your phone’s contact list, a news feed, a product catalog, or a gallery of photos. You can’t fit them all on one screen! This is where Lists and Scrollable Widgets become your best friends.

Today, we’ll learn how to display a potentially endless amount of content in a smooth, performant way in your Flutter apps!

The World of Lists: Why We Need Them

Imagine trying to display 100 contacts on a tiny phone screen without scrolling. Impossible, right? Lists are essential for:

• Displaying Collections: Showing many similar items (e.g., messages, users, products).
• Efficiently Handling Large Data: Flutter only builds the widgets that are currently visible on the screen, saving memory and making your app super fast.
• User Experience: Allowing users to smoothly scroll through content, finding what they need.

Let’s dive into the most common ways to create Lists & Scrolling in Flutter

1. ListView: Your Go-To Vertical Scroller

ListView is the most common and versatile widget for displaying a scrollable list of items, usually arranged vertically.

a) Simple ListView (for a few items)

If you have a small, fixed number of items, you can just list them directly as children.

Analogy: Like writing a short shopping list on a small piece of paper.

ListView(
  children: <Widget>[
    ListTile(title: Text('Apple')),
    ListTile(title: Text('Banana')),
    ListTile(title: Text('Cherry')),
    // ... add a few more
  ],
)

• ListTile: A handy widget specifically designed for list items, often used for rows with text, icons, and subtitles.

b) ListView.builder (for many or dynamic items)

This is the workhorse for most real-world lists! ListView.builder is incredibly efficient because it only creates the widgets that are currently visible on the screen, plus a few extra around the edges. As you scroll, old widgets are recycled, and new ones are created.

Analogy: Imagine a chef preparing food. Instead of cooking all 100 dishes at once (even if only 5 are on the table), they only cook the dishes needed right now, and prepare new ones as customers order.

ListView.builder(
  itemCount: 100, // Total number of items
  itemBuilder: (BuildContext context, int index) {
    // This function is called for each visible item
    return ListTile(
      title: Text('Item No. $index'),
      subtitle: Text('This is item number $index'),
    );
  },
)

• itemCount: Tells Flutter how many items are in your list in total.
• itemBuilder: This is a function that Flutter calls whenever it needs to build a new list item. index tells you which item number Flutter wants.

c) ListView.separated (with dividers!)

This is similar to ListView.builder but automatically adds a separator (like a thin line) between each item. Great for visually separating content.

ListView.separated(
  itemCount: 50,
  itemBuilder: (context, index) {
    return ListTile(title: Text('Message from User ${index + 1}'));
  },
  separatorBuilder: (context, index) {
    return Divider(height: 1, color: Colors.grey); // A thin grey line
  },
)

• separatorBuilder: A function that creates the widget to be placed between items.

2. GridView: Arranging in Grids

What if you want items arranged in a grid, like a photo gallery or app icons? That’s where GridView comes in!

a) GridView.count (fixed number of columns)

This is the simplest way to create a grid. You just tell it how many columns you want.

Analogy: Laying out photos on a corkboard in neat rows and columns.

GridView.count(
  crossAxisCount: 2, // 2 columns
  children: List.generate(10, (index) {
    return Card( // A simple card for each grid item
      color: Colors.blue[100 * (index % 9 + 1)], // Varying shades of blue
      child: Center(child: Text('Grid Item $index')),
    );
  }),
)

• crossAxisCount: The number of items you want along the cross axis (columns for a vertical scrolling grid, rows for a horizontal scrolling grid).

b) GridView.builder (more flexible, dynamic)

Just like ListView.builder, GridView.builder is efficient for large or dynamic grids. It uses a gridDelegate to define the layout (e.g., fixed cross-axis count or max extent).

GridView.builder(
  itemCount: 20,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3, // 3 columns
    crossAxisSpacing: 8.0, // Spacing between columns
    mainAxisSpacing: 8.0,  // Spacing between rows
  ),
  itemBuilder: (context, index) {
    return Card(
      color: Colors.green[100 * (index % 9 + 1)],
      child: Center(child: Text('Photo ${index + 1}')),
    );
  },
)

• gridDelegate: This is crucial for GridView.builder. SliverGridDelegateWithFixedCrossAxisCount is one common type, letting you set the crossAxisCount (number of columns/rows).

Little Scroll Secrets: Physics & Behaviors

You might notice different scrolling behaviors on Android vs. iOS (e.g., the “bouncing” effect on iOS when you scroll past the end). Flutter lets you control this with physics.

• AlwaysScrollableScrollPhysics(): Always allows scrolling, even if content is smaller than the view.
• BouncingScrollPhysics(): Provides an iOS-style bouncing effect.
• ClampingScrollPhysics(): Provides an Android-style clamping effect (stops at the end).

You can apply these to ListView or GridView like this:

ListView(
  physics: BouncingScrollPhysics(), // Adds iOS-like bounce
  children: [...]
)

Conclusion

You’ve now unlocked the power of displaying endless content in Flutter! You’ve learned about the versatile ListView for vertical scrolling (especially the efficient ListView.builder for large datasets) and the flexible GridView for grid-based layouts. You also got a peek into customizing scroll behavior.

These widgets are fundamental to building almost any real-world app, from social media feeds to e-commerce catalogs. Practice combining them with your knowledge of other widgets and layouts!

Tomorrow, on Day 11, we’ll tackle Forms & Validation, learning how to capture user input reliably and ensure it meets your app’s requirements

Tags: 30 Days of FlutterflutterFlutter Beginner Tutorialflutter beginner tutorialsflutter courseflutter learnGridViewGridView.builderListslistviewListView.builderMobile DevelopmentScrollable WidgetsUI