How to Use Gridview In Column In Flutter ??

· 4 min read
How to Use Gridview In Column In Flutter
How to Use Gridview In Column In Flutter

GridView Widget in the flutter is used to display the data in two-dimensional rows and columns. Users can choose any item by tapping on them So in this article we will go How to Use Gridview In Column In Flutter.

How to Use GridView In Column In Flutter??

Reason for the error:

Column expands to the maximum size in the main axis direction vertical axis.

So does the GridView scroll direction is vertical by default.

Solution

You need to constrain the height of the GridView so that it expands to fill the remaining space inside the Column,

there are several ways of solving this issue, use whichever suits you better.

You just need to put your GridView Widget into the Expanded Widget, for example:

body: new Column(
  children: <Widget>[
    new Expanded(
      child: GridView.count(
        // Create a grid with 2 columns. If you change the scrollDirection to
        // horizontal, this would produce 2 rows.
        crossAxisCount: 2,
        // Generate 100 Widgets that display their index in the List
        children: List.generate(10, (index) {
          return _buildCard(index);
        }),
      ),
    ),
    new Text("text")
  ],
),

Now, If you want to allow GridView to take up all remaining space inside the Column use Flexible.

Column(
  children: <Widget>[
    Flexible(
      child: GridView(...),
    )
  ],
)
    • Let’s say that you want to limit your GridView to a certain height, you can use SizedBox.
      Column(
        children: <Widget>[
          SizedBox(
            height: 200, // constrain height
            child: GridView(...),
          )
        ],
      )
  • If your GridView is small, you may try the shrinkWrap property on it.
Column(
  children: <Widget>[
    GridView(
      shrinkWrap: true, // use it
    )
  ],
)
  • If Column is the parent of GridView then it will give a rendering issue as It happens because Column and GridView both take the entire space of the screen individually which is their default behavior default axis of scrolling is Vertical.
  • To solve the above problem we have to disable scrolling of GridView,
  • This can be possible by shrinkWrap and physics property
  • shrinkWrap: true – With this GridView only occupies the space it needs
  • physics: NeverScrollableScrollPhysics() – It disables the scrolling functionality of GridView, which means now we have only SingleChildScrollView who provide the scrolling functionality.

Code Snippet will look like the below:

SingleChildScrollView
   Column
        GridView(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                //...
                )

Conclusion:

Thanks for being with us on a Flutter Journey !!!

So in this article, we have been through How to Use GridView Widget In Column In Flutter.

Keep Learning !!! Keep Fluttering !!! Stay Connected !!!

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply