Skip an item in gridview without leaving a hole

Question

I'm building a gridview displaying thumbnails and do not want to show the items at index 0. I have a different widget where I show thumbnails using a listview with the Visibility widget. That works!

Like so:

ListView.separated(
                separatorBuilder: (BuildContext context, int index) =>
                    SizedBox(
                      width: mainElementSize * 0.02,
                    ),
                scrollDirection: Axis.horizontal,
                controller: paneController,
                physics: const BouncingScrollPhysics(
                    parent: AlwaysScrollableScrollPhysics()),
                addAutomaticKeepAlives: true,
                reverse: true,
                itemCount: mainElementList.mainElementList.length,
                //
                itemBuilder: (BuildContext context, int index) {
                  return Visibility(
                    visible: index > 0,
                    child: UnconstrainedBox(
                      child: HistoryThumb(
                        index: index,
                      ),
                    ),
                  );
                }),

The gridview does work with Visibility, but different. Instead of just skipping the object, it leaves a whole in the grid. Code:

GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 4,
          mainAxisSpacing: gridheight * 0.015,
          crossAxisSpacing: gridWidth * 0.015,
        ),
        padding: EdgeInsets.symmetric(
          horizontal: 0,
        ),
        physics: const BouncingScrollPhysics(
            parent: AlwaysScrollableScrollPhysics()),
        itemCount:
            Provider.of<MainElementList>(context).mainElementList.length,
        //
        itemBuilder: (context, index) => Visibility(
              visible: index > 0,
              child: UnconstrainedBox(
                child: HistoryThumb(
                  index: index,
                ),
              ),
            )),

Screenshot:

Any way to not have it do that? I found a similar topic here: How to skip build in item builder gridview.builder Flutter Firebase Stream Builder

But I do not want to build a seperate list and duplicate all my objects just to display the thumbnails. Isn't there something more elegant for skipping certain items?

Hey, thanks fopr answering. I don't understand though. Can you elaborate a bit? — Joe, Feb 24 '22 at 14:50

Nishchal Sangai · Answer 1 · 2022-02-25T05:24:19.423

Instead of using Visibility widget you can apply ternary operator and pass SizedBox at index 0:-

index == 0 ? SizedBox() : UnconstrainedBox(
            child: HistoryThumb(
              index: index,
            ),
          ),

Can you try like this:-

GridView.builder(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 4,
      mainAxisSpacing: gridheight * 0.015,
      crossAxisSpacing: gridWidth * 0.015,
    ),
    padding: EdgeInsets.symmetric(
      horizontal: 0,
    ),
    physics: const BouncingScrollPhysics(
        parent: AlwaysScrollableScrollPhysics()),
    itemCount:
        Provider.of<MainElementList>(context).mainElementList.length - 1,
    //
    itemBuilder: (context, index) => Visibility(
          visible: index > 0,
          child: UnconstrainedBox(
            child: HistoryThumb(
              index: index+1,
            ),
          ),
        )),

subtract 1 from itemCount and add 1 in Index history Thumb. I think we can't skip an certain item in the build but we can achieve what you want from this!!

Hey, I tried it but it basically achieves the same effect as Visibility. The Sized Box still gets a spot in the grid and that shows as a blank space. Any other idea? — Joe, Feb 24 '22 at 14:50
can you subtract 1 from the itemCount and add 1 in the index inside the Historythumb ! — Nishchal Sangai, Feb 25 '22 at 05:26
That didnt work either. For now, Im living with assembling a second list with all items but for index 0. — Joe, Feb 26 '22 at 16:25

score 0 · Answer 2 · edited Jun 01 '22 at 13:08

You can achieve your required behaviour by moving your particular item to the end of the list; then you can simply hide that last item in the grid view.

This way, you wont see any whitespace in middle of the grid view.

For example:

List<String> list = [
"mustafa",
"hawari",
"ravi",
"shyam"
];
  int indexOfItem = list.indexOf("hawari");
  String itemTobeAddedAtLast = list[indexOfItem];
  list.removeAt(indexOfItem);
  list.insert(list.length, itemTobeAddedAtLast);

  print(list); 
  // this returns 
  // [mustafa, ravi, shyam, hawari]

score 0 · Answer 3 · answered Feb 13 '23 at 20:20

You can use a condition on the builder

GridView.builder(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 4,
      mainAxisSpacing: gridheight * 0.015,
      crossAxisSpacing: gridWidth * 0.015,
    ),
    padding: EdgeInsets.symmetric(
      horizontal: 0,
    ),
    physics: const BouncingScrollPhysics(
        parent: AlwaysScrollableScrollPhysics()),
    itemCount:
        Provider.of<MainElementList>(context).mainElementList.length,
    //
    itemBuilder: (context, index) => {
        if(index == 0) {
             return --- What you want to return at index 0 --;
        } else {
             return --- the actual builder that you are using normally ---;
        }
     }

I suppose that the OP is aware of that. Have you got any concrete example fulfilling the OP's requirements? — PrzemekTom, Feb 20 '23 at 09:58

Skip an item in gridview without leaving a hole

3 Answers3

Linked