CODEWITHSUNDEEP
dartflutter
Robert
Robert

Reputation: 5905

flutter scrollable list below rendered image

I have a Livtview of clickable images that when an image is clicked, it renders another page that has a Text above the original image, I am trying to add a listview after the image that is also scrollable as the first list, but without the top image moving or at this point either way is fine. I tried to build the listview like on the first page and it kept giving a viewport error, so I added shrinkwrap to the listview and now I get a red bar on the bottom of the screen and it will not scroll past what is viewable on the screen.

Here is some of the code where the second listview lives.

@override
  Widget build(BuildContext context) {
    var _children = <Widget>[
      new Center(
        child: new Text(widget.spec.name,
          style: new TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
        ),
      ),
      new Center(
          child: new Container(
            padding: new EdgeInsets.only(
                left: 10.0, right: 10.0, top: 20.0, bottom: 10.0),
            child: new Image.asset(widget.spec.pic.assetName),
          )
      ),

      new Center(
        child: new Container(
          padding: new EdgeInsets.only(
              left: 10.0, right: 10.0, top: 20.0, bottom: 10.0),
          child: new Text('Facilities for Specialty',
            style: new TextStyle(fontSize: 30.0),
            textAlign: TextAlign.center,
          ),
        ),
      ),

      new RefreshIndicator(
        child: new ListView.builder(
          itemBuilder: _itemBuilder,
          itemCount: listcount,
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
        ),
        onRefresh: _onRefresh,

      ),


    ];
    return new Scaffold(
      appBar: new AppBar(title: new Text("My Specialty")),
      body: new Column(
        children: _children,
      ),
    );
  }

Anyone have any ideas?

This is the error when shrinkWrap is false. But when its true scrolling does not work.

The following assertion was thrown during performResize():
I/flutter ( 1519): Vertical viewport was given unbounded height.
I/flutter ( 1519): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter ( 1519): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter ( 1519): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter ( 1519): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter ( 1519): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter ( 1519): instead. Otherwise, consider using the "shrinkWrap" propery (or a ShrinkWrappingViewport) to size
I/flutter ( 1519): the height of the viewport to the sum of the heights of its children.
I/flutter ( 1519): 
I/flutter ( 1519): When the exception was thrown, this was the stack:
I/flutter ( 1519): #0      RenderViewport.performResize.<anonymous closure> (package:flutter/src/rendering/viewport.dart:701)
I/flutter ( 1519): #2      RenderViewport.performResize (package:flutter/src/rendering/viewport.dart:696)
I/flutter ( 1519): #3      RenderObject.layout (package:flutter/src/rendering/object.dart:1854)
I/flutter ( 1519): #4      RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105)
I/flutter ( 1519): #5      RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #6      RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105)
I/flutter ( 1519): #7      RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #8      RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105)
I/flutter ( 1519): #9      RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #10     RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105)
I/flutter ( 1519): #11     RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #12     RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105)
I/flutter ( 1519): #13     RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #14     RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105)
I/flutter ( 1519): #15     RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #16     RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:544)
I/flutter ( 1519): #17     RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #18     MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:124)
I/flutter ( 1519): #19     _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:85)
I/flutter ( 1519): #20     MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:194)
I/flutter ( 1519): #21     RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:338)
I/flutter ( 1519): #22     RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #23     RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105)
I/flutter ( 1519): #24     RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #25     RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105)
I/flutter ( 1519): #26     _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1015)
I/flutter ( 1519): #27     RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #28     RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105)
I/flutter ( 1519): #29     RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #30     RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105)
I/flutter ( 1519): #31     RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #32     RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105)
I/flutter ( 1519): #33     RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #34     RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.dart:2609)
I/flutter ( 1519): #35     RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #36     RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105)
I/flutter ( 1519): #37     RenderObject.layout (package:flutter/src/rendering/object.dart:1869)
I/flutter ( 1519): #38     RenderStack.performLayout (package:flutter/src/rendering/stack.dart:433)
I/flutter ( 1519): #39     RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1746)
I/flutter ( 1519): #40     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:1041)
I/flutter ( 1519): #41     BindingBase&SchedulerBinding&GestureBinding&ServicesBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:251)
I/flutter ( 1519): #42     BindingBase&SchedulerBinding&GestureBinding&ServicesBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:504)
I/flutter ( 1519): #43     BindingBase&SchedulerBinding&GestureBinding&ServicesBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:189)
I/flutter ( 1519): #44     BindingBase&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:688)
I/flutter ( 1519): #45     BindingBase&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:636)
I/flutter ( 1519): #46     _drawFrame (file:///b/build/slave/Linux_Engine/build/src/flutter/lib/ui/hooks.dart:70)
I/flutter ( 1519): (elided one frame from class _AssertionError)
I/flutter ( 1519): 
I/flutter ( 1519): The following RenderObject was being processed when the exception was fired:
I/flutter ( 1519):   RenderViewport#7f9aa NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 1519):   creator: Viewport ← _ScrollableScope ← IgnorePointer-[GlobalKey#d069c] ← Listener ←
I/flutter ( 1519):   _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#a4705] ←
I/flutter ( 1519):   RepaintBoundary ← CustomPaint ← RepaintBoundary ← NotificationListener<ScrollNotification> ←
I/flutter ( 1519):   GlowingOverscrollIndicator ← Scrollable ← ⋯
I/flutter ( 1519):   parentData: <none> (can use size)
I/flutter ( 1519):   constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=Infinity)
I/flutter ( 1519):   size: MISSING
I/flutter ( 1519):   AxisDirection.down
I/flutter ( 1519):   offset: ScrollPositionWithSingleContext#0c3e5(offset: 0.0, range: null..null, viewport: null,
I/flutter ( 1519):   ScrollableState, AlwaysScrollableScrollPhysics -> ClampingScrollPhysics, IdleScrollActivity#59379,
I/flutter ( 1519):   ScrollDirection.idle)
I/flutter ( 1519):   anchor: 0.0
I/flutter ( 1519): This RenderObject had the following child:
I/flutter ( 1519):   RenderSliverList#bc50e NEEDS-LAYOUT NEEDS-PAINT
I/flutter ( 1519): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter ( 1519): Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1430: 'hasSize': is not true.
I/flutter ( 1519): Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1430: 'hasSize': is not true.
I/flutter ( 1519): Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1430: 'hasSize': is not true.
I/flutter ( 1519): Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1430: 'hasSize': is not true.
I/flutter ( 1519): Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1430: 'hasSize': is not true.
I/flutter ( 1519): Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1430: 'hasSize': is not true.
I/flutter ( 1519): Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1430: 'hasSize': is not true.
I/flutter ( 1519): Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1430: 'hasSize': is not true.
I/flutter ( 1519): Another exception was thrown: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1430: 'hasSize': is not true.

Upvotes: 2

Views: 7832

Answers (2)

longga
longga

Reputation: 121

child: Expanded(
    child: ListView.builder( itemBuilder: () => {...}, itemCount: ...)

Upvotes: 0

Collin Jackson
Collin Jackson

Reputation: 116818

I would wrap your RefreshIndicator and ListView in an Expanded. This tells Flutter that they want to consume the remaining space. You shouldn't need to shrinkWrap it.

Upvotes: 21

Related Questions