Flutter 自定义 Widget 的 ListView 包括 ListView 给出错误

Question

I am trying to create a widget displaying multiple items from a List, using other Widgets including custom ones to display these items

Here's the structure:

TriesWidget
-- Container
------ TryWidget
-------- Row
---------- IconButton
---------- CombinationWidget
------------ Row
-------------- ListView
---------------- ... (Container)

Here's the working code of the app, with only one item (the last one)

TriesWidget

class TriesWidget extends StatefulWidget {

  final Mastermind mastermind;

  TriesWidget({Key key, @required this.mastermind}) : super(key: key);

  @override
  _TriesWidgetState createState() => _TriesWidgetState();
}

class _TriesWidgetState extends State<TriesWidget> {

  void _handleButtonPressed(bool newValue) {
    setState(() {
      widget.mastermind.checkLastTry();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: TryWidget(
          tryModel: widget.mastermind.tries.last,
          onChanged: _handleButtonPressed
      ),
    );
  }
}

TryWidget

class TryWidget extends StatelessWidget {

  TryWidget({Key key, @required this.tryModel, @required this.onChanged}) : super(key: key);

  final ValueChanged<bool> onChanged;
  final Try tryModel;

  void _handlePressed() {
    onChanged(true);
  }

  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        CombinationWidget( combination: tryModel.tryCode),
        IconButton(
          iconSize: 50,
          onPressed: _handlePressed,
          icon: Icon(Icons.check_circle, color: Colors.lightGreen,),
        ),
      ],
    );
  }
}

CombinationWidget

class CombinationWidget extends StatefulWidget {

  final Combination combination;

  CombinationWidget({Key key, @required this.combination}) : super(key: key);

  @override
  _CombinationWidgetState createState() => _CombinationWidgetState();
}

class _CombinationWidgetState extends State<CombinationWidget> {

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        ListView.builder(
            shrinkWrap: true,
            itemCount: Settings.codeLength,
            scrollDirection: Axis.horizontal,
            itemBuilder: (context, position)
            {
              return GestureDetector(
                onTap: () => _modifyCode(position),
                child: new PegItem(pegModel: widget.combination[position]),
              );
            }
        ),
      ],
    );
  }

  void _modifyCode(int position)
  {
    setState(()
    {
      Mastermind.modifyCode(widget.combination, position);
    });
  }

}

And here's the piece of code that is supposed to produce my expected result (displaying all items):

TriesWidget

class TriesWidget extends StatefulWidget {

  final Mastermind mastermind;

  TriesWidget({Key key, @required this.mastermind}) : super(key: key);

  @override
  _TriesWidgetState createState() => _TriesWidgetState();
}

class _TriesWidgetState extends State<TriesWidget> {

  void _handleButtonPressed(bool newValue) {
    setState(() {
      widget.mastermind.checkLastTry();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: double.maxFinite,
      child: ListView.builder(
          itemCount: widget.mastermind.tries.length,
          shrinkWrap: true,
          itemBuilder: (BuildContext context, int index) {
            return new TryWidget(
                tryModel: widget.mastermind.tries.elementAt(index),
                onChanged: _handleButtonPressed
            );
          }
      ),
    );
  }
}

And the error it produces:

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
'package:flutter/src/rendering/viewport.dart': Failed assertion: line 1634 pos 16: 'constraints.hasBoundedHeight': 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

User-created ancestor of the error-causing widget was: 
  ListView file:///C:/Users/TBG/Repositories/CPE-S7_MPA_Mastermind/FlutterTest/flutter_app/lib/widgets/combination.widget.dart:25:18
When the exception was thrown, this was the stack: 
#2      RenderShrinkWrappingViewport.performLayout (package:flutter/src/rendering/viewport.dart:1634:16)
#3      RenderObject.layout (package:flutter/src/rendering/object.dart:1701:7)
#4      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
#5      RenderObject.layout (package:flutter/src/rendering/object.dart:1701:7)
#6      RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13)
...
The following RenderObject was being processed when the exception was fired: RenderShrinkWrappingViewport#f596e relayoutBoundary=up28 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...  needs compositing
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(unconstrained)
...  size: MISSING
...  axisDirection: right
...  crossAxisDirection: down
...  offset: ScrollPositionWithSingleContext#ee282(offset: 0.0, range: null..null, viewport: null, ScrollableState, ClampingScrollPhysics, IdleScrollActivity#4b904, ScrollDirection.idle)
RenderObject: RenderShrinkWrappingViewport#f596e relayoutBoundary=up28 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
  needs compositing
  parentData: <none> (can use size)
  constraints: BoxConstraints(unconstrained)
  size: MISSING
  axisDirection: right
  crossAxisDirection: down
  offset: ScrollPositionWithSingleContext#ee282(offset: 0.0, range: null..null, viewport: null, ScrollableState, ClampingScrollPhysics, IdleScrollActivity#4b904, ScrollDirection.idle)
...  child 0: RenderSliverPadding#5928b NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
...    parentData: layoutOffset=0.0
...    constraints: MISSING
...    geometry: null
...    padding: EdgeInsets.zero
...    textDirection: ltr
...    child: RenderSliverList#44c1f NEEDS-LAYOUT NEEDS-PAINT
...      parentData: paintOffset=Offset(0.0, 0.0)
...      constraints: MISSING
...      geometry: null
...      no children current live
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (2) Exception caught by rendering library ═════════════════════════════════════════════════
RenderBox was not laid out: RenderShrinkWrappingViewport#f596e relayoutBoundary=up28 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  ListView file:///C:/Users/TBG/Repositories/CPE-S7_MPA_Mastermind/FlutterTest/flutter_app/lib/widgets/combination.widget.dart:25:18
════════════════════════════════════════════════════════════════════════════════════════════════════

[...]

════════ (28) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: RenderConstrainedBox#ac5d6 relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Scaffold file:///C:/Users/TBG/Repositories/CPE-S7_MPA_Mastermind/FlutterTest/flutter_app/lib/widgets/mastermind.widget.dart:21:12
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (29) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: RenderFlex#faa61 relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Scaffold file:///C:/Users/TBG/Repositories/CPE-S7_MPA_Mastermind/FlutterTest/flutter_app/lib/widgets/mastermind.widget.dart:21:12
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (30) Exception caught by rendering library ════════════════════════════════════════════════
The method '>' was called on null.
Receiver: null
Tried calling: >(1e-10)
User-created ancestor of the error-causing widget was: 
  Scaffold file:///C:/Users/TBG/Repositories/CPE-S7_MPA_Mastermind/FlutterTest/flutter_app/lib/widgets/mastermind.widget.dart:21:12
════════════════════════════════════════════════════════════════════════════════════════════════════

I tried many solutions online (adding shrink, constraints, fixed height, using Expanded, ...) but I can't find the issue and it's solution

Answer 1

The reason why you're getting "viewport hasBoundedHeight" errors is because you're using a ListView inside a ListView. You may want to consider using CustomScrollView and SliverList. More details regarding this about this is covered here .