Question 79974 in Flutter Question posted in
The official Flutter documentation can be found here.

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

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();
    },
  );

enter image description here

Tags:

2

Answers


  1. 0

    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
 ]
))
    Login or Signup to reply.
  2. 0

    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();
        },
      ),
    ],
  ),
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search