GridView inside PageView flutter

Question

I am new to flutter and in my previous Android app i could make easily any scrollable view inside another with the same direction, working both ways.

I wonder if it's possible in flutter : in this case i have a simple GridView inside a PageView with the same direction (vertical).

I simply want to handle the case where the GridView can't scroll (the top is reached) and let the parent (PageView) handle the gesture.

To precise a bit more, in my Android app i could use simply use the Google class NestedScrollableHost .

See my other answer to this topic in Android.

I would add that the answer to this question could work with any scrollable view inside another with the same direction.

Thanks !

score 1 · Accepted Answer · answered Aug 10 '21 at 11:04

1

For now there is an ongoing feature request in the Flutter repo about this.

I added one at the time of my question here, but the first one has more upvotes so if you are watching this answer, please go to the first link and upvote the issue

answered Aug 10 '21 at 11:04

Tom3652

2,540
3
19
45

score 0 · Answer 2 · answered Apr 12 '21 at 06:01

0

Set your Gridview parameters as follow:

GridView(
  shrinkWrap: true, 
  physics: NeverScrollableScrollPhysics(),

answered Apr 12 '21 at 06:01

Jim

6,928
1
7
18

Your solution doesn't work unfortunately because the GridView is simply not scrollable anymore, but it need it to be scrollable unless the top is reached AND drag gesture is going in the same direction – Tom3652 Apr 12 '21 at 14:36

score 0 · Answer 3 · answered May 20 '22 at 01:52

use these properties that make its work properly. // important the other is optional.

return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            Expanded(
              child: PageView.builder(
              physics: const BouncingScrollPhysics(), // important
              child: GridView.builder(
                gridDelegate:
                    const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  // childAspectRatio: MediaQuery.of(context).size.width /
                  //     (MediaQuery.of(context).size.height / 4),
                  mainAxisExtent: 256,
                  crossAxisSpacing: 1,
                  mainAxisSpacing: 1,
                ),
                physics: const ClampingScrollPhysics(), // important
                shrinkWrap: true,
                scrollDirection: Axis.vertical,
                child: YourWidget
              )
            )
          ]
        )
      )
    );

);
...

GridView inside PageView flutter

3 Answers3