Flutter: getting ListView in animated, positioned container being part of a stack

1

Maybe one of you already came across these problems. I spent numerous hours with trying to get the ListView (I also tried ExpansionPanelList) into a container that pans from the right edge into the screen (help menu) over the existing widgets. I have already created a mock-up starting with a basic ListView and then added feature by feature again. But now I am stuck and the error message is not of much help (to me).

Those exceptions are thrown as soon as I add the AnimatedPositioned. The main message seems to be an issue with constraints.hasBoundedWidth': is not true.

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
'package:flutter/src/rendering/viewport.dart': Failed assertion: line 1754 pos 16: 'constraints.hasBoundedWidth': is not true.


Either 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

The relevant error-causing widget was: 
  ListView file:///Users/holger/IdeaProjects/math/lib/tmp.dart:496:40
When the exception was thrown, this was the stack: 
#2      RenderShrinkWrappingViewport.performLayout (package:flutter/src/rendering/viewport.dart:1754:16)
#3      RenderObject.layout (package:flutter/src/rendering/object.dart:1775:7)
#4      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:13)
#5      RenderObject.layout (package:flutter/src/rendering/object.dart:1775:7)
#6      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:115:13)
...
The following RenderObject was being processed when the exception was fired: RenderShrinkWrappingViewport#a1875 relayoutBoundary=up7 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...  needs compositing
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=716.8)
...  size: MISSING
...  axisDirection: down
...  crossAxisDirection: right
...  offset: ScrollPositionWithSingleContext#20c01(offset: 0.0, range: null..null, viewport: null, ScrollableState, AlwaysScrollableScrollPhysics -> BouncingScrollPhysics, IdleScrollActivity#3e990, ScrollDirection.idle)
RenderObject: RenderShrinkWrappingViewport#a1875 relayoutBoundary=up7 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
  needs compositing
  parentData: <none> (can use size)
  constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=716.8)
  size: MISSING
  axisDirection: down
  crossAxisDirection: right
  offset: ScrollPositionWithSingleContext#20c01(offset: 0.0, range: null..null, viewport: null, ScrollableState, AlwaysScrollableScrollPhysics -> BouncingScrollPhysics, IdleScrollActivity#3e990, ScrollDirection.idle)
...  child 0: RenderSliverPadding#078d5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    parentData: layoutOffset=None
...    constraints: MISSING
...    geometry: null
...    padding: EdgeInsets.zero
...    textDirection: ltr
...    child: RenderSliverList#fd0a6 NEEDS-LAYOUT NEEDS-PAINT
...      parentData: paintOffset=Offset(0.0, 0.0)
...      constraints: MISSING
...      geometry: null
...      no children current live
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: RenderShrinkWrappingViewport#a1875 relayoutBoundary=up7 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1713 pos 12: 'hasSize'
The relevant error-causing widget was: 
  ListView file:///Users/holger/IdeaProjects/math/lib/tmp.dart:496:40

The lower part of the exception message is repeated multiple times, maybe once for every animation step. Then the messages finish with those below, where the reference container is the one of AnimatedPositiones > IgnorePointer > Container

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during paint():
RenderBox was not laid out: RenderDecoratedBox#a83d8
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1713 pos 12: 'hasSize'


Either 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

The relevant error-causing widget was: 
  Container file:///Users/holger/IdeaProjects/math/lib/tmp3.dart:474:32
