Grid view with slider flutter

Question

I need to create a Grid view with scroll vertical. How can I achieve it I have created a grid but I cannot make it scrollable?

I have tried adding vertical scroll but it's not working please help to achieve this

here is the grid view code

GridView.count(
                      padding: EdgeInsets.fromLTRB(16, 16, 16, 0),
                      primary: false,
                      childAspectRatio: 1.1,
                      shrinkWrap: true,
                      crossAxisSpacing: 0,
                      mainAxisSpacing: 0,
                      crossAxisCount: 4,
                      // mainAxisCount:2,
                      //scrollDirection: Axis.horizontal,
                      children: List.generate(categoryData.length, (index) {
                        return GestureDetector(
                            onTap: () {
                              Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                      builder: (context) => ProductCategoryPage(
                                          categoryId: categoryData[index].id,
                                          categoryName:
                                              categoryData[index].name)));
                            },
                            child: Column(children: [
                              buildCacheNetworkImage(
                                  width: 40,
                                  height: 40,
                                  url: categoryData[index].image,
                                  plColor: Colors.transparent),
                              Flexible(
                                child: Container(
                                  margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
                                  child: Text(
                                    categoryData[index].name,
                                    style: TextStyle(
                                      color: CHARCOAL,
                                      fontWeight: FontWeight.normal,
                                      fontSize: 12,
                                    ),
                                    textAlign: TextAlign.center,
                                  ),
                                ),
                              )
                            ]));
                      }),
                    ),

How I need to achieve is

score 0 · Accepted Answer · answered Dec 18 '20 at 20:56

Wrap your GridView into a SingleChildScrollView and add physics: ScrollPhysics() to your GridView.count()

SingleChildScrollView(
    child: GridView.count(
                      physics: ScrollPhysics(),
                      padding: EdgeInsets.fromLTRB(16, 16, 16, 0),
                      primary: false,
                      childAspectRatio: 1.1,
                      shrinkWrap: true,
                      crossAxisSpacing: 0,
                      mainAxisSpacing: 0,
                      crossAxisCount: 4,
                      // mainAxisCount:2,
                      //scrollDirection: Axis.horizontal,
                      children: List.generate(categoryData.length, (index) {
                        return GestureDetector(
                            onTap: () {
                              Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                      builder: (context) => ProductCategoryPage(
                                          categoryId: categoryData[index].id,
                                          categoryName:
                                              categoryData[index].name)));
                            },
                            child: Column(children: [
                              buildCacheNetworkImage(
                                  width: 40,
                                  height: 40,
                                  url: categoryData[index].image,
                                  plColor: Colors.transparent),
                              Flexible(
                                child: Container(
                                  margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
                                  child: Text(
                                    categoryData[index].name,
                                    style: TextStyle(
                                      color: CHARCOAL,
                                      fontWeight: FontWeight.normal,
                                      fontSize: 12,
                                    ),
                                    textAlign: TextAlign.center,
                                  ),
                                ),
                              )
                            ]));
                      }),
                    ),
)

Grid view with slider flutter

1 Answers1