CODEWITHSUNDEEP
flutterwebflutter-layoutflutter-web
Sondre Sørbye
Sondre Sørbye

Reputation: 549

Flutter web scrollview with mouse outside of listview

I have a GridView that I want to make scrollable even when the mouse is outside of the GridView. I have tried to add the GridView inside a SingleChildScrollView and added shrinkWrap: true to the GridView. I have also tried adding a Column around the GridView and Expanded as well. Here is the code:

return SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  constraints: BoxConstraints(maxWidth: 750),
                  child: GridView.builder(
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                    padding:
                        EdgeInsets.symmetric(horizontal: 30, vertical: 10),
                    itemCount: course.subjects.length,
                    itemBuilder: (context, idx) {
                      return CourseSubjectListEl(course, idx, data);
                    },
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisSpacing: 10,
                        childAspectRatio: 0.7,
                        mainAxisSpacing: 0,
                        crossAxisCount: 2),
                  ),
                ),
              ],
            ),
          );

enter image description here

As you can see on the screenshot, you can only scroll when the mouse is over the GridView. I think this problem can cause confusion for web users, where you normally can scroll with the mouse everywhere.

Upvotes: 2

Views: 619

Answers (1)

immadisairaj
immadisairaj

Reputation: 656

You can add

primary: false,

Property inside GridView. That will make the GridView scroll physics false and will act on how the parent scrolls (which in case is your SingleChildScrollView).

Probably you might want to remove physics: NeverScrollableScrollPhysics(), and add the above property.

Note: Make sure your scrollview contains the whole width of the screen you want to scroll

Upvotes: 1

Related Questions