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

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)),

Answer 2

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 3

What I did was I wrapped the row (trailing: Row()) with a container and gave it a specific width

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 InkWell(
      child: ListTile(
        title: Text(title),
        leading: CircleAvatar(
          backgroundImage: NetworkImage(imageUrl),
        ),
        trailing: Container(
          width: 100,
          child: 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 4

From the docs about the tailing property:

/// To show right-aligned metadata (assuming left-to-right reading order;
/// left-aligned for right-to-left reading order), consider using a [Row] with
/// [CrossAxisAlignment.baseline] alignment whose first item is [Expanded] and
/// whose second child is the metadata text, instead of using the [trailing]
/// property.

I believe you should not be using a ListTile if you need to have 2 icons on the right. Instead, you should implement your custom widget with Rows.

EDIT:

Something like:

InkWell( // Only wrap with an Inkwell if you need to add a click for the entire Row
  onTap: ...
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.baseline,
    children: [
      CircleAvatar(...),
      Expanded(child: Text(title)),
      Row(
        children: [
          IconButton1,
          IconButton2,
        ],
      ),
    ]
  ),
)

Answer 5

The error occuring because of leading. Just wrap the image avatar with a container and give it a width

leading: Container(width:50, child: CircleAvatar( backgroundImage: NetworkImage(imageUrl), ),)

Answer 6

Wrap your answer in a FittedBox like so

      trailing: FittedBox(
    child: Row(
      children: [
        IconButton(
          onPressed: () {},
          icon: Icon(Icons.edit),
          color: Theme.of(context).colorScheme.primary,
        ),
        IconButton(
          onPressed: () {},
          icon: Icon(Icons.delete),
          color: Theme.of(context).errorColor,
        ),
      ],
    ),
  ),

You should discover that the Row have unlimited width. Therefore you need to fit it into the available size of a given device.