Trailing widget consumes entire tile width. Please use a sized widget, or consider replacing ListTile with a custom widget

Question

I am making a basic shopping app .My idea is to make a list tile of my products so that I could edit or delete the products . So when i navigated to that page it showed a blank white page with the error as shown in the picture Blank Screen Error

import 'package:flutter/material.dart';

class UserProductItem extends StatelessWidget {
  final String title;
  final String imageUrl;
  UserProductItem(this.title, this.imageUrl);

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(title),
      leading: CircleAvatar(
        backgroundImage: NetworkImage(imageUrl),
      ),
      trailing: Row(
        children: [
          IconButton(
            icon: Icon(Icons.edit),
            onPressed: () {},
            color: Theme.of(context).primaryColor,
          ),
          IconButton(
            icon: Icon(Icons.delete),
            onPressed: () {},
            color: Theme.of(context).errorColor,
          )
        ],
      ),
    );
  }
}

Answer 1

I had this issue as well and was able to fix it by setting mainAxisSize to MainAxisSize.min in the Row:

trailing: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      IconButton(
        icon: Icon(Icons.edit),
        onPressed: () {},
        color: Theme.of(context).primaryColor,
      ),
      IconButton(
        icon: Icon(Icons.delete),
        onPressed: () {},
        color: Theme.of(context).errorColor,
      )
    ],
  ),

Answer 2

Wrapping trailing with a Container may give you some kind of warnings, so the best option is to wrap it with SizedBox and give it a height and width

trailing: SizedBox(
              height: 100, width: 100, child: Image.network(item.imgurl)),