Bottom overflowed inside column while listing with Grid.count
1,705
Finally found solution from this post Give a height to the child of GridView
Just need to write this line of code inside GridView.count
childAspectRatio: MediaQuery.of(context).size.width /
(MediaQuery.of(context).size.height / 4),
Author by
Rock
Updated on December 21, 2022Comments
-
Rock over 1 year
I have problem with column, inside Column i have 3 containers. 1st one has picture inside other two has text. For the first container i want to apply height like 100 for example. but max what can i apply is 60 then it giving bottom overflowed. I am using Grid.count to make grid view and listing them with List.genarate. PS: Wrapping with expanded effecting first container height, and the container does not have fixed height Here is my code :
Column( mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Container( height: 90, decoration: BoxDecoration( color: Theme.of(context).primaryColor, borderRadius: BorderRadius.all(Radius.circular(10)), boxShadow: [ BoxShadow( color: Theme.of(context).focusColor.withOpacity(0.9), blurRadius: 4, offset: Offset(0, 2)), ], ), width: 90, child: Hero( tag: widget.heroTag + widget.product.id, child: Padding( padding: const EdgeInsets.all(6.0), child: CachedNetworkImage( height: 90, fit: BoxFit.fill, imageUrl: this.widget.product.imageUrl, placeholder: (context, url) => Image.asset( 'assets/img/loading.gif', fit: BoxFit.cover, height: 150, ), errorWidget: (context, url, error) => Icon(Icons.error), ), ), ), ), Center( child: Container( width: 90, child: Text( widget.product.name, textAlign: TextAlign.center, style: TextStyle(fontSize: 11, fontWeight: FontWeight.bold), overflow: TextOverflow.ellipsis, maxLines: 2, ), ), ), Center( child: Container( child: Text( " ${widget.product.salePrice.toString()} Ft ", style: TextStyle( color: Colors.blue[800], fontSize: 13, fontWeight: FontWeight.bold), overflow: TextOverflow.ellipsis, ), ), ) ], ),
Here i am listing them with grid.count and list.genearte :
GridView.count( scrollDirection: Axis.vertical, shrinkWrap: true, primary: false, mainAxisSpacing: 15.0, // crossAxisSpacing: 4.0, padding: EdgeInsets.symmetric( vertical: 15), crossAxisCount: MediaQuery.of(context) .orientation == Orientation.portrait ? 3 : 3, children: List.generate( _con.subCategories .elementAt(0) .products .length, (index) { return ProductGridItemWidget( heroTag: 'product-grid' + 0.toString() + index.toString(), product: _con.subCategories .elementAt(0) .products .elementAt(index), onPressed: () { { _con.addToCart(_con .subCategories .elementAt(0) .products .elementAt(index)); } }); }), )),