yieniggu
yieniggu

Reputation: 404

ListView.builder inside a Stack not working flutter

I'm trying to build a Jackpot game in flutter using a Stack widget and three ListView inside a Stack widget but it's not working. The error comes when I put the ListView inside a Stack. I've tried wrapping it inside Expanded, Container and Flexible widgets first but it doesn't work.

This is the code that builds the body of the Scaffold:

Widget _buildBody(GameArguments args) {
    return Container(
        child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        _buildJackpot(),
        _buildPuller(),
      ],
    ));
  }

Here is the code that builds the Jackpot:

List<Image> left = [
    Image.asset(
      'src/images/hites_logo_trans2.png',
      height: 100,
      width: 200,
    )
  ];

Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: [
          Container(),
          Image.asset('src/images/jackpot_fome.png'),
          Container(
            child: ListView.builder(
              itemBuilder: (BuildContext context, int index) {
                return left[index];
              },
            ),
          )
        ],
      ),
    );
  }

And this is the full error log, I really don't know whats going on :(

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
[38;5;244mThe following assertion was thrown during performResize():[39;49m
Vertical viewport was given unbounded width.

[38;5;244mViewports expand in the cross axis to fill their container and constrain their children to match their extent in the cross axis. In this case, a vertical viewport was given an unlimited amount of horizontal space in which to expand.[39;49m
[38;5;244mThe relevant error-causing widget was[39;49m
[38;5;248mListView[39;49m
 lib/pages/GamePage.dart
[38;5;244mWhen the exception was thrown, this was the stack[39;49m
[38;5;244m#0      RenderViewport.performResize.<anonymous closure>[39;49m
 package:flutter/…/rendering/viewport.dart
[38;5;244m#1      RenderViewport.performResize[39;49m
 package:flutter/…/rendering/viewport.dart
[38;5;244m#2      RenderObject.layout[39;49m
 package:flutter/…/rendering/object.dart
[38;5;244m#3      RenderProxyBoxMixin.performLayout[39;49m
 package:flutter/…/rendering/proxy_box.dart
[38;5;244m#4      RenderObject.layout[39;49m
 package:flutter/…/rendering/object.dart
[38;5;244m...[39;49m
[38;5;244mThe following RenderObject was being processed when the exception was fired: RenderViewport#d36b3 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE[39;49m
[38;5;244mRenderObject: RenderViewport#d36b3 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE[39;49m
    [38;5;244mneeds compositing[39;49m
    [38;5;244mparentData: <none> (can use size)[39;49m
    [38;5;244mconstraints: BoxConstraints(0.0<=w<=Infinity, 0.0<=h<=552.9)[39;49m
    [38;5;244msize: MISSING[39;49m
    [38;5;244maxisDirection: down[39;49m
    [38;5;244mcrossAxisDirection: right[39;49m
    [38;5;244moffset: ScrollPositionWithSingleContext#86e2d(offset: 0.0, range: null..null, viewport: null, ScrollableState, AlwaysScrollableScrollPhysics -> ClampingScrollPhysics -> RangeMaintainingScrollPhysics, IdleScrollActivity#0f03e, ScrollDirection.idle)[39;49m
    [38;5;244manchor: 0.0[39;49m
    [38;5;244mcenter child: RenderSliverPadding#b94be NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE[39;49m
        [38;5;244mparentData: paintOffset=Offset(0.0, 0.0)[39;49m
        [38;5;244mconstraints: MISSING[39;49m
        [38;5;244mgeometry: null[39;49m
        [38;5;244mpadding: EdgeInsets(0.0, 24.0, 0.0, 0.0)[39;49m
        [38;5;244mtextDirection: ltr[39;49m
        [38;5;244mchild: RenderSliverList#00bb5 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE[39;49m
            [38;5;244mparentData: paintOffset=Offset(0.0, 0.0)[39;49m
            [38;5;244mconstraints: MISSING[39;49m
            [38;5;244mgeometry: null[39;49m
            [38;5;244mno children current live[39;49m
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderViewport#d36b3 NEEDS-LAYOUT 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;248mListView[39;49m
 lib/pages/GamePage.dart
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderViewport#d36b3 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;248mListView[39;49m
 lib/pages/GamePage.dart
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderIgnorePointer#313f0 relayoutBoundary=up11 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;248mListView[39;49m
 lib/pages/GamePage.dart
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderSemanticsAnnotations#a67f0 relayoutBoundary=up10 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;248mListView[39;49m
 lib/pages/GamePage.dart
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderPointerListener#ec676 relayoutBoundary=up9 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;248mListView[39;49m
 lib/pages/GamePage.dart
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderSemanticsGestureHandler#1df12 relayoutBoundary=up8 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;248mListView[39;49m
 lib/pages/GamePage.dart
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderPointerListener#f871d relayoutBoundary=up7 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;248mListView[39;49m
 lib/pages/GamePage.dart
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: _RenderScrollSemantics#5c527 relayoutBoundary=up6 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;248mListView[39;49m
 lib/pages/GamePage.dart
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderRepaintBoundary#50cc7 relayoutBoundary=up5 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;248mListView[39;49m
 lib/pages/GamePage.dart
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderCustomPaint#7a42d relayoutBoundary=up4 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;248mListView[39;49m
 lib/pages/GamePage.dart
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderRepaintBoundary#a7239 relayoutBoundary=up3 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;248mStack[39;49m
 lib/pages/GamePage.dart
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m
Reloaded 3 of 581 libraries in 571ms.

[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════[39;49m
RenderBox was not laid out: RenderRepaintBoundary#a7239 relayoutBoundary=up3 NEEDS-PAINT
'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;248mStack[39;49m
 lib/pages/GamePage.dart
[38;5;248m════════════════════════════════════════════════════════════════════════════════[39;49m

Upvotes: 0

Views: 1220

Answers (2)

Osama Sandhu
Osama Sandhu

Reputation: 421

There Are Two Main Problems

  1. No Item Count For ListView
  2. You Must Need to Wrap Your lsitview with Containeror sized box or card to give it some Height

Try This Code: I Think You may get Your Answer

Container(
          height: 500,width: MediaQuery.of(context).size.width,
          child:
          ListView.builder(
            itemCount: 13,
            itemBuilder: (context, i) {
              return Padding(
                padding: const EdgeInsets.all(8.0),
                child: ListTile(title: Text("Try it"),),
                );
            },
          ),
        ),

Upvotes: 0

user14059905
user14059905

Reputation:

There are many problems with this code. First, you have to give itemcount in Listview.builder. Second, you need to size the Container that wraps the ListView it describes.

Upvotes: 1

Related Questions