When the exception was thrown, this was the stack: 
#2      RenderBox.size (package:flutter/src/rendering/box.dart:1713:12)
#3      RenderDecoratedBox.paint (package:flutter/src/rendering/proxy_box.dart:2067:12)
#4      RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2307:7)
#5      PaintingContext.paintChild (package:flutter/src/rendering/object.dart:191:13)
#6      RenderProxyBoxMixin.paint (package:flutter/src/rendering/proxy_box.dart:133:15)
...
The following RenderObject was being processed when the exception was fired: RenderDecoratedBox#a83d8
...  needs compositing
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(w=331.2, h=716.8)
...  size: MISSING
...  decoration: BoxDecoration
...    color: Color(0xffffffff)
...  configuration: ImageConfiguration(bundle: PlatformAssetBundle#b6597(), devicePixelRatio: 3.0, locale: en_US, textDirection: TextDirection.ltr, platform: iOS)
RenderObject: RenderDecoratedBox#a83d8
  needs compositing
  parentData: <none> (can use size)
  constraints: BoxConstraints(w=331.2, h=716.8)
  size: MISSING
  decoration: BoxDecoration
    color: Color(0xffffffff)
  configuration: ImageConfiguration(bundle: PlatformAssetBundle#b6597(), devicePixelRatio: 3.0, locale: en_US, textDirection: TextDirection.ltr, platform: iOS)
...  child: RenderFlex#28045 NEEDS-PAINT
...    needs compositing
...    parentData: <none> (can use size)
...    constraints: BoxConstraints(w=331.2, h=716.8)
...    size: MISSING
...    direction: horizontal
...    mainAxisAlignment: start
...    mainAxisSize: max
...    crossAxisAlignment: center
...    textDirection: ltr
...    verticalDirection: down
...    textBaseline: alphabetic
...    child 1: RenderPadding#b537d relayoutBoundary=up1 NEEDS-PAINT
...      parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
...      constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=716.8)
...      size: Size(59.0, 716.8)
...      padding: EdgeInsets(3.0, 0.0, 0.0, 0.0)
...      textDirection: ltr
...      child: RenderFlex#4c2a2 relayoutBoundary=up2 NEEDS-PAINT
...        parentData: offset=Offset(3.0, 0.0) (can use size)
...        constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=716.8)
...        size: Size(56.0, 716.8)
...        direction: vertical
...        mainAxisAlignment: spaceEvenly
...        mainAxisSize: max
...        crossAxisAlignment: center
...        verticalDirection: down
...        child 1: RenderSemanticsGestureHandler#c07e2 relayoutBoundary=up3 NEEDS-PAINT
...          parentData: offset=Offset(0.0, 330.4); flex=null; fit=null (can use size)
...          constraints: BoxConstraints(unconstrained)
...          size: Size(56.0, 56.0)
...          gestures: tap
...    child 2: _RenderScrollSemantics#80100 relayoutBoundary=up1 NEEDS-PAINT
...      needs compositing
...      parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
...      constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=716.8)
...      semantic boundary
...      size: MISSING
...      child: RenderPointerListener#695c7 relayoutBoundary=up2 NEEDS-PAINT
...        needs compositing
...        parentData: <none> (can use size)
...        constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=716.8)
...        size: MISSING
...        behavior: deferToChild
...        listeners: signal
...        child: RenderSemanticsGestureHandler#db442 relayoutBoundary=up3 NEEDS-PAINT
...          needs compositing
...          parentData: <none> (can use size)
...          constraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=716.8)
...          size: MISSING
...          gestures: <none>
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: RenderDecoratedBox#a83d8
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1713 pos 12: 'hasSize'
The relevant error-causing widget was: 
  Container file:///Users/holger/IdeaProjects/math/lib/tmp3.dart:474:32

The ListView looks like this, it shows headers of different tags and each can be expanded to show detail information.

AnimatedPositioned(duration: Duration(milliseconds: 800),
                  left: _drawerLeft,
                  top:5,
                      child: IgnorePointer(ignoring: (_drawerLeft <= MediaQuery.of(context).size.width / 3 ? false:true),
                        child: Container(
                          height:0.8*1 * MediaQuery.of(context).size.height, width:0.8 * MediaQuery.of(context).size.width,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: <Widget>[                           
                                    CupertinoButton(
                                      child: Icon(fwdBtn),
                                      onPressed: () {
                                        setState(() {
                                          _drawerLeft = 1 * MediaQuery.of(context).size.width;
                                          controller.reverse();
                                        });
                                      },
                                    ),
                              ListView.builder(
                                scrollDirection: Axis.vertical,
                                shrinkWrap: true,
                                itemCount: usedTagData.length, itemBuilder: (BuildContext context, int index) {
                                  return Column(
                                    children: <Widget>[
                                      Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                        children: <Widget>[
                                          Text(usedTagData[index].header, style: TextStyle(color: CupertinoColors.link)),
                                          CupertinoButton(
                                            child: Icon(dwnBtn),
                                            onPressed: () {
                                              setState(() {
                                                usedTagData[index].isExpanded = !usedTagData[index].isExpanded;
                                              });
                                            },
                                          ),
                                        ],
                                      ),
                                      (usedTagData[index].isExpanded ?
                                        Text(usedTagData[index].content)
                                      :
                                        Container()
                                      ),
                                    ]
                                  );
                                }
                             ),
                            ],
                          ),
                      )),
                )

The AnimatedPositioned is a widget of

              return Container(
                height: MediaQuery.of(context).size.height,
                child: Stack(
                fit: StackFit.expand,
                children: <Widget>[

Do you have any idea how to go forward on this or do the exception messages provide any hint to you?

flutter
listview
animation
stack
asked on Stack Overflow Sep 10, 2020 by w461 • edited Sep 10, 2020 by w461

1 Answer

0

The only way you would get ListView to work with Row is to set a predefined width. Your ListView tries to expand infinitely so you should constrain it by setting a predefined width. Here is an example:

Row(
 children:[
  SizedBox(
    width:200,
    child:ListView()
  ),
]),
answered on Stack Overflow Sep 11, 2020 by Uni

User contributions licensed under CC BY-SA 3.0