CODEWITHSUNDEEP
gridviewlayoutflutter
Tin Man
Tin Man

Reputation: 879

Flutter: Add item below GridView

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?

Upvotes: 3

Views: 1744

Answers (2)

Hugo Passos
Hugo Passos

Reputation: 8427

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
        ]),
      ),
    ],
  ),
);

Upvotes: 3

Akram Chauhan
Akram Chauhan

Reputation: 1156

First Create a Column add your Grid Code in First Children and than use Expanded() to display your last item.

See below code.

Container(
  child: Column(
    children: <Widget>[
      //your grid code
      // grid code
      Expanded(
        child: Container(
          child:Column(
            //your last item.
          )
        ),
      ),
    ],
  )
)

Upvotes: -1

Related Questions