Flutter GridView is not scrolling

Question

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.

The createCategoryList is the list of items want to add in grid view. It is added in code. — Joe, Dec 11 '18 at 05:13

Mahesh Jamdade · Answer 1 · 2021-11-26T11:38:54.883

79

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

edited Nov 26 '21 at 11:38

answered Mar 03 '19 at 10:51

Mahesh Jamdade

17,235
8
110
131

1

I had the same problem, but it doesn't work for me. Any recommendations? – benicamera Oct 24 '20 at 18:09
Its basically how you have placed your widgets is causing the issue, – Mahesh Jamdade Oct 25 '20 at 03:24
and how can i improve my placement? I'm new to flutter, so I'm not very experienced – benicamera Oct 26 '20 at 09:58
You will learn it with time its just that you need to understand the fundamental widgets and those Will help you build the complex ones – Mahesh Jamdade Nov 13 '20 at 16:57

score 11 · Answer 2 · answered Jun 27 '20 at 02:40

11

Add physics: ScrollPhysics() property to Gridview. it iwll scroll.

answered Jun 27 '20 at 02:40

saigopi.me

14,011
2
83
54

This answer helped me. Thanks @Sai Gopi Me – Kennedy Owusu Sep 30 '20 at 03:50

score 8 · Answer 3 · answered Apr 25 '21 at 20:21

just add some property in GridView

  Widget _buildFields(BuildContext context) {
return Container(
    color: Colors.white,
    child: GridView.count(
      crossAxisCount: 2,
      crossAxisSpacing: 2.0,
      mainAxisSpacing: 2.0,
      shrinkWrap: true,
      scrollDirection: Axis.vertical,
      physics: NeverScrollableScrollPhysics(),
      children: List.generate(choices.length, (index) {
        return Center(
          child: new Column(
            children: [
              new Expanded(
                child: SelectCard(choice: choices[index]),//your card wight
              ),
            ],
          ),
        );
      }),
    ));
}

and use like this

class _Dashboard extends State<Dashboard> {
  @override
  Widget build(BuildContext context) {
    return OrientationBuilder(builder: (context, orientation) {
      return ListView(
        children: <Widget>[
          Container(
            height: 200,
            child: Image.network(
                "https://www.gizbot.com/img/2013/11/23-weekend-deals-top-10-latest-smartphones.jpg"),
          ),
          _buildFields(context),
        ],
      );
    });
  }
}

already added "physics: NeverScrollableScrollPhysics()," but still not working, scrollListener is not being called on scroll screen event. — Kamlesh, May 31 '21 at 09:30

score 4 · Accepted Answer · answered Dec 11 '18 at 05:28

You have some issues related to the Scroll of your widgets, you can reduce the amount of Widgets using Wrap, like this :

    Container(
            color: Colors.white,
            padding: EdgeInsets.all(10),
            child: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new Text(
                    'Items of products',
                    style: TextStyle(fontWeight: FontWeight.w700, fontSize: 18.0),
                    textAlign: TextAlign.left,
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 15.0),
                    child: Wrap(
                      spacing: 20.0,
                      alignment: WrapAlignment.spaceEvenly,
                      children:createCategoryList(),
                ),
                    ],
                ),
                )
            )
            ]
        ),
        );

Add a constraint width or a fixed with to the widget of your item:

    return Container(
          constraints:
                BoxConstraints(maxWidth: MediaQuery.of(context).size.width / 4),
          child: new GestureDetector(

I find the `physics: ScrollPhysics()` solution as written by @maheshmnj to be easy and quick. — Roopak A Nelliat, Dec 04 '19 at 07:04

score 4 · Answer 5 · edited Jul 10 '20 at 15:34

4

I think you need to use some custom scroll view

CustomScrollView(
  primary: false,
  slivers: <Widget>[
    SliverPadding(
      padding: const EdgeInsets.all(20.0),
      sliver: SliverGrid.count(
        crossAxisSpacing: 10.0,
        crossAxisCount: 2,
        children: <Widget>[
          const Text('He\'d have you all unravel at the'),
          const Text('Heed not the rabble'),
          const Text('Sound of screams but the'),
          const Text('Who scream'),
          const Text('Revolution is coming...'),
          const Text('Revolution, they...'),
        ],
      ),
    ),
  ],
)

edited Jul 10 '20 at 15:34

Mahesh

974
6
12

answered Dec 11 '18 at 05:33

Sagar Bandamwar

227
2
12

1

I tried the above answer then I got the result. Thank u for ur help. – Joe Dec 11 '18 at 05:47
My pleasure @Joe – Sagar Bandamwar Dec 19 '18 at 09:10

score 4 · Answer 6 · answered Dec 11 '20 at 20:10

4

Just ran into this myself, change your primary parameter for the GridView to false, give that a try.

answered Dec 11 '20 at 20:10

Hank

1,658
12
13

score 0 · Answer 7 · answered Jan 16 '23 at 07:14

In Gridview.builder scrolling is not working for smaller resolutions like tablet mode,mobile mode then just wrap the Gridview.builder under the listview.builder widget.

SizedBox(
                  width: screenSize.width,
                  height: screenSize.height * entry.contentHeightFactor,
                  child: ListView.builder(
                    itemCount: 1,
                    itemBuilder: (context, index) {
                      return Card(
                        child: Container(
                          width: screenSize.width * 0.8,
                          height: screenSize.height * 0.72,
                          padding: const EdgeInsets.all(10),
                          child: GridView.builder(
                            scrollDirection: Axis.vertical,
                            gridDelegate:
                                const SliverGridDelegateWithFixedCrossAxisCount(
                              crossAxisCount: 3,
                            ),
                            padding: const EdgeInsets.all(5),
                            itemCount: 30,
                            itemBuilder: (BuildContext context, int index) {
                              return Padding(
                                padding: const EdgeInsets.all(8.0),
                                child:Card(....),
                              );
                            },
                          ),
                        ),
                      );
                    },
                  ),
                ),

Flutter GridView is not scrolling

7 Answers7