CODEWITHSUNDEEP
flutterlistviewscaffold
mrwuscience
mrwuscience

Reputation: 113

in Flutter, problem arise when I add ListView in my scaffold

I am new to flutter, trying to add a listview to one of my route that when clicked, take me to a new route specific to each of the list card.

here's my route code:

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      appBar: AppBar(
        title: Text('What you are in the mood for?'),
        backgroundColor: Colors.lightGreen[400],
        centerTitle: true,
      ),
      body: Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [
        Text('Select a genre:',
            textAlign: TextAlign.center,
            style: TextStyle(
                fontSize: 40,
                color: Colors.black,
                fontWeight: FontWeight.bold)),


        //if I add ListView(...) here, I get errors


      ]),
    );
  }
}

The problem I receive is:

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
Tried to paint a RenderObject reentrantly.
The relevant error-causing widget was: 
  Scaffold file:///Users/User/AndroidStudioProjects/choose_a_game_for_me/lib/main.dart:102:12
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during paint():
Tried to paint a RenderObject reentrantly.

The following RenderObject was already being painted when it was painted again: RenderFlex#aafa2 relayoutBoundary=up5
...  needs compositing
...  parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body (can use size)
...  constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=603.4)
...  size: MISSING
...  direction: vertical
...  mainAxisAlignment: spaceEvenly
...  mainAxisSize: max
...  crossAxisAlignment: center
...  verticalDirection: down
Since this typically indicates an infinite recursion, it is disallowed.
The relevant error-causing widget was: 
  Scaffold file:///Users/Users/AndroidStudioProjects/choose_a_game_for_me/lib/main.dart:102:12
When the exception was thrown, this was the stack: 
#0      RenderObject._paintWithContext.<anonymous closure> (package:flutter/src/rendering/object.dart:2208:9)
#1      RenderObject._paintWithContext (package:flutter/src/rendering/object.dart:2221:6)
#2      PaintingContext.paintChild (package:flutter/src/rendering/object.dart:184:13)
#3      RenderBoxContainerDefaultsMixin.defaultPaint (package:flutter/src/rendering/box.dart:2515:15)
#4      RenderCustomMultiChildLayoutBox.paint (package:flutter/src/rendering/custom_layout.dart:404:5)
...
The following RenderObject was being processed when the exception was fired: RenderCustomMultiChildLayoutBox#8a3f0 relayoutBoundary=up4
...  needs compositing
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=683.4)
...  size: Size(411.4, 683.4)
RenderObject: RenderCustomMultiChildLayoutBox#8a3f0 relayoutBoundary=up4
  needs compositing
  parentData: <none> (can use size)
  constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=683.4)
  size: Size(411.4, 683.4)
