Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
373 views
in Technique[技术] by (71.8m points)

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

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 (i.e. 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
 libwidgetscart_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
 libwidgetscart_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.ite

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...