Flutter Gridview in Column. What's solution..?

I have a problem with gridview and column. In this case, i want put an image in upper of gridview. Please give me a solution..

return new Container(
  child: new Column(
    children: <Widget>[
      new Container(
        child: new Image.asset(
          "assets/promo.png",
          fit: BoxFit.cover,
        ),
      ),
      new Container(
        child: new GridView.count(
          crossAxisCount: 2,
          childAspectRatio: (itemWidth / itemHeight),
          controller: new ScrollController(keepScrollOffset: false),
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          children: new List<Widget>.generate(16, (index) {
            return new GridTile(
                header: new Container(
                  padding: const EdgeInsets.all(10.0),
                  alignment: Alignment.centerRight,
                  child: new Icon(
                    Icons.shopping_cart,
                    size: 20.0,
                    color: Colors.red,
                  ),
                ),
                child: new MyList(
                  nomor: '$index',
                ));
          }),
        ),
      ),
    ],
  ),
);

and this is the result: Flutter Gridview in Column

You just need to put your grid view into 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")
  ],
),

Reason for the error:

Column expands to the maximum size in main axis direction (vertical axis), and 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 Column, there are several ways of solving this issue, use whichever suits you better.

---

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

    Column(
      children: <Widget>[
        Flexible(
          child: GridView(...),
        )
      ],
    )
   

---

2. If you want to limit your GridView to certain height, you can use SizedBox.

    Column(
      children: <Widget>[
        SizedBox(
          height: 200, // constrain height
          child: GridView(...),
        )
      ],
    )
   

---

3. If your GridView is small, you may try shrinkWrap property on it.

    Column(
      children: <Widget>[
        GridView(
          shrinkWrap: true, // use it
        )
      ],
    )
   

If Column is the parent of GridView then it will give rendering issue as It happens because Column and GridView both take the entire space of the screen individually which is there default behavior(Default axis of scrolling is Vertical).

Solution:

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 scrolling functionality of GridView, which means now we have only SingleChildScrollView who provide the scrolling functionality.

Code:

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

The answer mentioned by @RuslanLeshchenko is correct but if it is still not working for you, trying the following properties on GridView

1. Try changing shrinkwrap to true
2. Apply physics: BouncingScrollPhysics()

Just wrap with scaffold and scrollview

Scaffold(
  resizeToAvoidBottomInset: true,
  body: SingleChildScrollView(
    child: Column(
            children: [ 
          ...

Tested working on dialog model aswell.

Inside your Gridview make sure to add this 2 properties.

physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,

I had the same problem and couldn't fix. Then again I used a GridView.builder().

I changed it to GridView.count and added shrinkWrap: true and physics: NeverScrollableScrollPhysics() as mentioned in the other comments.

It works fine now. Thanks!

Try changing childAspectRatio property of GridView to 0.8 or lower.

body:Container(
   body: Container(
          child: Column(
            children: [
              Text('Exemple'),
              Expanded(
                child: GridView.count(
                    children: <Widget>[
                          //Widgets
                    ]
               )
             )
           ]
         )
       ) 

Just wrap GridView inside ListView

Column(
    children: <Widget>[
        ListView(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            children: [
                GridView(
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                ),
            ],
        ),
)

Also it works with SingleChildScrollView

SingleChildScrollView(
    child: Column(
        children: <Widget>[
            ListView(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                children: [
                    GridView(
                        shrinkWrap: true,
                        physics: NeverScrollableScrollPhysics(),
                    ),
                ],
            ),
    )
)

Works like a charm (: