Flutter: Add item below GridView

Question

I need to add an item below the GridView in Flutter. It should be visible only once a person scrolls down the grid completely.

The item should be full-width, so having it as the last item in the gridview is out of the question.

How can I do this?

Answer 1

You're going to need slivers to achieve this. The idea here is to have lots of lists and scroll each one completely before starting to scroll the second one.

To use slivers you need a CustomScrollView, which has a property called slivers that, in practice, works pretty much the same as children works for multiple child widgets.

There is variety of sliver widgets for you to choose which one fits in your needs. If you need a Grid, you must use a SliverGrid. You can pass the Grid children through the delegate property.

As far as I'm concerned, there's no sliver widget that limits you to only one child — all of them are multiple child widget — so the last widget you mentioned must be inside a List (or whatever else you'd rather).

Seems like you need something like this:

Container(
  child: CustomScrollView(
    slivers: [
      // This one is scrolled first
      SliverGrid(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
        delegate: SliverChildListDelegate([
          // Place your children here
        ]),
      ),
      // Then this one becomes visible and start scrolling as well
      SliverList(
        delegate: SliverChildListDelegate([
          // Place that last widget here
        ]),
      ),
    ],
  ),
);