Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – widget is overflowing under consumer widget


import 'package:cleamba/Data/Products.dart';
import 'package:cleamba/Listners/Fav_listener.dart';
import 'package:cleamba/Pool.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:provider/provider.dart';

class Productfilerpage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return productfilterpagestate();
  }
}

class productfilterpagestate extends State<Productfilerpage> {
  List<String> suma = ['asdasd', 'asfdfasas', 'asffrwe', 'wqqqxs', 'asdwqsa'];
  @override
  Widget build(BuildContext context) {
    List<Products> products_list = [];

    for (int i = 0; i < 30; i++) {
      products_list.add(Products(
          name: 'Vaylirk makie vases',
          price: 12.1223,
          productID: 100 + i,
          imageurl: 'sd',
          description: 'sads',
          category: 'Vases'));
    }
    return Scaffold(
      appBar: AppBar(
          backgroundColor: Pool.primarycolor,
          title: Container(
            child: Row(
              children: [
                Expanded(
                  flex: 1,
                  child: Autocomplete(
                    optionsBuilder: (TextEditingValue textEditingValue) {
                      return suma.where((element) => element
                          .contains(textEditingValue.text.toLowerCase()));
                    },
                    fieldViewBuilder: (context, textEditingController,
                            focusNode, onFieldSubmitted) =>
                        TextFormField(
                      controller: textEditingController,
                      focusNode: focusNode,
                      decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: "Search...",
                        hintStyle: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                ),
                IconButton(onPressed: () {}, icon: Icon(Icons.filter_list)),
                IconButton(onPressed: () {}, icon: Icon(Icons.tune)),
                IconButton(onPressed: () {}, icon: Icon(Icons.shopping_cart))
              ],
            ),
          )),
      body: GridView.builder(
          padding: EdgeInsets.all(10),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            mainAxisExtent: 200,
          ),
          itemCount: products_list.length,
          itemBuilder: (context, index) {
            return Card(
              child: Column(
                children: [
                  Image.network(
                      'https://images.unsplash.com/photo-1542234161-b0394bb94542?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Row(
                      children: [
                        Expanded(
                          flex: 2,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                products_list[index].name!,
                                maxLines: 1,
                                style: TextStyle(
                                    fontSize: 13, fontWeight: FontWeight.bold),
                              ),
                              Text(
                                maxLines: 1,
                                style: TextStyle(fontSize: 13),
                                products_list[index].category!,
                                overflow: TextOverflow.fade,
                              ),
                              Text(
                                maxLines: 1,
                                '₹ ' + products_list[index].price.toString(),
                                overflow: TextOverflow.fade,
                                style: TextStyle(
                                    fontSize: 13, fontWeight: FontWeight.bold),
                              ),
                            ],
                          ),
                        ),
                        Expanded(
                            flex: 1,
                            child: Center(
                              child: IconButton(
                                icon: Icon(Icons.favorite),
                                onPressed: () {
                                  Provider.of<Fav_Listener>(context,
                                          listen: false)
                                      .add_favorites(products_list[index]);
                                },
                              ),
                            )),
                      ],
                    ),
                  )
                ],
              ),
            );
          }),
    );
  }
}

Error : Bottom overflowed by 999362 pixles

Actually Iam trying to render an gridview . My grid view item have one Button which surrounded by Consumer widget .So that it can change its color according to the app state (that’s a favourite toogle button). if i remove the consumer widget everything looks fine as expected . But When in run it with consumer widget wrapped error has been thrown.

This is resulted
This is expected

Tags:

2

Answers


  1. 0

    try this:

      body: GridView.builder(
      padding: const EdgeInsets.all(10),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        mainAxisExtent: 250, //adjust mainAxisExtent to 250
      ),
    ... //rest of your code
    Login or Signup to reply.
  2. 0 
    GridView.builder(
      padding: EdgeInsets.all(10),
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        mainAxisExtent: 200,
      ),
      itemCount: products_list.length,
      itemBuilder: (context, index) {
        return Card(
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
          child: Column(
            children: [
              Expanded(
                flex: 6,
                child: Row(
                  children: [
                    Expanded(
                        child: ClipRRect(
                          borderRadius: BorderRadius.only(topRight:Radius.circular(10),topLeft:Radius.circular(10)),
                          child: Image.network(
                            fit: BoxFit.fill,
                              'https://images.unsplash.com/photo-1542234161-b0394bb94542?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'),
                        ),

                    ),
                  ],
                ),
              ),
              Expanded(
                flex: 4,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Row(
                    children: [
                      Expanded(
                        flex: 2,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              products_list[index].name!,
                              maxLines: 1,
                              style: TextStyle(
                                  fontSize: 13, fontWeight: FontWeight.bold,),
                            ),
                            Text(
                              maxLines: 1,
                              style: TextStyle(fontSize: 13,),
                              products_list[index].category!,
                              overflow: TextOverflow.fade,
                            ),
                            Text(
                              maxLines: 1,
                              '₹ ' + products_list[index].price.toString(),
                              overflow: TextOverflow.fade,
                              style: TextStyle(
                                  fontSize: 13, fontWeight: FontWeight.bold),
                            ),
                          ],
                        ),
                      ),
                      Expanded(
                          flex: 1,
                          child: Center(
                            child: IconButton(
                              icon: Icon(Icons.favorite),
                              onPressed: () {

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

    The Unbounded height or the single children is occuping more space is the issue, provided height for the childrens of the Column (First Column of the Card Widget) using Expanded Widget. Expanded widgets shares the available space equally so i used it for providing height and width

    Dont Know why you have created the list inside Widget Builder, instead created it inside the initstate

      void initState() {
// TODO: implement initState
super.initState();
gridItems();

gridItems(){
for (int i = 0; i < 30; i++) {
  products_list.add(Products(
      name: 'Vaylirk makie vases',
      price: 12.1223,
      productID: 100 + i,
      imageurl: 'sd',
      description: 'sads',
      category: 'Vases'));
}

    }

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search