Unhandled Exception: Cannot hit test a render box with no size

Question

so I am trying to recreate a UI template. This is the code. I'm trying to add another Horizontal GridView by calling RecentlyViewed() but upon reloading it cannot render. I don't know the way to render this. I have tried using the expanded widget and flexible but none of it works

return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.blueGrey[50],
        centerTitle: true,
        title: Text(
            'Engagement Rings',
          style: TextStyle(
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      resizeToAvoidBottomPadding: false,
      body: SingleChildScrollView(
        child: Column(
            children: <Widget>[
              //Padding
              new Padding(padding: const EdgeInsets.all(8.0),),

              //Horizontal List
              picSlides(),

              //Padding
              SizedBox(height: 10.0),

              //Grid View
              Container(
                height: 100.0,
                child: Column(
                  children: <Widget>[
                    Align(
                      alignment: Alignment.topLeft,
                      child: Text(
                        'Engagement Rings',
                        textAlign: TextAlign.left,
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 20.0,
                        ),
                      ),
                    ),

                    Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        'bhjbsdbskjksbdknbsdnbbskdbbsdk',
                        textAlign: TextAlign.left,
                      ),
                    ),
                    Align(
                      alignment: Alignment.bottomLeft,
                      child: RaisedButton(
                        onPressed: (){},
                        color: Colors.white,
                        child: Text(
                          '450.00 USD',
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.black,
                          ),
                        ),
                      ),
                    )
                  ],
                ),
              ),
              SizedBox(height: 10.0),
              sizeRow(),
              SizedBox(height: 10.0),
              Container(
                margin: EdgeInsets.all(5.0),
                padding: EdgeInsets.fromLTRB(5.0, 10.0, 5.0, 5.0),
                height: 150.0,
                color: Colors.grey,
                child: Column(
                  children: <Widget>[
                    Align(
                      alignment: Alignment.topLeft,
                      child: Container(
                        child: Text(
                          'Finance Calculator',
                        ),
                      ),
                    ),
                    Expanded(
                        child:Row(
                          children: <Widget>[
                            Container(
                              color: Colors.white,
                              child: Center(
                                child: Text(
                                  '0%',
                                  style:TextStyle(
                                    fontWeight: FontWeight.bold,
                                    fontSize: 100.0,
                                  ),
                                ),
                              ),
                            ),
                            Expanded(
                                child: Container(
                                 color: Colors.white,
                                  child: Center(
                                   child: Text(
                                  'From only 35.00 USD Per Month',
                                ),
                              ),
                             )
                            )
                          ],
                        ),
                    )
                  ],
                )
              ),
              SizedBox(height: 10.0),
              RecentlyViewed(),
            ]
        ),
      )
    );

This is the error shown:

