CODEWITHSUNDEEP
flutterflutter-layoutflutter-web
Raine Dale Holgado
Raine Dale Holgado

Reputation: 3460

Flutter Gridview scrolling horizontal

I'm working on flutter web and I want my gridview scroll direction horizontal but when I added scrolldirection: Axix.horizontal it rotated the gridview. I know to make this easy I can use ListView but it takes too much code to make it responsive on the web. I just want the gridView itself to manage its crossAxisCount by screen width to become responsive. So I need help on how to make GridView scroll direction horizontal. Thanks

 int gridCrossAxisCount;
    if (size > 1600) {
      gridCrossAxisCount = 4;
    } else if (size > 1300) {
      gridCrossAxisCount = 3;
    } else if (size > 800) {
      gridCrossAxisCount = 2;
    } else {
      gridCrossAxisCount = 1;
    }

Container(
        width: double.infinity,
        height: 300,
        child: GridView.count(
          // scrollDirection: Axis.horizontal,
          physics: ScrollPhysics(),
          shrinkWrap: true,
          primary: true,
          padding: EdgeInsets.only(top: 15.0),
          crossAxisCount: gridCrossAxisCount, //Screensize grid count
          childAspectRatio: 0.60, //1.0
          mainAxisSpacing: 0.2, //1.0
          crossAxisSpacing: 4.0, //1.0
          children: [
            Container(
              height: 200,
              width: 200,
              color: Colors.green,
            ),
            Container(
              height: 200,
              width: 200,
              color: Colors.red,
            ),
            Container(
              height: 200,
              width: 200,
              color: Colors.orange,
            ),
            Container(
              height: 200,
              width: 200,
              color: Colors.indigo,
            ),
          ],
        ),
      ),

Upvotes: 4

Views: 7693

Answers (1)

Bach
Bach

Reputation: 3326

Can you include the screenshot when the GridView rotate?

I think your code works fine with Axis.horizontal on. The problem might lie in the logic when calculating gridCrossAxisCount/ number of child items.

When Axis.horizontal is on, the mainAxis will now be horizontal and the crossAxis will be vertical.

Thus if the axisCount is 1, then all items will be display in 1 line only, but if it's 4, they will be display in 4 lines, which with 4 children in your example is not enough to cause overflow outside of Viewport and enable scrolling.

Upvotes: 4

Related Questions