Row RenderFlex overflowed by 76 pixels on the right

Question

Below are my code I always got some pixel overflowed on right size. I was playing with Expanded and Fixable widgets as well as mainAxisSize of row and column too.

Look at the code:

Widget productDisplayListView(List<Products> listOfProduct, int index) {
    return Container(
      margin: EdgeInsets.all(7),
      child: Container(
        child: Card(
          elevation: 4,
          child: Container(
            padding: EdgeInsets.all(6),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Container(
                  height: 110,
                  width: 90,
                  child: Image.network(
                    listOfProduct[index].thumbnail ?? '',
                    fit: BoxFit.cover,
                  ),
                ),
                Container(
                  padding: EdgeInsets.all(5),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Row(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Container(
                            padding: EdgeInsets.zero,
                            margin: EdgeInsets.zero,
                            height: 20,
                            width: 20,
                            child: Icon(
                              Icons.crop_square,
                              color: Colors.red,
                              size: 18,
                            ),
                          ),
                          Flexible(
                            child: Text(
                              'The overflowing RenderFlex has an orientation of Axis.horizontal.',
                              overflow: TextOverflow.ellipsis,
                              softWrap: true,
                              style: TextStyle(
                                  fontSize: 13,
                                  fontWeight: FontWeight.w600,
                                  color: Theme.of(context).primaryColor),
                            ),
                          )
                        ],
                      ),
                      SizedBox(height: 5),
                      Text(
                        'The overflowing RenderFlex has an orientation of Axis.horizontal.',
                        maxLines: 1,
                        style: TextStyle(
                            fontSize: 12,
                            fontWeight: FontWeight.w500,
                            color: Colors.grey),
                      ),
                      SizedBox(height: 5),
                      Text(
                        '₹${listOfProduct[index].price ?? ''}',
                        style: TextStyle(
                            fontSize: 13,
                            fontWeight: FontWeight.w700,
                            color: Colors.black),
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

I tried with many Que./Ans. on stackOverFlow but But didn't get success.

Answer 1

Updated Code with Fixed Overflow Error. Have to made quite a change in your Widget Tree.

Widget productDisplayListView() {
return Card(
  elevation: 4,
  child: Container(
    padding: EdgeInsets.all(6),
    child: Row(
      children: <Widget>[
        Container(
          height: 110,
          width: 90,
          child: Image.network(
            'https://placeimg.com/250/250/any',
            fit: BoxFit.cover,
          ),
        ),
        SizedBox(
          width: 5.0,
        ),
        Flexible(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              MergeSemantics(
                child: Row(
                  children: <Widget>[
                    Icon(
                      Icons.crop_square,
                      color: Colors.red,
                      size: 18,
                    ),
                    Flexible(
                      child: Text(
                        'The overflowing RenderFlex has an orientation of Axis.horizontal.',
                        overflow: TextOverflow.ellipsis,
                        softWrap: true,
                        style: TextStyle(
                            fontSize: 13,
                            fontWeight: FontWeight.w600,
                            color: Theme.of(context).primaryColor),
                      ),
                    )
                  ],
                ),
              ),
              SizedBox(height: 5),
              Text(
                'The overflowing RenderFlex has an orientation of Axis.horizontal.',
                maxLines: 1,
                style: TextStyle(
                    fontSize: 12,
                    fontWeight: FontWeight.w500,
                    color: Colors.grey),
              ),
              SizedBox(height: 5),
              Text(
                '₹ 10,000',
                style: TextStyle(
                    fontSize: 13,
                    fontWeight: FontWeight.w700,
                    color: Colors.black),
              )
            ],
          ),
        )
      ],
    ),
  ),
);
}

OutPut: