Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add emptyBuilder to ListView #164883

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Conversation

chrystoffer
Copy link

ref: 164867

Currently, when working with ListView.builder, handling empty states requires additional widgets like Column and conditional logic to display a message when the list is empty. This results in extra boilerplate code.

For example, without an emptyBuilder, developers need to write:

return Scaffold(
  appBar: AppBar(title: Text("My app")),
  body: Column(
    children: [
      if (listTest.isEmpty) Center(child: Text("No items found.")),
      if (listTest.isNotEmpty)
        ListView.builder(
          padding: EdgeInsets.zero,
          shrinkWrap: true,
          itemCount: listTest.length,
          itemBuilder: (context, index) {
            return Padding(
              padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 5),
              child: Card(
                elevation: 0,
                child: Padding(
                  padding: const EdgeInsets.all(1.0),
                  child: ListTile(
                    title: Text(listTest[index], maxLines: 1, overflow: TextOverflow.ellipsis),
                  ),
                ),
              ),
            );
          },
        ),
    ],
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: addItem,
    tooltip: 'ADD',
    child: const Icon(Icons.add),
  ),
);

With an emptyBuilder property in ListView.builder, this can be simplified:

return Scaffold(
  appBar: AppBar(title: Text("My app")),
  body: ListView.builder(
    padding: EdgeInsets.zero,
    shrinkWrap: true,
    itemCount: listTest.length,
    itemBuilder: (context, index) {
      return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 5),
        child: Card(
          elevation: 0,
          child: Padding(
            padding: const EdgeInsets.all(1.0),
            child: ListTile(
              title: Text(listTest[index], maxLines: 1, overflow: TextOverflow.ellipsis),
            ),
          ),
        ),
      );
    },
    emptyBuilder: (context) {
      return SizedBox(
        height: MediaQuery.of(context).size.height,
        child: Center(child: Text("No items found.")),
      );
    },
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: addItem,
    tooltip: 'ADD',
    child: const Icon(Icons.add),
  ),
);

This property would work similarly to separatorBuilder, allowing developers to provide a widget that will be displayed when the list is empty. This reduces boilerplate and makes the API more intuitive.

Pre-launch Checklist

If you need help, consider asking for advice on the #hackers-new channel on Discord.

Copy link

google-cla bot commented Mar 9, 2025

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

@github-actions github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: scrolling Viewports, list views, slivers, etc. labels Mar 9, 2025
Copy link
Contributor

@Piinks Piinks left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @chrystoffer welcome, thanks for sending a PR.
I don't think this is something we want to add, will you see if my comment in the linked issue helps?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
f: scrolling Viewports, list views, slivers, etc. framework flutter/packages/flutter repository. See also f: labels.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants