A RenderFlex overflowed by 58 pixels on the bottom: Error in List Tile flutter-CodePudding

I am trying to make tiles inside a card, to display product information. I am showing the image of the product in the leading: part of the list tile and the quantity in the trailing: part of the tile. The problem is that the leading and the trailing part are not taking the complete height of the list tile and the trailing part (consisting of a column) is causing the error.

======== Exception caught by rendering library =====================================================
The following assertion was thrown during layout:
A RenderFlex overflowed by 58 pixels on the bottom.

The relevant error-causing widget was: 
  Column Column:file:///D:/e_shoppie/lib/data_components/cart_products.dart:126:19
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Here is my code-

Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        leading: Image.asset(
          '$cart_product_picture',
          fit: BoxFit.cover,
          // height: 80,
          // width: 80,
        ),
        title: Container(
          child: Text(
            cart_product_name,
            style: TextStyle(
              color: Colors.black,
              fontWeight: FontWeight.w800,
              fontSize: 20,
            ),
          ),
        ),
        subtitle: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Padding(
                  padding: EdgeInsets.fromLTRB(0.0, 4, 4, 4),
                  child: Text('Size: '),
                ),
                Padding(
                  padding: EdgeInsets.all(4.0),
                  child: Text('$cart_product_size'),
                ),
                Padding(
                  padding: EdgeInsets.fromLTRB(20.0, 8, 4, 4),
                  child: Text('Product Color:'),
                ),
                Padding(
                  padding: EdgeInsets.all(4.0),
                  child: Text('$cart_product_color'),
                ),
              ],
            ),
            Container(
              alignment: Alignment.topLeft,
              child: Text('$cart_product_price'),
            ),
          ],
        ),
        trailing: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            IconButton(
              onPressed: () {},
              icon: Icon(Icons.arrow_drop_up),
            ),
            Text('$cart_product_quantity'),
            IconButton(
              onPressed: () {},
              icon: Icon(Icons.arrow_drop_up),
            ),
          ],
        ),
      ),
    );
  }

Here is an image for reference List Tile

CodePudding user response：

remove what is trailing and change the subtitle for this

               subtitle: Column(
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              Padding(
                                padding: EdgeInsets.fromLTRB(0.0, 4, 4, 4),
                                child: Text('Size: '),
                              ),
                              Padding(
                                padding: EdgeInsets.all(4.0),
                                child: Text('cart_product_size'),
                              ),
                              Padding(
                                padding: EdgeInsets.fromLTRB(20.0, 8, 4, 4),
                                child: Text('Product Color:'),
                              ),
                              Padding(
                                padding: EdgeInsets.all(4.0),
                                child: Text('cart_product_color'),
                              ),
                              Expanded(child: Container()),
                              Column(
                                children: [
                                  IconButton(
                                    onPressed: () {},
                                    icon: Icon(Icons.arrow_drop_up),
                                  ),
                                  Text('cart_product_quantity'),
                                  IconButton(
                                    onPressed: () {},
                                    icon: Icon(Icons.arrow_drop_down),
                                  ),
                                ],
                              )
                            ],
                          ),
                          Container(
                            alignment: Alignment.topLeft,
                            child: Text('cart_product_price'),
                          ),
                        ],
                      ),

CodePudding user response：

I think you can use snippet while ListTile's trailing getting heavy for this

Card(
  child: Row(
    children: [
      Image.asset(
        '$cart_product_picture',
        fit: BoxFit.cover,
        height: 80,
        width: 80,
      ),
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "Black dress",
              style: TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.w800,
                fontSize: 20,
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Padding(
                  padding: EdgeInsets.fromLTRB(0.0, 4, 4, 4),
                  child: Text('Size: '),
                ),
                Padding(
                  padding: EdgeInsets.all(4.0),
                  child: Text('$cart_product_size'),
                ),
                Padding(
                  padding: EdgeInsets.fromLTRB(20.0, 8, 4, 4),
                  child: Text('Product Color:'),
                ),
                Padding(
                  padding: EdgeInsets.all(4.0),
                  child: Text('$cart_product_color'),
                ),
              ],
            ),
            Container(
              alignment: Alignment.topLeft,
              child: Text('$cart_product_price'),
            ),
          ],
        ),
      ),
      Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            IconButton(
              onPressed: () {},
              icon: Icon(Icons.arrow_drop_up),
            ),
            Text('cart_product_quantity'),
            IconButton(
              onPressed: () {},
              icon: Icon(Icons.arrow_drop_up),
            ),
          ],
        ),
      )
    ],
  ),
);