E/flutter (11292): [ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: Cannot hit test a render box with no size.
E/flutter (11292): The hitTest() method was called on this RenderBox: RenderRepaintBoundary#68904 relayoutBoundary=up12 NEEDS-PAINT:
E/flutter (11292):   needs compositing
E/flutter (11292):   creator: RepaintBoundary ← NotificationListener<ScrollNotification> ← GlowingOverscrollIndicator ← Scrollable ← GridView ← RecentlyViewed ← Column ← _SingleChildViewport ← IgnorePointer-[GlobalKey#1d332] ← Semantics ← _PointerListener ← Listener ← ⋯
E/flutter (11292):   parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
E/flutter (11292):   constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=Infinity)
E/flutter (11292):   layer: OffsetLayer#74c19 DETACHED
E/flutter (11292):   size: MISSING
E/flutter (11292):   metrics: 0.0% useful (1 bad vs 0 good)
E/flutter (11292):   diagnosis: insufficient data to draw conclusion (less than five repaints)
E/flutter (11292): Although this node is not marked as needing layout, its size is not set.
E/flutter (11292): A RenderBox object must have an explicit size before it can be hit-tested. Make sure that the RenderBox in question sets its size during layout.
E/flutter (11292): #0      RenderBox.hitTest.<anonymous closure> (package:flutter/src/rendering/box.dart:2118:9)
E/flutter (11292): #1      RenderBox.hitTest (package:flutter/src/rendering/box.dart:2133:6)
E/flutter (11292): #2      RenderBoxContainerDefaultsMixin.defaultHitTestChildren.<anonymous closure> (package:flutter/src/rendering/box.dart:2488:24)
E/flutter (11292): #3      BoxHitTestResult.addWithRawTransform (package:flutter/src/rendering/box.dart:801:31)
E/flutter (11292): #4      BoxHitTestResult.addWithPaintOffset (package:flutter/src/rendering/box.dart:758:12)
E/flutter (11292): #5      RenderBoxContainerDefaultsMixin.defaultHitTestChildren (package:flutter/src/rendering/box.dart:2483:33)
E/flutter (11292): #6      RenderFlex.hitTestChildren (package:flutter/src/rendering/flex.dart:942:12)
E/flutter (11292): #7      RenderBox.hitTest (package:flutter/src/rendering/box.dart:2135:11)
E/flutter (11292): #8      _RenderSingleChildViewport.hitTestChildren.<anonymous closure> (package:flutter/src/widgets/single_child_scroll_view.dart:565:24)
E/flutter (11292): #9      BoxHitTestResult.addWithRawTransform (package:flutter/src/rendering/box.dart:801:31)
E/flutter (11292): #10     BoxHitTestResult.addWithPaintOffset (package:flutter/src/rendering/box.dart:758:12)
E/flutter (11292): #11     _RenderSingleChildViewport.hitTestChildren (package:flutter/src/widgets/single_child_scroll_view.dart:560:21)
E/flutter (11292): #12     RenderBox.hitTest (package:flutter/src/rendering/box.dart:2135:11)
E/flutter (11292): #13     RenderProxyBoxMixin.hitTestChildren (package:flutter/src/rendering/proxy_box.dart:114:19)
E/flutter (11292): #14     RenderBox.hitTest (package:flutter/src/rendering/box.dart:2135:11)
E/flutter (11292): #15     RenderIgnorePointer.hitTest (package:flutter/src/rendering/proxy_box.dart:3064:31)
E/flutter (11292): #16     RenderProxyBoxMixin.hitTestChildren (package:flutter/src/rendering/proxy_box.dart:114:19)
E/flutter (11292): #17     RenderBox.hitTest (package:flutter/src/rendering/box.dart:2135:11)
E/flutter (11292): #32     Ren
Restarted application in 10,979ms.
Malformed message

Can someone help me to render my widgets idk by making the whole screen scrollable

Matrilineage

What is the widget sizeRow() in your code ? – Wendy

sizeRow() is actually a func to display row of buttons of show size. The problem was not that. The problem occurred in calling of RecentlyViewed(). By calling it directly and not wrapping it in a container the RecentlyViewed() got infinite horizontal area to access as it is fund to display a row which made it impossible to render. But by calling RecentlyViewed() wrapped in a container of specific height it got constraints and easy to render. ` Container( height: 120.0, child: RecentlyViewed(), )` – Matrilineage

I've tried your code and the problem doesn't appear, maybe you need to include the implementation of the methods picSlides(), sizeRow(), and RecentlyViewed() – Sheeb

Answer 1

For a ListView, set shrinkWrap property to true

shrinkWrap: true

Why is this needed?

ListView always tries to fill all the available space given by the parent element. So, let's say that the parent is a Column, then, we know that the column takes the max height available, so if your list is longer then you'll be having a problem, there isn't enough space available. And if the list is smaller then it'll try to fill the available space, even though it can't.

With shrinkWrap: true, you can change this behavior so that the ListView only occupies the space it needs (it will still scroll when there more items).

Vicenary

Why is this needed? – Elsieelsinore

@Elsieelsinore Thanks for asking, I've edited my answer and added the explanation. – Vicenary

@Elsieelsinore this option evalute the inner scrollable widget (list, grid), and render all it's childrens in advance to determine it's size (width, height) which works and the error goes away, it's can a performance issue if the scrollable widget have a lot of childrens with animation – Exclaim

Answer 2

I had the same error & in my case, The reason was SingleChildScrollView()

I add the ListView.builder into the container and set the container height as height:MediaQuery.of(context).size.height, and it worked for me.

Here is the sample :

class ListWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height:MediaQuery.of(context).size.height,
      child: ListView.builder(
        itemCount: 5,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text('Contact $index'),
          );
        },
      ),
    );
  }
}

Now Add the ListWidget in SingleChildScrollView()

return SingleChildScrollView(
        child: Column(
          children: [
            //.......
            ListWidget(),
          ],
        )
    );

You can use it like this or you can simply add it in the SingleChildScrollView in case if you don't want to add anything rather than a list.

Bond

Adding a Container widget with the height property you pasted fixed my issue. Thanks. – Athelstan

Answer 3

Wrapping the ListView in Container and setting the width to double.maxFinite

width: double.maxFinite,

solved mine. See sample code below:

  Container(
            width: double.maxFinite,
            child: ListView.builder(
                shrinkWrap: true,
                itemCount: 2,
                physics: const BouncingScrollPhysics(),
                itemBuilder: (BuildContext context, int index){

                  return ListTile(
 
                  );
                }
            ),
          ),

Napiform

Answer 4

I had the same error & in my case The reason was SingleChildScrollView() try to remove it

Nantucket

This is not a solution to the problem. – Speculum