0

I make a application in flutter. It's simple. In the principal layout exist an stack. In the first level are a background (what its a simple gradient), and in the second lever are the "body" of the application.

In this body of application i have a column (To put one item below another). this column are divided by separate widgets. One is for the "tile", and other is for a ListView, this ListView will show information from a database, but in this moment i only create 10 items for an example.

The code is this:

//This for a homepage
    @override
      Widget build(BuildContext context) {
        return SafeArea(
          child: Scaffold(
            body: Stack(
              children: [
                Background(),
                HomeBody(),
              ],
            ),
    );

The background (are in another file, in the homepage are imported):

@override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          gradient: LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        stops: [0.2, 0.8],
        colors: [
          Color(0xff2E305F),
          Color(0xff202333),
        ],
      )),
    );

And this is the "body":

@override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: [
          PageTitle(),
          Changes(),
        ],
      ),
    );
  }
}

class PageTitle extends StatelessWidget {
  const PageTitle({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 20),
      child: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(
              height: 25,
            ),
            Text(
              'Biggest Title',
              style: TextStyle(
                color: Colors.white,
                fontSize: 55.0,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(
                //height: 1,
                ),
            Text(
              'low subtitle',
              style: TextStyle(
                color: Colors.white,
                fontSize: 14.0,
                fontWeight: FontWeight.w300,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class Changes extends StatelessWidget {
  const Changes({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Text('Text0'),
        Text('Text0'),
        Text('Text0'),
        Text('Text0'),
        Text('Text0'),
        Text('Text0'),
        Text('Text0'),
        Text('Text0'),
        Text('Text0'),
        Text('Text0'),
        Text('Text0'),
      ],
    );
  }
}

The error is:

═══════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during performResize():
Vertical viewport was given unbounded height.

Viewports expand in the scrolling direction to fill their container. In this case, a vertical viewport was given an unlimited amount of vertical space in which to expand. This situation typically happens when a scrollable widget is nested inside another scrollable widget.

If this widget is always nested in a scrollable widget there is no need to use a viewport because there will always be enough vertical space for the children. In this case, consider using a Column instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size the height of the viewport to the sum of the heights of its children.
The relevant error-causing widget was
ListView
lib/widgets/home_body_screen.dart:64
When the exception was thrown, this was the stack
#0      RenderViewport.computeDryLayout.<anonymous closure>
package:flutter/…/rendering/viewport.dart:1369
#1      RenderViewport.computeDryLayout
package:flutter/…/rendering/viewport.dart:1430
#2      RenderBox.performResize
package:flutter/…/rendering/box.dart:2332
#3      RenderObject.layout
package:flutter/…/rendering/object.dart:1758
#4      RenderProxyBoxMixin.performLayout
package:flutter/…/rendering/proxy_box.dart:116
...
The following RenderObject was being processed when the exception was fired: RenderViewport#33c99 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
RenderObject: RenderViewport#33c99 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

    offset: ScrollPositionWithSingleContext#b9cb0(offset: 0.0, range: null..null, viewport: null, ScrollableState, AlwaysScrollableScrollPhysics -> ClampingScrollPhysics -> RangeMaintainingScrollPhysics, IdleScrollActivity#03740, ScrollDirection.idle)
    anchor: 0.0
    center child: RenderSliverPadding#e0507 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
        parentData: paintOffset=Offset(0.0, 0.0)
        constraints: MISSING
        geometry: null
        padding: EdgeInsets.zero
        textDirection: ltr
        child: RenderSliverList#2982b NEEDS-LAYOUT NEEDS-PAINT
            parentData: paintOffset=Offset(0.0, 0.0)
            constraints: MISSING
            geometry: null
            no children current live
RenderBox was not laid out: RenderViewport#33c99 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
ListView
lib/widgets/home_body_screen.dart:64
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderViewport#33c99 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
ListView
lib/widgets/home_body_screen.dart:64

I'm a newest in flutter, i understand some things, but not all. My opinion is: "this error is caused by her possition, yeah, its scrollable but he does not know where ends". Sorry if i wrong.

thanks all!

2
  • use shrinkWrap: true for the ListView Commented Jul 6, 2021 at 4:20
  • Wow, amazing!. This is the answer. But why doesn't it scroll? Commented Jul 6, 2021 at 4:35

1 Answer 1

4

To use ListView inner SingleChildScrollView, you need to disable scrolling property of ListView.

ListView(
    physics: NeverScrollableScrollPhysics(),
    shrinkWrap: true,
    primary: false,
    children: []
)
Sign up to request clarification or add additional context in comments.

2 Comments

Okay okay. Thats work well. Thank you men. What can I use to replace SingleChildScrollView?
You can use both. I mean ListView and SingleChildView have his own scrolling properties, so To use them together, you need to disable ListView's scrolling property.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.