Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Leading widget consumes entire tile width. Please use a sized widget. #34

Closed
arunkumarsubburaj opened this issue Aug 18, 2019 · 11 comments

Comments

@arunkumarsubburaj
Copy link

I am creating music player application. In the Queue Songs page I added reorderableSliver list. But whenever I try to drag a list item from it, it throws the blow error. Can you please check this if it is related to control level or did i construct the list in wrong way.

The error:

I/flutter (27359): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (27359): The following assertion was thrown during performLayout():
I/flutter (27359): Leading widget consumes entire tile width. Please use a sized widget.
I/flutter (27359): 'package:flutter/src/material/list_tile.dart':
I/flutter (27359): Failed assertion: line 1334 pos 7: 'tileWidth != leadingSize.width'
I/flutter (27359):
I/flutter (27359): Either the assertion indicates an error in the framework itself, or we should provide substantially
I/flutter (27359): more information in this error message to help you determine and fix the underlying cause.
I/flutter (27359): In either case, please report this assertion by filing a bug on GitHub:
I/flutter (27359): https://github.com/flutter/flutter/issues/new?template=BUG.md
I/flutter (27359):
I/flutter (27359): User-created ancestor of the error-causing widget was:
�[38;5;248mI/flutter (27359): ListTile-[#e87ff]�[39;49m
I/flutter (27359):
I/flutter (27359): When the exception was thrown, this was the stack:
�[38;5;244mI/flutter (27359): #2 _RenderListTile.performLayout�[39;49m
�[38;5;244mI/flutter (27359): #3 RenderObject.layout�[39;49m
�[38;5;244mI/flutter (27359): #4 RenderPadding.performLayout�[39;49m
�[38;5;244mI/flutter (27359): #5 RenderObject.layout�[39;49m
�[38;5;244mI/flutter (27359): #6 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout�[39;49m
�[38;5;244mI/flutter (27359): #7 RenderObject.layout�[39;49m
�[38;5;244mI/flutter (27359): #8 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout�[39;49m
�[38;5;244mI/flutter (27359): #9 RenderObject.layout�[39;49m
�[38;5;244mI/flutter (27359): #10 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout�[39;49m
�[38;5;244mI/flutter (27359): #11 RenderObject.layout�[39;49m
�[38;5;244mI/flutter (27359): #12 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout�[39;49m
�[38;5;244mI/flutter (27359): #13 RenderObject.layout�[39;49m
�[38;5;244mI/flutter (27359): #14 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout�[39;49m
�[38;5;244mI/flutter (27359): #15 RenderObject.layout�[39;49m
�[38;5;244mI/flutter (27359): #16 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout�[39;49m
�[38;5;244mI/flutter (27359): #17 RenderObject.layout�[39;49m
�[38;5;244mI/flutter (27359): #18 RenderConstrainedBox.performLayout�[39;49m
�[38;5;244mI/flutter (27359): #19 RenderObject.layout�[39;49m
�[38;5;244mI/flutter (27359): #20 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout�[39;49m
�[38;5;244mI/flutter (27359): #21 RenderObject.layout�[39;49m
�[38;5;244mI/flutter (27359): #22 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout�[39;49m
�[38;5;244mI/flutter (27359): #23 RenderObject.layout�[39;49m
�[38;5;244mI/flutter (27359): #24 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout�[39;49m
�[38;5;244mI/flutter (27359): #25 RenderObject.layout�[39;49m
�[38;5;244mI/flutter (27359): #26 _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout�[39;49m
�[38;5;244mI/flutter (27359): #27 RenderObject.layout�[39;49m
�[38;5;244mI/flutter (27359): #28 RenderFlex.performLayout�[39;49m
�[38;5;244mI/flutter (27359): #29 RenderObject.layout�[39;49m
�[38;5;244mI/flutter (27359): #30 RenderSliverList.performLayout.advance�[39;49m
�[38;5;244mI/flutter (27359): #31 RenderSliverList.performLayout�[39;49m
�[38;5;244mI/flutter (27359): #32 RenderObject.layout�[39;49m
�[38;5;244mI/flutter (27359): #33 RenderViewportBase.layoutChildSequence�[39;49m
�[38;5;244mI/flutter (27359): #34 RenderViewport._attemptLayout�[39;49m
�[38;5;244mI/flutter (27359): #35 RenderViewport.performLayout�[39;49m
�[38;5;244mI/flutter (27359): #36 RenderObject._layoutWithoutResize�[39;49m
�[38;5;244mI/flutter (27359): #37 PipelineOwner.flushLayout�[39;49m
�[38;5;244mI/flutter (27359): #38 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding.drawFrame�[39;49m
�[38;5;244mI/flutter (27359): #39 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame�[39;49m
�[38;5;244mI/flutter (27359): #40 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding._handlePersistentFrameCallback�[39;49m
�[38;5;244mI/flutter (27359): #41 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback�[39;49m
�[38;5;244mI/flutter (27359): #42 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame�[39;49m
�[38;5;244mI/flutter (27359): #43 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame�[39;49m
�[38;5;244mI/flutter (27359): #47 _invoke (dart:ui/hooks.dart:238:10)�[39;49m
�[38;5;244mI/flutter (27359): #48 _drawFrame (dart:ui/hooks.dart:196:3)�[39;49m
I/flutter (27359): (elided 5 frames from class _AssertionError and package dart:async)
I/flutter (27359):
I/flutter (27359): The following RenderObject was being processed when the exception was fired: _RenderListTile#e13f0 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
I/flutter (27359): creator: _ListTile ← MediaQuery ← Padding ← SafeArea ← Semantics ← _PointerListener ← Listener ←
I/flutter (27359): _GestureSemantics ← RawGestureDetector ← GestureDetector ← MouseRegion ← InkWell ← ⋯
I/flutter (27359): parentData: offset=Offset(0.0, 0.0) (can use size)
I/flutter (27359): constraints: BoxConstraints(w=0.0, h=0.0)
I/flutter (27359): size: MISSING
I/flutter (27359): This RenderObject had the following descendants (showing up to depth 5):
I/flutter (27359): leading: RenderConstrainedBox#7780c NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (27359): child: RenderPositionedBox#c4f06 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (27359): child: RenderSemanticsAnnotations#d3155 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (27359): child: RenderExcludeSemantics#b5a12 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (27359): child: RenderConstrainedBox#48444 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I/flutter (27359): title: RenderParagraph#b4ae2 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (27359): text: TextSpan
I/flutter (27359): subtitle: RenderParagraph#98e48 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (27359): text: TextSpan
I/flutter (27359): ════════════════════════════════════════════════════════════════════════════════════════════════════

The Code:

`
return Scaffold(
ScrollController _scrollController =
PrimaryScrollController.of(context) ?? ScrollController();
final _listTiles = playerUtil.songQueue
.map(
(song) => ListTile(
key: UniqueKey(),
title: Text(song.title),
subtitle: Text(song.album),
isThreeLine: false,
leading: SizedBox(
width: 40, // can be whatever value you want
child: Container(
child: Icon(Icons.reorder),
alignment: Alignment.center,
),
),
),
)
.toList();

  appBar: AppBar(
    title: Text(
      'Queue Songs',
    ),
    // backgroundColor: Colors.transparent,
    elevation: 0,
    leading: IconButton(
      icon: Icon(Icons.arrow_back_ios),
      onPressed: () {
        Navigator.pop(context);
        Navigator.push(
          context,
          MaterialPageRoute(builder: (BuildContext context) {
            return NowPlaying();
          }),
        );
      },
    ),
  ),
  body: CustomScrollView(
    controller: _scrollController,
    slivers: [
      ReorderableSliverList(
        delegate: ReorderableSliverChildListDelegate(_listTiles),
        onReorder: listReorder,
      ),
    ],
  ),
);

`

@deandreamatias
Copy link

Please fix the description. This format link #1 #2 #3 ... with the issues. Thanks

@sterrenb
Copy link

I am experiencing a similar issue when using ListTile inside the builder of ReorderableSliverChildBuilderDelegate on version ^0.2.12.

Here is the simplified snippet:

ReorderableSliverList(
  onReorder: _onReorder,
  delegate: ReorderableSliverChildBuilderDelegate(
      (BuildContext context, int index) {
    return ListTile(title: Text(index.toString()));
    ...

After the long press, once the widget gets rebuilt (and before reordering), the following error is thrown:

════════ (27) Exception caught by rendering library ════════════════════════════════════════════════
Leading widget consumes entire tile width. Please use a sized widget.
'package:flutter/src/material/list_tile.dart':
Failed assertion: line 1348 pos 7: 'tileWidth != leadingSize.width'
The relevant error-causing widget was: 
  ListTile file:///C:/snippet.dart:132:22
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (28) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: _RenderListTile#de216 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1687 pos 12: 'hasSize'
The relevant error-causing widget was: 
  ListTile file:///C:/snippet.dart:132:22
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (29) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: RenderPadding#45751 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1687 pos 12: 'hasSize'
The relevant error-causing widget was: 
  ListTile file:///C:/snippet.dart:132:22

@impure
Copy link
Contributor

impure commented Feb 28, 2020

I am experiencing a similar issue when using ListTile inside the builder of ReorderableSliverChildBuilderDelegate on version ^0.2.12.

Here is the simplified snippet:

ReorderableSliverList(
  onReorder: _onReorder,
  delegate: ReorderableSliverChildBuilderDelegate(
      (BuildContext context, int index) {
    return ListTile(title: Text(index.toString()));
    ...

After the long press, once the widget gets rebuilt (and before reordering), the following error is thrown:

════════ (27) Exception caught by rendering library ════════════════════════════════════════════════
Leading widget consumes entire tile width. Please use a sized widget.
'package:flutter/src/material/list_tile.dart':
Failed assertion: line 1348 pos 7: 'tileWidth != leadingSize.width'
The relevant error-causing widget was: 
  ListTile file:///C:/snippet.dart:132:22
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (28) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: _RenderListTile#de216 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1687 pos 12: 'hasSize'
The relevant error-causing widget was: 
  ListTile file:///C:/snippet.dart:132:22
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (29) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: RenderPadding#45751 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1687 pos 12: 'hasSize'
The relevant error-causing widget was: 
  ListTile file:///C:/snippet.dart:132:22

I had this issue and fixed it in #60

@ghost
Copy link

ghost commented Feb 28, 2020

I'm having same issue. Any solutions ?

@hanshengchiu
Copy link
Owner

@impure @ariyn97 Could you try v0.3.0?

@impure
Copy link
Contributor

impure commented Mar 11, 2020

@impure @ariyn97 Could you try v0.3.0?

Yes, it's working. Not sure if it's the same issue the OP was having though.

@alanmfb
Copy link

alanmfb commented Oct 13, 2020

In my case, I was returning a Container ().
I switched to a Container (width: 1) and it worked

@abdullah432
Copy link

If you're returning Container then put width and height for container.
For example:
This code will throw error

leading: Container(
                  decoration: BoxDecoration(
                    color: CustomColor.primaryColor,
                    shape: BoxShape.circle,
                  ),
                ),

And this will not

leading: Container(
                  width: 30,
                  height: 30,
                  decoration: BoxDecoration(
                    color: CustomColor.primaryColor,
                    shape: BoxShape.circle,
                  ),
                ),

@theashggl
Copy link

In my case, I was returning a Container ().
I switched to a Container (width: 1) and it worked

This worked for me too. But don't know what will happen when that container os to be shown.

@adilexperience
Copy link

I used title: for long content and leading:/trailing: for 1 widget only. problem resolved for me. I hope this might help someone :)

@bxrhhy
Copy link

bxrhhy commented Mar 1, 2022

If you're returning Container then put width and height for container. For example: This code will throw error

leading: Container(
                  decoration: BoxDecoration(
                    color: CustomColor.primaryColor,
                    shape: BoxShape.circle,
                  ),
                ),

And this will not

leading: Container(
                  width: 30,
                  height: 30,
                  decoration: BoxDecoration(
                    color: CustomColor.primaryColor,
                    shape: BoxShape.circle,
                  ),
                ),

i solve this problem in this way,thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants