ListView.builder() in Flutter with different items

Question

Consider the following build() function:

Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ListView.builder(
            itemCount: 6,
              itemBuilder: (context, i){
                if(numberTruthList[i]){
                  return ListTile(
                    title: Text("$i"),
                  );
                }
              },
          ),
        )
      ),
    );
  }

If the numberTruthList is

List<bool> numberTruthList = [true, true, true, true , true, true];

then the output comes out to be

and if the numberTruthList is

List<bool> numberTruthList = [false, true, true, true , true, true];

the output comes out to be

I want the output to be a ListView with the items

 ListTile( title: Text("$i"),);

for values of i such that numberTruthList[i] is true, what should be the code?

https://docs.flutter.dev/cookbook/lists/mixed-list – giorgio79 Dec 26 '21 at 15:38 — giorgio79, Dec 26 '21 at 15:38

westdabestdb · Accepted Answer · 2019-01-12T21:46:05.830

32

ListView.builder(
  itemCount: 6,
  itemBuilder: (context, i) {
    return numberTruthList[i]
      ? ListTile(
          title: Text(numberTruthList[i].toString()),
        )
      : Container(
          height: 0,
          width: 0,
        );
   },
)

edited Jan 12 '19 at 21:46

answered Jan 12 '19 at 21:27

westdabestdb

4,353
20
28

there is a huge gap at the space of empty ListTiles. How do I remove that? – Naveen Jan 12 '19 at 21:38
1

This huge gap is empty `ListTile()`. Replace it with `Container` has 0 height and 0 width. – westdabestdb Jan 12 '19 at 21:39

score 1 · Answer 2 · answered Jun 05 '20 at 08:26

1

use Wrap() in else case.

Container wraps content when there is content and match parent when there are no content.

Wrap wraps the content no matter what.

answered Jun 05 '20 at 08:26

Saahithyan Vigneswaran

6,841
3
35
45

score 0 · Answer 3 · edited Dec 25 '20 at 14:25

0

The itemBuilder should always return a non-null Widget. You can check it here.

edited Dec 25 '20 at 14:25

Ivan Aracki

4,861
11
59
73

answered Dec 25 '20 at 13:09

Rishabh Gupta

39
2

score 0 · Answer 4 · answered Jul 18 '23 at 05:20

In the body, we have ListView.builder with itemcount 20 and itemBuilder which will create a new widget again and again up to 20 times because we have itemCount=20. If we don't use itemCount in ListView.builder then we will get infinite list items so it is recommended to use itemCount to avoid such mistakes.

import 'package:flutter/material.dart';

const int itemCount = 20;

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

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: itemCount,
      itemBuilder: (BuildContext context, int index) {
        return ListTile(
          title: Text('Contact ${(index + 1)}'),
          leading: const Icon(Icons.person_outline_rounded),
          trailing: const Icon(Icons.select_all_rounded),
          onTap: () {
            debugPrint('Contact ${(index + 1)}');
          },
        );
      }
    );
  }
}

ListView.builder() in Flutter with different items

4 Answers4

Linked