CODEWITHSUNDEEP
flutterdartflutter-pageview
Tom3652
Tom3652

Reputation: 2957

GridView inside PageView flutter

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 !

Upvotes: 3

Views: 1844

Answers (3)

Yogi Arif Widodo
Yogi Arif Widodo

Reputation: 679

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

);
...

Upvotes: 0

Tom3652
Tom3652

Reputation: 2957

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

Upvotes: 1

Jim
Jim

Reputation: 7601

Set your Gridview parameters as follow:

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

Upvotes: 0

Related Questions