...  child 1: RenderFlex#aafa2 relayoutBoundary=up5
...    needs compositing
...    parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body (can use size)
...    constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=603.4)
...    size: MISSING
...    direction: vertical
...    mainAxisAlignment: spaceEvenly
...    mainAxisSize: max
...    crossAxisAlignment: center
...    verticalDirection: down
...    child 1: RenderParagraph#e94b7 relayoutBoundary=up6 NEEDS-PAINT
...      parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
...      constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=Infinity)
...      size: Size(343.0, 47.0)
...      textAlign: center
...      textDirection: ltr
...      softWrap: wrapping at box width
...      overflow: clip
...      locale: en_US
...      maxLines: unlimited
...      text: TextSpan
...        debugLabel: ((englishLike body1 2014).merge(blackMountainView bodyText2)).merge(unknown)
...        inherit: false
...        color: Color(0xff000000)
...        family: Roboto
...        size: 40.0
...        weight: 700
...        baseline: alphabetic
...        decoration: TextDecoration.none
...        "Select a genre:"
...    child 2: RenderRepaintBoundary#02cc2 relayoutBoundary=up6 NEEDS-PAINT
...      needs compositing
...      parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
...      constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=Infinity)
...      size: MISSING
...      usefulness ratio: no metrics collected yet (never painted)
...      child: RenderCustomPaint#cd675 relayoutBoundary=up7 NEEDS-PAINT
...        needs compositing
...        parentData: <none> (can use size)
...        constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=Infinity)
...        size: MISSING
...        child: RenderRepaintBoundary#1d1e0 relayoutBoundary=up8 NEEDS-PAINT
...          needs compositing
...          parentData: <none> (can use size)
...          constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=Infinity)
...          size: MISSING
...          usefulness ratio: no metrics collected yet (never painted)
...  child 2: RenderConstrainedBox#4a2e7 relayoutBoundary=up5 NEEDS-PAINT
...    needs compositing
...    parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.appBar (can use size)
...    constraints: BoxConstraints(w=411.4, 0.0<=h<=683.4)
...    size: Size(411.4, 80.0)
...    additionalConstraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=80.0)
...    child: RenderSemanticsAnnotations#997db relayoutBoundary=up6 NEEDS-PAINT
...      needs compositing
...      parentData: <none> (can use size)
...      constraints: BoxConstraints(w=411.4, 0.0<=h<=80.0)
...      semantic boundary
...      size: Size(411.4, 80.0)
...      child: RenderAnnotatedRegion<SystemUiOverlayStyle>#e6930 relayoutBoundary=up7 NEEDS-PAINT
...        needs compositing
...        parentData: <none> (can use size)
...        constraints: BoxConstraints(w=411.4, 0.0<=h<=80.0)
...        size: Size(411.4, 80.0)
...        child: RenderPhysicalModel#35a1a relayoutBoundary=up8 NEEDS-PAINT
...          needs compositing
...          parentData: <none> (can use size)
...          constraints: BoxConstraints(w=411.4, 0.0<=h<=80.0)
...          size: Size(411.4, 80.0)
...          elevation: 4.0
...          color: Color(0xff9ccc65)
...          shadowColor: Color(0xff9ccc65)
...          shape: BoxShape.rectangle
...          borderRadius: BorderRadius.zero
...  child 3: RenderStack#16a71 NEEDS-LAYOUT NEEDS-PAINT
...    parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.floatingActionButton
...    constraints: MISSING
...    size: MISSING
...    alignment: centerRight
...    textDirection: ltr
...    fit: loose
...    overflow: clip
...    child 1: RenderTransform#68acc NEEDS-LAYOUT NEEDS-PAINT
...      parentData: not positioned; offset=Offset(0.0, 0.0)
...      constraints: MISSING
...      size: MISSING
...      transform matrix: [0] 0.0,0.0,0.0,0.0
[1] 0.0,0.0,0.0,0.0
[2] 0.0,0.0,1.0,0.0
[3] 0.0,0.0,0.0,1.0
...      origin: null
...      alignment: center
...      textDirection: ltr
...      transformHitTests: true
...      child: RenderTransform#9de5f NEEDS-LAYOUT NEEDS-PAINT
...        parentData: <none>
...        constraints: MISSING
...        size: MISSING
...        transform matrix: [0] 0.7,0.7,0.0,0.0
[1] -0.7,0.7,0.0,0.0
[2] 0.0,0.0,1.0,0.0
[3] 0.0,0.0,0.0,1.0
...        origin: null
...        alignment: center
...        textDirection: ltr
...        transformHitTests: true
════════════════════════════════════════════════════════════════════════════════════════════════════

I tried making ListView its own class and then added that to my SecondRoute's body, but same error shows up.

line 102 is the Scaffold in class SecondRoute.

Thanks for your help

Upvotes: 0

Views: 1903

Answers (1)

Gabe
Gabe

Reputation: 6885

If you try to add a ListView inside of a Column you must wrap it inside an expanded like the following:

Column(
  children: [
   ...
    Expanded(
      child: ListView(...),
    ),
  ]
)

This is because the ListView will try to take all available space, but which will cause a RenderFlex overflow. The Expanded widget essentially tells the ListView to take all of the available space and scroll down to the rest that can't fit inside of the Column.

Upvotes: 1

Related Questions