Flutter Gridview builder not working with column

Question

Here are my file and the Gridview not working it's showing me an only error...

I am using multiple children for the column and needed to use gridview builder here.

Also, I tried using Stack and removed the column and it worked but in that case, I need to use lots of padding for every section and that worthless.

Widget build(BuildContext context) {
return Scaffold(
    appBar: AppBarComponent(),
    drawer: new Drawer(child: DrawerList()),
    body: Container(
      color: Colors.black12.withOpacity(0.02),
        child: Column(
          children: <Widget>[
            Container(
              child: Row(
                children: <Widget>[
                  Form(
                    key: formKey,
                    child: Container(
                      width: 280.0,
                      height: 40.0,
                      child: TextFormField(
                        onSaved: (val) => keyword = val,
                        validator: this._validateKeyword,
                        decoration: new InputDecoration(
                          hintText: "Search Product",
                          fillColor: Colors.white,
                          filled: true,
                          contentPadding: new EdgeInsets.all(12.0),
                        ),
                      ),
                    ),
                  ),
                  ButtonTheme(

                    minWidth: 6.0,
                    height: 40.0,

                    child: RaisedButton(
                      color: Colors.redAccent.withOpacity(0.9),

                      onPressed: _search,
                      child: Icon(Icons.search,color:Colors.white,size: 26.0),
                    ),
                  ),
                ],
              ),
            ),
            Padding(padding: new EdgeInsets.only(top: 12.0)),
            Container(
              color: Colors.white,
              height: 40.0,
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Icon(Icons.assignment_turned_in,color: Colors.greenAccent,),

                  Padding(
                    padding: const EdgeInsets.only(left: 4.0,right: 8.0),
                    child: Text("SEARCH RESULT",style: TextStyle(fontSize:14.0,fontWeight: FontWeight.w500),),
                  ),
                  Padding(padding: EdgeInsets.only(left: 12.0)),
                  ButtonTheme(
                    height: 24.0,
                    child: RaisedButton(
                      padding: const EdgeInsets.all(6.0),
                      onPressed:()=>print("a"),
                      child: new Row(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.only(right: 6.0),
                            child: Icon(Icons.filter,size: 16.0,),
                          ),
                          Text('FILTER',style: TextStyle(fontSize: 12.0),),
                        ],
                      ),
                    ),
                  ),
                  Padding(padding: EdgeInsets.only(left: 10.0)),
                  ButtonTheme(
                    height: 24.0,
                    child: RaisedButton(
                      onPressed:()=>print("a"),
                      padding: const EdgeInsets.all(6.0),
                      child: new Row(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.only(right: 6.0),
                            child: Text('SORT BY',style: TextStyle(fontSize: 12.0),),
                          ),
                          Icon(Icons.keyboard_arrow_down,size: 16.0,),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),

            Expanded(
                child: new GridView.builder(

                  itemCount: 10,
                  gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
                  itemBuilder: (BuildContext context, int index) {



                    return Container(
                      child: Card(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: <Widget>[
                            Padding(
                              padding: const EdgeInsets.only(top: 8.0),
                              child: Image.asset('images/product-1.png',width: 100.0),
                            ),
                            Container(
                              color: Colors.black12.withOpacity(0.02),
                              height: 55.0,
                              child: Column(
                                children: <Widget>[
                                  Padding(
                                    padding: const EdgeInsets.only(left: 4.0),
                                    child: Container(
                                      child: Text("It is a long established fact that a readerIt is a long established fact that a reader.",
                                          overflow: TextOverflow.ellipsis,
                                          style: TextStyle(fontSize: 14.0)),
                                    ),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.only(top:8.0,left: 4.0),
                                    child: Row(
                                      children: <Widget>[
                                        Text("\$57 ",style: TextStyle(fontSize:12.0,color: Colors.red,fontWeight: FontWeight.bold),),
                                        Text(" \$57",style: TextStyle(fontSize:12.0,decoration: TextDecoration.lineThrough),),
                                        Padding(
                                          padding: const EdgeInsets.only(left: 4.0),
                                          child: ButtonTheme(

                                            minWidth: 8.0,
                                            height: 8.0,

                                            child: RaisedButton(
                                              color: Colors.white.withOpacity(0.9),

                                              onPressed: null,
                                              child: Icon(Icons.shopping_cart,size: 18.0),
                                            ),
                                          ),
                                        ),

                                        Padding(
                                          padding: const EdgeInsets.only(left: 1.0),
                                          child: ButtonTheme(

                                            minWidth: 8.0,
                                            height: 8.0,

                                            child: RaisedButton(
                                              color: Colors.white.withOpacity(0.9),

                                              onPressed: null,
                                              child: Icon(Icons.favorite,size: 18.0),
                                            ),
                                          ),
                                        ),


                                      ],
                                    ),
                                  )
                                ],
                              ),

                            ),



                          ],

                        ),
                      ),
                    );



                  },
                ),
              ),
          ],
        ),
    )
);

}

Answer 1

I've tried your code snippet and the only error that I got was UI overflow errors from the widgets.

One way to solve this issue is by using Expanded widget on the Column's children widget. It'll look something similar to this.

Container(
  child: Column(
    children: <Widget>[
      Expanded(
        child: Text(),
      ),
      Expanded(
        Row(
          children: <Widget>[
            Text(),
            Text(),
            Button(),
            Button(),
          ],
        ),
      ),
    ],
  ),
)

With that added, the ListView items will look like this.