RenderBox was not laid out stack - flutter

Hello this is my error:
RenderBox was not laid out: RenderFlex#b7b0f relayoutBoundary=up1 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1940 pos 12: 'hasSize'
This is my code:
#override
Widget build(BuildContext context) {
return Scaffold(
body: FutureBuilder(
future: createListOfMatches(),
builder: (context, snapshot) {
return Row(
children: [match()],
);
}),
floatingActionButton:
FloatingActionButton(child: Text('next'), onPressed: () => next()),
);
}
match() {
return Stack(
children: [
Positioned(
top: top,
left: left,
child: Draggable(
data: 10,
onDragUpdate: (details) {
top = top + details.delta.dy;
left = left + details.delta.dx;
print('$top, $left');
setState(() {});
},
child: Material(
child: Container(
height: 50, width: 50, child: Image.asset('match.jpg'))),
feedback: Material(
child: Container(
height: 50, width: 50, child: Image.asset('match.jpg'))),
)),
],
);
}
thank you in advance

In the flutter documentation there are a few common failures:
there is also ‘RenderBox was not laid out’"
While this error is pretty common, it’s often a side effect of a
primary error occurring earlier in the rendering pipeline.
What does the error look like?
The message shown by the error looks like this:
content_copy RenderBox was not laid out: RenderViewport#5a477
NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
How might you run into this error?
Usually, the issue is related to violation of box constraints, and it
needs to be solved by providing more information to Flutter about how
you’d like to constrain the widgets in question. You can learn more
about how constraints work in Flutter on the page Understanding
constraints.
The RenderBox was not laid out error is often caused by one of two
other errors:
‘Vertical viewport was given unbounded height’ ‘An
InputDecorator…cannot have an unbounded width’
I hope this could help you a little.

Related

error occurs rendering and expanded - column widgets flutter

I'm getting a lot of errors regarding the rendering and I think its the way I'm using column and expanded and scroll view but i cant figure out how to fix it, I've tried different solutions but it still produces different errors
(elided 6 frames from class _AssertionError, class
_RawReceivePortImpl, class _Timer, and dart:async-patch) The following RenderObject was being processed when the exception was fired:
RenderFlex#357da relayoutBoundary=up12 NEEDS-LAYOUT NEEDS-PAINT
NEEDS-COMPOSITING-BITS-UPDATE RenderObject: RenderFlex#357da
relayoutBoundary=up12 NEEDS-LAYOUT NEEDS-PAINT
NEEDS-COMPOSITING-BITS-UPDATE
needs compositing
child 1: RenderPositionedBox#2911a relayoutBoundary=up13 NEEDS-PAINT
NEEDS-COMPOSITING-BITS-UPDATE
parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=Infinity)
size: Size(392.7, 36.0)
alignment: Alignment.center
textDirection: ltr
widthFactor: expand
heightFactor: expand
child: RenderSemanticsAnnotations#3a796 relayoutBoundary=up14 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: offset=Offset(178.4, 0.0) (can use size)
constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=Infinity)
size: Size(36.0, 36.0)
child: RenderConstrainedBox#b58da relayoutBoundary=up15 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE parentData: <none> (can use
size)
constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=Infinity)
size: Size(36.0, 36.0)
additionalConstraints: BoxConstraints(36.0<=w<=Infinity, 36.0<=h<=Infinity)
child: RenderCustomPaint#a2388 relayoutBoundary=up16 NEEDS-PAINT
parentData: <none> (can use size)
constraints: BoxConstraints(36.0<=w<=392.7, 36.0<=h<=Infinity)
size: Size(36.0, 36.0)
painter: _CircularProgressIndicatorPainter#971dd()
and there is more like this
and these are the errors that i get
The relevant error-causing widget was SingleChildScrollView
The relevant error-causing widget was Container The relevant
error-causing widget was Scaffold
'package:flutter/src/rendering/object.dart': Failed assertion: line
1840 pos 12: '!_debugDoingThisLayout': is not true. The relevant
error-causing widget was Column
and its like along list of errors like these
this is chatScreen class
class ChatScreen extends StatelessWidget{
final user = FirebaseAuth.instance.currentUser!;
final String chatWithName;
final Future<bool> flag;
ChatScreen(this.chatWithName, this.flag);
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(title: Text(chatWithName), centerTitle: true,),
body: Container(
height: 200,
child: SingleChildScrollView(
child: Column(
children: <Widget>[
// Expanded(
// child: messages()),
messages(),
newMessage(flag),
],
) ,
)
),
);
}
}
this is in class newMessage
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(top: 8),
padding: EdgeInsets.all(8),
child: Row(
children: <Widget>[
Expanded(
child: TextField(
controller: _controller,
onChanged: (value) {
setState(() {
_enterdMessage = value;
});
},
)
),
IconButton(
//onPressed: _enterdMessage.trim().isEmpty ? null : _sendMessage,
onPressed: (){
if(_enterdMessage.trim().isEmpty == true){
return null;
}
else{
if(widget.roomExist==true){
notFirstTime();
}else{
if(widget.roomExist==false){
firstTime();
}
}
}
},
icon: Icon(Icons.send))
],
),
);
}
}
this is class messages
Widget build(BuildContext context) {
return FutureBuilder<User>(
future: Future.value(FirebaseAuth.instance.currentUser),
builder: (context, futureSnapshot){
if(futureSnapshot.connectionState == ConnectionState.waiting){
return Center(child: CircularProgressIndicator(),);
}
return StreamBuilder <QuerySnapshot>(
stream: firestore.collection('chats').orderBy('timeStamp', descending: true).snapshots(),
builder:(ctx, chatSnapshot){
if(chatSnapshot.connectionState == ConnectionState.waiting){
return Center(child: CircularProgressIndicator(),);
}
final chatdocs = chatSnapshot.data!.docs;
//i think here is where we check if they have the same roomid or not
return ListView.builder(
shrinkWrap: true,
reverse: true,
itemCount: chatdocs.length,
itemBuilder: (ctx, index) => messageBubble(
chatdocs[index]['text'],
chatdocs[index]['userId'] == futureSnapshot.data!.uid, //this is the error- udemy 335 minute 7:26
//chatdocs[index]['username'],
),
);
}
);
} );
}
}
You dont have to use multiple scrollable widget for this case. the parent widget(SingleChildScroll) already hadling the scroll event. You can return column instead of ListView widget from streamBuilder. A better option will be using CustomChildScrollView.
return Column(
children: List.generate(chatdocs.length, (index) => messageBubble(
chatdocs[index]['text'],
chatdocs[index]['userId'] == futureSnapshot.data?.uid, //this is the error- udemy 335 minute 7:26
//chatdocs[index]['username'],
),),
);

