Flutter gridView.builder how to scroll all page, not only gridView-CodePudding

I have a gridView.builder in my code but when I scroll it scrolls only gridView, not all page. I want to scroll the whole page, how can i fix it?

my code:

FutureBuilder<List<Product>>(
                future: productFuture,
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return Center(child: CircularProgressIndicator());
                  } else if (snapshot.hasData) {
                    final product = snapshot.data;
                    return buildProduct(product!);
                  } else {
                    return Text("No widget to build");
                  }
                }),

  Widget buildProduct(List<Product> product) => GridView.builder(
    gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 300,
        childAspectRatio: 3.15 / 5,
        crossAxisSpacing: 5,
        mainAxisSpacing: 10),
    itemCount: product.length,
    itemBuilder: (context, index) {
      final productItem = product[index];
      final media = product[index].media?.map((e) => e.toJson()).toList();
      final photo = media?[0]['links']['local']['thumbnails']['350'];
      return Container();
    },
  );

CodePudding user response：

It's hard to reproduce because the code you shared is so lacking. But I understand your problem.

The first thing to know, you need to use SingleChildScrollView() and Column() for your parent Widget.

Then add your GridView.builder() as children into Column().

Also set physics: const NeverScrollableScrollPhysics() and shrinkWrap: true on GridView.builder()

Example Code:

SingleChildScrollView(
  child: Column(
    children:[
      imageCarouselWidget(),
      imageSliderWidget(),
      anotherWidget(),

      /// your GridView.builder(),
      GridView.builder(
        // Set this shrinkWrap and physics
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        //
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 300,
          childAspectRatio: 3.15 / 5,
          crossAxisSpacing: 5,
          mainAxisSpacing: 10,
        ),
        itemCount: product.length,
        itemBuilder: (context, index) {
          return yourGridWidget();
        },
      ),
    ],
  ),
),

CodePudding user response：

If you want the whole page to be scrollable, wrap your widget to a Column and wrap it again to a SingleChildScrollView :

SingleChildScrollView(
  child: Column(
    children: [
   // Your code
 ]
))