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
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).
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: () {},
),
],
);
I had the same error & in my case The reason was SingleChildScrollView() try to remove it
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With