Problems with a ListView

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!
To use ListView inner SingleChildScrollView, you need to disable scrolling property of ListView.
ListView(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
primary: false,
children: []
)

flutter ListView returning 'hasSize' error

I am using list view to build my flutter list. the code:
#override
Widget build(BuildContext context) {
return Expanded(
child: Container(
color: kMainColor,
child: Stack(
fit: StackFit.expand,
children: [
ListView(
shrinkWrap: true,
controller: _scrollController,
children: [
Text("ff"),
Text("ff"),
Text("ff"),
],
),
]
)
)
);
}
}
but I get this error :
RenderBox was not laid out: RenderViewport#b8187 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1940 pos 12: 'hasSize'
I don't know what this error is and what is causing it. I tried to wrap the listView in Container and give it a height it also returned an error. what can I do to fix it?

RenderFlex error in flutter after a stateful widget is called inside a singlechildscrollview column

This is the likes Widget which shows likes. It is called inside a scrollview column of another dart file. Everything was working fine before this widget's addition
#override
Widget build(BuildContext context) {
return Container(
height: 100,
child: Row(
children: <Widget>[
Expanded(
child: ListTile(
leading: IconButton(
icon: likedByReader
? Icon(Icons.favorite, color: Colors.orange)
: Icon(Icons.favorite, color: Colors.grey),
onPressed: _pressed,
),
),
),
Expanded(
child: Text('${likesList.length} likes'),
)
],
),
);
}
This is how LikeWidget is called
Expanded(child: LikeWidget(widget.readerEmail, widget.blogUIDInFirebase),),
Error shown in the console
RenderFlex children have non-zero flex but incoming height constraints are unbounded.
RenderBox was not laid out: _RenderSingleChildViewport#89f28 relayoutBoundary=up10 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1694 pos 12: 'hasSize'
You can't use Expanded inside a SingleChildScrollView. since the SingleChildScrollView has special constraints and Expanded it's expecting to be used inside a Column or Row .
There is a similar question here , and basically you should do conditional rendering for this to work, return a column when the content height is smaller than the parent height, and return a scrollview when the content doesn't fit .For this i would use a LayoutBuilder, but a CustomScrollView seems to be more performant Check the answers of that question.

flutter column widget receive null about height in runtime

AnimatedContainer(
duration: Duration(milliseconds: 500),
height: isExpanded == true ? 100 : 0,
child: Column(
children: <Widget>[
GridView.extent(
maxCrossAxisExtent:
SetDeviceRatio.safeBlockHorizontal * 30,
children: List.generate(foodCode.length, (index) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
height: 50,
child: Column(
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[Text(foodCode[index])],
),
),
);
})),
],
),
),
I made code like this and in runtime it said
RenderBox was not laid out: RenderConstrainedBox#fce1e relayoutBoundary=up9 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1687 pos 12: 'hasSize'
The relevant error-causing widget was
AnimatedContainer
lib/MainUI/MainCategoryUI.dart:71
════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════
The method '>' was called on null.
Receiver: null
Tried calling: >(1e-10)
The relevant error-causing widget was
Column
when i delete Column it works well but i don't get it why.
in column there is gridview and each row has same height and can calculate how long height need
so i thought column didn't need height variable.