Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 584
Aditya Pandey Avatar asked May 28 '20 14:05

Aditya Pandey


4 Answers

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).

like image 178
Mayur Agarwal Avatar answered Sep 24 '22 07:09

Mayur Agarwal


The problem is that you are placing the GridView inside a Column/Row. The text in the exception gives a good explanation of the error.

To avoid the error you need to provide a size to the GridView inside.

I propose you this code that uses an Expanded to inform the horizontal size (maximum available) and the SizedBox (Could be a Container) for the height:

Column(
  children: <Widget>[
    Expanded(
      child: SizedBox(
          height: 200.0,
          child: RecentlyViewed()
      ),
    ),
    new IconButton(
      icon: Icon(Icons.remove_circle),
      onPressed: () {},
    ),
  ],
);
like image 24
Paresh Mangukiya Avatar answered Sep 19 '22 07:09

Paresh Mangukiya


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

like image 31
Abdelrahman Tareq Avatar answered Sep 23 '22 07:09

Abdelrahman Tareq


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.

like image 28
Rajasekaran K Avatar answered Sep 21 '22 07:09

Rajasekaran K