Why can't Circle Avatar be identified as leading: within the ListTile?

Question

Currently attempting to debug an error that occurs when items are added to a cart and navigating to the cart where the cart items supposed to be displayed.

Functionality to add items to cart operates. Error only thrown when items added to cart. Build does not crash.

The error lies within the cart item widget. cart_item.dart is nested within cart_screen.dart.

-------------------------------------UPDATE-------------------------------------

I've been able to diagnose this error as being tied specifically to the Circle Avatar widget when identified as leading: within the ListTile. When other widgets (ie Text) are identified as leading: no error occurs. Why can't Circle Avatar be identified as leading: within the ListTile?

Error:

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
[38;5;244mThe following assertion was thrown during performLayout():[39;49m
Leading widget consumes entire tile width. Please use a sized widget, or consider replacing ListTile with a custom widget (see https://api.flutter.dev/flutter/material/ListTile-class.html#material.ListTile.4)
'package:flutter/src/material/list_tile.dart':
Failed assertion: line 1547 pos 7: 'tileWidth != leadingSize.width'


[38;5;248mEither the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=BUG.md
[39;49m

[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mListTile[39;49m
 lib\widgets\cart_item.dart
[38;5;244mWhen the exception was thrown, this was the stack[39;49m
[38;5;244m#2      _RenderListTile.performLayout[39;49m
 package:flutter/…/material/list_tile.dart
[38;5;244m#3      RenderObject.layout[39;49m
 package:flutter/…/rendering/object.dart
[38;5;244m#4      RenderPadding.performLayout[39;49m
 package:flutter/…/rendering/shifted_box.dart
[38;5;244m#5      RenderObject.layout[39;49m
 package:flutter/…/rendering/object.dart
[38;5;244m#6      RenderProxyBoxMixin.performLayout[39;49m
 package:flutter/…/rendering/proxy_box.dart
[38;5;244m...[39;49m
[38;5;244mThe following RenderObject was being processed when the exception was fired: _RenderListTile#414b8 relayoutBoundary=up38 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE[39;49m
[38;5;244mRenderObject: _RenderListTile#414b8 relayoutBoundary=up38 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE[39;49m
    [38;5;244mparentData: offset=Offset(0.0, 0.0) (can use size)[39;49m
    [38;5;244mconstraints: BoxConstraints(w=11.2, 0.0<=h<=Infinity)[39;49m
    [38;5;244msize: MISSING[39;49m
    [38;5;244mleading: RenderConstrainedBox#0efc0 relayoutBoundary=up39 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE[39;49m
        [38;5;244mparentData: offset=Offset(0.0, 0.0) (can use size)[39;49m
        [38;5;244mconstraints: BoxConstraints(0.0<=w<=11.2, 0.0<=h<=56.0)[39;49m
        [38;5;244msize: Size(11.2, 40.0)[39;49m
        [38;5;244madditionalConstraints: BoxConstraints(w=40.0, h=40.0)[39;49m
        [38;5;244mchild: RenderDecoratedBox#c9777 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE[39;49m
            [38;5;244mparentData: <none> (can use size)[39;49m
            [38;5;244mconstraints: BoxConstraints(w=11.2, h=40.0)[39;49m
            [38;5;244msize: Size(11.2, 40.0)[39;49m
            [38;5;244mdecoration: BoxDecoration[39;49m
                [38;5;244mcolor: Color(0xff1976d2)[39;49m
                [38;5;244mshape: circle[39;49m
            [38;5;244mconfiguration: ImageConfiguration(bundle: PlatformAssetBundle#ed2ae(), devicePixelRatio: 3.5, locale: en_US, textDirection: TextDirection.ltr, platform: android)[39;49m
            [38;5;244mchild: RenderPositionedBox#1179f NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE[39;49m
                [38;5;244mparentData: <none> (can use size)[39;49m
                [38;5;244mconstraints: BoxConstraints(w=11.2, h=40.0)[39;49m
                [38;5;244msize: Size(11.2, 40.0)[39;49m
                [38;5;244malignment: center[39;49m
                [38;5;244mtextDirection: ltr[39;49m
                [38;5;244mwidthFactor: expand[39;49m
                [38;5;244mheightFactor: expand[39;49m
                [38;5;244mchild: RenderParagraph#1a8e3 relayoutBoundary=up1 NEEDS-PAINT[39;49m
                    [38;5;244mparentData: offset=Offset(0.1, 0.0) (can use size)[39;49m
                    [38;5;244mconstraints: BoxConstraints(0.0<=w<=11.2, 0.0<=h<=40.0)[39;49m
                    [38;5;244msize: Size(11.0, 40.0)[39;49m
                    [38;5;244mtextAlign: start[39;49m
                    [38;5;244mtextDirection: ltr[39;49m
                    [38;5;244msoftWrap: wrapping at box width[39;49m
                    [38;5;244moverflow: clip[39;49m
                    [38;5;244mlocale: en_US[39;49m
                    [38;5;244mmaxLines: unlimited[39;49m
    [38;5;244mtitle: RenderParagraph#8f830 NEEDS-LAYOUT NEEDS-PAINT[39;49m
        [38;5;244mparentData: offset=Offset(0.0, 0.0)[39;49m
        [38;5;244mconstraints: MISSING[39;49m
        [38;5;244msize: MISSING[39;49m
        [38;5;244mtextAlign: start[39;49m
        [38;5;244mtextDirection: ltr[39;49m
        [38;5;244msoftWrap: wrapping at box width[39;49m
        [38;5;244moverflow: clip[39;49m
        [38;5;244mlocale: en_US[39;49m
        [38;5;244mmaxLines: unlimited[39;49m
        [38;5;244mtext: TextSpan[39;49m
            [38;5;244mdebugLabel: ((englishLike subhead 2014).merge((blackMountainView subtitle1).apply)).copyWith[39;49m
            [38;5;244minherit: false[39;49m
            [38;5;244mcolor: Color(0xdd000000)[39;49m
            [38;5;244mfamily: Lato[39;49m
            [38;5;244msize: 16.0[39;49m
            [38;5;244mweight: 400[39;49m
            [38;5;244mbaseline: alphabetic[39;49m
            [38;5;244mdecoration: TextDecoration.none[39;49m
            [38;5;244m"Yellow Scarf"[39;49m
    [38;5;244msubtitle: RenderParagraph#efae3 NEEDS-LAYOUT NEEDS-PAINT[39;49m
        [38;5;244mparentData: offset=Offset(0.0, 0.0)[39;49m
        [38;5;244mconstraints: MISSING[39;49m
        [38;5;244msize: MISSING[39;49m
        [38;5;244mtextAlign: start[39;49m
        [38;5;244mtextDirection: ltr[39;49m
        [38;5;244msoftWrap: wrapping at box width[39;49m
        [38;5;244moverflow: clip[39;49m
        [38;5;244mlocale: en_US[39;49m
        [38;5;244mmaxLines: unlimited[39;49m
        [38;5;244mtext: TextSpan[39;49m
            [38;5;244mdebugLabel: ((englishLike body1 2014).merge((blackMountainView bodyText2).apply)).copyWith[39;49m
            [38;5;244minherit: false[39;49m
            [38;5;244mcolor: Color(0x8a000000)[39;49m
            [38;5;244mfamily: Lato[39;49m
            [38;5;244msize: 14.0[39;49m
            [38;5;244mweight: 400[39;49m
            [38;5;244mbaseline: alphabetic[39;49m
            [38;5;244mdecoration: TextDecoration.none[39;49m
            [38;5;244m"x 1"[39;49m
    [38;5;244mtrailing: RenderParagraph#53ad3 relayoutBoundary=up39 NEEDS-PAINT[39;49m
        [38;5;244mparentData: offset=Offset(0.0, 0.0) (can use size)[39;49m
        [38;5;244mconstraints: BoxConstraints(0.0<=w<=11.2, 0.0<=h<=56.0)[39;49m
        [38;5;244msize: Size(11.0, 56.0)[39;49m
        [38;5;244mtextAlign: start[39;49m
        [38;5;244mtextDirection: ltr[39;49m
        [38;5;244msoftWrap: wrapping at box width[39;49m
        [38;5;244moverflow: clip[39;49m
        [38;5;244mlocale: en_US[39;49m
        [38;5;244mmaxLines: unlimited[39;49m
        [38;5;244mtext: TextSpan[39;49m
            [38;5;244mdebugLabel: (englishLike body1 2014).merge((blackMountainView bodyText2).apply)[39;49m
            [38;5;244minherit: false[39;49m
            [38;5;244mcolor: Color(0xdd000000)[39;49m
            [38;5;244mfamily: Lato[39;49m
            [38;5;244msize: 14.0[39;49m
            [38;5;244mweight: 400[39;49m
            [38;5;244mbaseline: alphabetic[39;49m
            [38;5;244mdecoration: TextDecoration.none[39;49m
            [38;5;244m"$19.99"[39;49m
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: _RenderListTile#414b8 relayoutBoundary=up38 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'

[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mListTile[39;49m
 lib\widgets\cart_item.dart
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

...

continues to throw errors throughout the entirety of the remaining widget tree.

Root of error occurs here - cart_item.dart: (ignore provider packages)

import 'package:flutter/material.dart';
// import 'package:provider/provider.dart';

// import '../models/product_model.dart';
// import 'product_item.dart';

class CartItem extends StatelessWidget {
  CartItem({this.id, this.price, this.quantity, this.title});
  final String id;
  final double price;
  final int quantity;
  final String title;

  @override
  Widget build(BuildContext context) {
    // final product = Provider.of<Product>(context, listen: false);
    return Card(
      margin: EdgeInsets.symmetric(
        vertical: 15,
        horizontal: 4,
      ),
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListTile(
          leading: CircleAvatar(
            child: Text('\$$price'),
          ),
          //Image.network(product.imageURL),
          title: Text(title),
          subtitle: Text('x $quantity'),
          trailing: Text('\$$price'),
        ),
      ),
    );
  }
}

For reference - cart_screen.dart:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../models/cart.dart' show Cart;

import '../widgets/cart_item.dart';

class CartScreen extends StatelessWidget {
  static const routeName = '/cart';
  @override
  Widget build(BuildContext context) {
    final cart = Provider.of<Cart>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Your Cart'),
      ),
      body: Column(
        // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Card(
            margin: EdgeInsets.all(15.0),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text('Total',
                      style: TextStyle(
                        fontSize: 20,
                      )),
                  Spacer(),
                  Chip(
                    label: Text('\$${cart.totalAmount}'),
                  ),
                  FlatButton(
                    child: Text('order now'.toUpperCase()),
                    textColor: Theme.of(context).primaryColor,
                    onPressed: () {},
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Expanded(
                    child: ListView.builder(
                      shrinkWrap: true,
                      itemCount: cart.items.length,
                      itemBuilder: (ctx, index) => CartItem(
                          id: cart.items.values.toList()[index].id,
                          price: cart.items.values.toList()[index].price,
                          quantity: cart.items.values.toList()[index].quantity,
                          title: cart.items.values.toList()[index].title),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

It was not tied to the leading parameter within the ListTile in the cart_item which the error directed me to.

It was a rendering issue within cart_screen. The ListView.builder needed to occur outside of the Card widget. Here is how I fixed the code:

There was no change to the code in cart_item.

Updated code in cart_screen:

class CartScreen extends StatelessWidget {
  static const routeName = '/cart';
  @override
  Widget build(BuildContext context) {
    final cart = Provider.of<Cart>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('Your Cart'),
      ),
      body: Column(
        // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Card(
            margin: EdgeInsets.all(15.0),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text('Total',
                      style: TextStyle(
                        fontSize: 20,
                      )),
                  Spacer(),
                  Chip(
                    label: Text('\$${cart.totalAmount}'),
                  ),
                  FlatButton(
                    child: Text('order now'.toUpperCase()),
                    textColor: Theme.of(context).primaryColor,
                    onPressed: () {},
                  ),
                ],
              ),
            ),
          ),
          SizedBox(
            height: 10,
          ),
          Expanded(
            child: ListView.builder(
              shrinkWrap: true,
              itemCount: cart.items.length,
              itemBuilder: (ctx, index) => CartItem(
                  id: cart.items.values.toList()[index].id,
                  price: cart.items.values.toList()[index].price,
                  quantity: cart.items.values.toList()[index].quantity,
                  title: cart.items.values.toList()[index].title),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

class CartItem extends StatelessWidget {
  CartItem({this.id, this.price, this.quantity, this.title});
  final String id;
  final double price;
  final int quantity;
  final String title;

  @override
  Widget build(BuildContext context) {
    // final product = Provider.of<Product>(context, listen: false);
    return Card(
      margin: EdgeInsets.symmetric(
        vertical: 15,
        horizontal: 4,
      ),
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListTile(
          leading: CircleAvatar(
            child: Text('\$$price'),
          ),
          //Image.network(product.imageURL),
          title: Text(title),
          subtitle: Text('x $quantity'),
          trailing: Text('\$$price'),
        ),
      ),
    );
  }
}

class CartScreen extends StatelessWidget {
  static const routeName = '/cart';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Your Cart'),
      ),
      body: Column(
        // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Card(
            margin: EdgeInsets.all(15.0),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text('Total',
                      style: TextStyle(
                        fontSize: 20,
                      )),
                  Spacer(),
                  Chip(
                    label: Text('\$${50}'),
                  ),
                  FlatButton(
                    child: Text('order now'.toUpperCase()),
                    textColor: Theme.of(context).primaryColor,
                    onPressed: () {},
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Expanded(
                    child: ListView.builder(
                      shrinkWrap: true,
                      itemCount: 3,
                      itemBuilder: (ctx, index) => CartItem(
                          id: index.toString(),
                          price: index.toDouble(),
                          quantity: index,
                          title: index.toString()),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

I didn't get any issue from your code, Please check once in it