Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bottom overflowed inside column while listing with Grid.count

enter image description here

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));
                                                }
                                              });
                                        }),
                                      )),
like image 988
Rock Avatar asked Jun 13 '20 15:06

Rock


Video Answer


1 Answers

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),
like image 123
Rock Avatar answered Oct 19 '22 06:10

Rock