Use ListView builder in Flutter

How to Use ListView builder in Flutter Apps in 2025

by

In this blog, we will guide you on how to use Listview builder in Flutter application. ListView.builder is one of the most commonly used widgets when working with lists in Flutter. It helps you create long, scrollable lists in an efficient way by building only the items that are visible on the screen. This makes your app faster and more optimized. Here, we will give you a clear and detailed explanation with examples so that you can easily understand how to implement ListView.builder in your projects and make your Flutter apps more powerful.

When building modern mobile apps, displaying lists of data is one of the most common requirements. Whether it’s a list of news articles, messages, products, or tasks, Flutter provides an efficient solution: the ListView.builder widget.

In 2025, ListView.builder remains one of the most important tools in Flutter UI development. It not only saves memory by creating widgets lazily but also gives developers flexibility to build scalable apps that can handle thousands of items smoothly.

What is ListView builder in Flutter?

ListView.builder is a constructor in Flutter’s ListView widget. Instead of creating all list items at once, it only builds items when they are visible on the screen.

This makes it much more efficient than a normal ListView, especially for long lists.

Use ListView builder in Flutter

Why Use ListView.builder in 2025?

  1. Performance → Builds items lazily, so it works well with large datasets.
  2. Scalability → Can handle lists with thousands of items without lag.
  3. Flexibility → Easily customizable with custom widgets, images, or dynamic data.
  4. Flutter UI Best Practices → Recommended approach in 2025 for lists.

Step 1: Basic Example of ListView builder in flutter

Here’s a simple example to display a list of items in 2025:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView.builder Example 2025',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const ListViewDemo(),
    );
  }
}

class ListViewDemo extends StatelessWidget {
  const ListViewDemo({super.key});

  @override
  Widget build(BuildContext context) {
    final items = List<String>.generate(20, (i) => "Item ${i + 1}");

    return Scaffold(
      appBar: AppBar(title: const Text("ListView.builder Demo")),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return ListTile(
            leading: CircleAvatar(child: Text("${index + 1}")),
            title: Text(items[index]),
            subtitle: Text("Subtitle for ${items[index]}"),
          );
        },
      ),
    );
  }
}

Step 2: Using ListView.builder with Dynamic Data (API Example)

In real-world apps, you usually fetch data from an API. Let’s integrate it with ListView.builder:

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class ApiListView extends StatefulWidget {
  const ApiListView({super.key});

  @override
  State<ApiListView> createState() => _ApiListViewState();
}

class _ApiListViewState extends State<ApiListView> {
  List posts = [];

  Future<void> fetchPosts() async {
    final response = await http.get(Uri.parse("https://jsonplaceholder.typicode.com/posts"));
    if (response.statusCode == 200) {
      setState(() {
        posts = jsonDecode(response.body);
      });
    }
  }

  @override
  void initState() {
    super.initState();
    fetchPosts();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("API ListView.builder")),
      body: posts.isEmpty
          ? const Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: posts.length,
              itemBuilder: (context, index) {
                final post = posts[index];
                return Card(
                  margin: const EdgeInsets.all(8),
                  child: ListTile(
                    title: Text(post["title"]),
                    subtitle: Text(post["body"]),
                  ),
                );
              },
            ),
    );
  }
}

Step 3: Horizontal ListView builder in flutter

Not all lists scroll vertically. In 2025, horizontal carousels are very common in apps (e.g., product sliders, image galleries).

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: 10,
  itemBuilder: (context, index) {
    return Container(
      width: 150,
      margin: const EdgeInsets.all(8),
      color: Colors.blueAccent,
      child: Center(
        child: Text(
          "Card ${index + 1}",
          style: const TextStyle(color: Colors.white, fontSize: 18),
        ),
      ),
    );
  },
)

Best Practices for ListView builder in flutter in 2025

  • ✅ Use ListView.builder instead of ListView for large lists.
  • ✅ Use const widgets where possible for performance.
  • ✅ Wrap long lists with Expanded inside Column to avoid layout issues.
  • ✅ Use shrinkWrap: true when embedding inside other scroll views.
  • ✅ Consider ListView.separated if you need dividers between items.

Example of Listview builder in Flutter : 

import 'package:flutter/material.dart';

class MyListViewPage extends StatelessWidget {
  final List<String> items = List.generate(50, (index) => "Item ${index + 1}");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListView.builder Example 2025"),
        backgroundColor: Colors.blue,
      ),
      body: ListView.builder(
        itemCount: items.length, // total items
        itemBuilder: (context, index) {
          return Card(
            margin: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
            child: ListTile(
              leading: CircleAvatar(child: Text("${index + 1}")),
              title: Text(items[index]),
              subtitle: Text("This is description of ${items[index]}"),
              trailing: Icon(Icons.arrow_forward_ios, size: 18),
              onTap: () {
                // Handle tap
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text("Clicked on ${items[index]}")),
                );
              },
            ),
          );
        },
      ),
    );
  }
}

FAQs ListView.builder in Flutter 2025

Q1. What is the difference between ListView and ListView.builder?

  • ListView builds all items at once.
  • ListView.builder builds items lazily (only when visible).

Q2. Can I use ListView.builder inside a Column?
Yes, but wrap it with Expanded or set shrinkWrap: true to avoid layout overflow.

Q3. Can ListView.builder handle thousands of items?
Yes. That’s the main advantage—it only builds what’s visible on screen.

Q4. How do I add separators between items?
Use ListView.separated instead of ListView.builder.

Q5. Can I make ListView.builder scroll horizontally?
Yes. Use scrollDirection: Axis.horizontal.

Final Thoughts

In 2025, ListView.builder is still the go-to widget for lists in Flutter apps. It’s efficient, customizable, and works seamlessly with both static and dynamic data.

At baseprogrammer.com, we recommend always using ListView.builder when dealing with large lists, especially in apps that display API data, chat messages, or product catalogs. Combined with modern UI techniques, it helps you build scalable, smooth, and professional Flutter apps.

Whether it’s a vertical list, a horizontal carousel, or a data-driven API list, mastering ListView.builder will level up your Flutter UI development skills in 2025.

Leave a Comment