Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter Grid view is not scrolling

I am adding a header in the grid view. The header is scrolling but when touching grid view. It is not scrolling. I want to scroll header and gridview. I have used SingleChildScrollView and Expanded. How to solve the please help me.

My code is shown below

Widget ItemGridview() {
    return Container(
        color: Colors.white,
    padding: EdgeInsets.all(10),
    child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
            new Expanded(
            child: SingleChildScrollView(
            child: Column(
                children: <Widget>[
                new Text(
            'Items of products',
            style: TextStyle(fontWeight: FontWeight.w700, fontSize: 18.0),
            textAlign: TextAlign.left,
        ),
                GridView.count(
            shrinkWrap: true,
            primary: true,
            padding: EdgeInsets.only(top:15.0),
            crossAxisCount: 3,
            childAspectRatio: 0.60, //1.0
            mainAxisSpacing: 0.2, //1.0
            crossAxisSpacing: 4.0, //1.0
            children: createCategoryList(),
            ),
                ],
            ),
            )
        )
        ]
    ),
    );
}

In my code Items of products is the header.

List<Widget> createCategoryList() {

  List<Widget> createCategoryList = List<Widget>();

  for (int i = 0; i < documents.length; i++) {
    createCategoryList
        .add(makeGridCell(documents[i].data['title'], "name", 8,documents[i].data['id']));
  }
  return createCategoryList;
}

  Container makeGridCell(String name, String image, int count, String id) {
  return Container(

      child: new GestureDetector(
        onTap: () {
        },
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisSize: MainAxisSize.min,
          verticalDirection: VerticalDirection.down,
          children: <Widget>[
            new Container(
              child: Image.asset('assets/' + image + ".jpg"),

            ),
            new Container(
              color: Colors.white,
              padding: EdgeInsets.only(left: 5),
              child: new Text(name,
                  style: TextStyle(
                      fontWeight: FontWeight.w500, fontSize: 18.0)), 
            ),

          ],
        ),
      ));
}

The createCategoryList() is the list of items in grid written in widget.

like image 984
Joe Avatar asked Dec 11 '18 04:12

Joe


People also ask

How do you make the GridView scrollable in Flutter?

Add this line inside your GridView to allow scrolling physics: ScrollPhysics(), Add this line inside your GridView to disable scrolling physics: NeverScrollableScrollPhysics(), Through many examples, we learned how to resolve the Gridview Not Scrolling Flutter problem.

Is Row scrollable in Flutter?

How do I add a scroll bar in Flutter? By default, scrollable widgets in Flutter don't show a scrollbar. To add a scrollbar to a ScrollView, wrap the scroll view widget in a Scrollbar widget. Using this widget we can scroll a widget.

How do I scroll GridView horizontally in Flutter?

You may want to change the scroll direction when the GridView is displayed in landscape mode. Setting scrollDirection to Axis. horizontal will do just that.


1 Answers

I had similar widget tree like you a gridview.count() wrapped in SingleChildScrollView adding

physics: ScrollPhysics(),

to GridView.count() Widget Solved my problem

source:https://github.com/flutter/flutter/issues/19205

like image 189
Mahesh Jamdade Avatar answered Oct 12 '22 07:10

Mahesh Jamdade