Home > Software design >  GridView.builder is not scrolling in flutter
GridView.builder is not scrolling in flutter

Time:08-26

here I'm trying to display a list using grid view. but this is not scrollable how do I make this scrollable? here is the code

              padding: const EdgeInsets.all(18.0),
              child: GridView.builder(
                primary: true,
                physics: const ScrollPhysics(),
                shrinkWrap: true,
                itemCount: data.length,
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  childAspectRatio: 2.9 / 5,
                  crossAxisCount: 2,
                  crossAxisSpacing: 30.0,
                  mainAxisSpacing: 10.0,
                ),
                itemBuilder: (context, index) {
                  return Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        height: 200,
                        width: 300,
                        decoration: BoxDecoration(
                            image: DecorationImage(
                                fit: BoxFit.cover,
                                image: AssetImage(data[index].image)),
                            borderRadius: BorderRadius.circular(20)),
                      ),
                      const SizedBox(height: 9),
                      const Text(
                        'Drnink Name',
                        style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      const SizedBox(height: 10),
                      const Text(
                        'Category name',
                        style: TextStyle(
                            fontWeight: FontWeight.bold, color: Colors.grey),
                      )
                    ],
                  );
                },
              ),
            ),

I tried all of these widgets to make this gridview scrollable. but none of those is not working I used

primary: true,
physics: const ScrollPhysics(),

also

singleChildScrollview
Expanded

but both are not working, how do I fix this???

CodePudding user response:

remove SingleChildScrollView and Expanded use direct GridView. GridView own his scroll view

 class MyApp extends StatelessWidget {  
      
      List<String> images = [  
        "https://static.javatpoint.com/tutorial/flutter/images/flutter-logo.png",  
        "https://static.javatpoint.com/tutorial/flutter/images/flutter-logo.png",  
        "https://static.javatpoint.com/tutorial/flutter/images/flutter-logo.png",  
        "https://static.javatpoint.com/tutorial/flutter/images/flutter-logo.png"  
      ];  
      
      @override  
      Widget build(BuildContext context) {  
        return MaterialApp(  
          home: Scaffold(  
            appBar: AppBar(  
              title: Text("Flutter GridView Demo"),  
              backgroundColor: Colors.red,  
            ),  
            body: Container(  
                padding: EdgeInsets.all(12.0),  
                child: GridView.builder(  
                  itemCount: images.length,  
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(  
                      crossAxisCount: 2,  
                      crossAxisSpacing: 4.0,  
                      mainAxisSpacing: 4.0  
                  ),  
                  itemBuilder: (BuildContext context, int index){  
                    return Image.network(images[index]);  
                  },  
                )),  
          ),  
        );  
      }  
    }  

CodePudding user response:

You can provide physics: NeverScrollableScrollPhysics() on GridView to disable the scroll effect. If you want scrollable as secondary widget use primary: false,

To have Full Page scrollable, you can use body:SingleChildScrollView(..) or better using body:CustomScrollView(..)

  • Related