I am getting an error when I add a row in a column. I am getting the following error:
I/flutter ( 6449): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 6449): The following assertion was thrown during performLayout():
I/flutter ( 6449): BoxConstraints forces an infinite width.
I/flutter ( 6449): These invalid constraints were provided to RenderAnimatedOpacity's layout() function
Also for reference here is my code:
return new Scaffold(
backgroundColor: whiteColor,
body: new Column(
children: <Widget>[
imgHeader,
lblSignUp,
txtEmail,
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
txtFirstName,
txtLastName
],
),
],
),
);
If you are using TextField Inside a Row then you need to use Flexible or Expanded.
More details are given here in this answer.
https://stackoverflow.com/a/45990477/4652688
Reason for the error:
TextField expands in horizontal direction and so does the Row, so we need to constrain the width of the TextField, there are many ways of doing it.
Use Expanded
Row(
children: <Widget>[
Expanded(child: TextField()),
// more widgets
],
)
Use Flexible
Row(
children: <Widget>[
Flexible(child: TextField()),
// more widgets
],
)
Wrap it in Container or SizedBox and provide width
Row(
children: <Widget>[
SizedBox(width: 100, child: TextField()),
// more widgets
],
)
I got this error when using a Positioned widget along the lines of:
Positioned(
left: _left,
child: MyWidget(...)
)
And solved by adding the bottom and top arguments, e.g.:
Positioned(
left: _left,
bottom: 0,
top: 0,
child: MyWidget(...)
)
Related
Column(
children: [
GameWidget(game: SpaceShooterGame()),
I got following message
The following assertion was thrown during performLayout():
RenderConstrainedBox object was given an infinite size during layout.
How to do ?
I try may widget around GameWidget (row ,column ..)
none is working
You can use Expanded widget inside Column.
Column(
children: [
Expanded(
child: GameWidget(
game: SpaceShooterGame(),
),
),
],
)
In one of my Flutter files I have this code that theoretically doesn't seem it should be a problem to run at all. It renders nicely in the debug version but when I build a release iOS and Android app files, it becomes partly invisible. There's a widget that renders called _heyName() which is just a text widget. The _whatWouldYouLike() widget is pretty much a 1:1 copy of the _heyName() one, yet this one doesn't render and neither does any widget afterwards.
Console does throw this warning though:
======== Exception caught by widgets library =======================================================
The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.
The ParentDataWidget Flexible(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type ParentData.
Usually, this means that the Flexible widget has the wrong ancestor RenderObjectWidget. Typically, Flexible widgets are placed directly inside Flex widgets.
The offending Flexible is currently placed inside a RepaintBoundary widget.
The ownership chain for the RenderObject that received the incompatible parent data was:
ConstrainedBox ← Container ← Flexible ← RepaintBoundary ← IndexedSemantics ← NotificationListener<KeepAliveNotification> ← KeepAlive ← AutomaticKeepAlive ← KeyedSubtree ← SliverList ← ⋯
When the exception was thrown, this was the stack:
#0 RenderObjectElement._updateParentData.<anonymous closure> (package:flutter/src/widgets/framework.dart:5723:11)
#1 RenderObjectElement._updateParentData (package:flutter/src/widgets/framework.dart:5739:6)
#2 RenderObjectElement.attachRenderObject (package:flutter/src/widgets/framework.dart:5761:7)
#3 RenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5440:5)
#4 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6082:11)
...
====================================================================================================
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
backgroundColor: Colors.transparent,
shadowColor: Colors.transparent,
pinned: false,
expandedHeight: appBarHeight,
automaticallyImplyLeading: false,
floating: true,
flexibleSpace: LayoutBuilder(
builder: (context, constraints) {
return Container(
alignment: Alignment.bottomCenter,
child: Container(
height: SizeConfig.screenWidth * 0.13,
child: GestureDetector(
onTap: () {
},
child: _searchCategories(context))),
);
},
),
),
];
},
body: ListView(
shrinkWrap: true,
children: [
_heyName(),
SizedBox(
height: 10,
),
_whatWouldYouLike(),
SizedBox(
height: 10,
),
_requests(),
SizedBox(
height: 10,
),
Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_categoriesText(),
_seeAll(),
],
),
SizedBox(
height: SizeConfig.screenWidth * 0.03,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_category("Food and Beverages", 1),
_category("Design", 2),
],
),
SizedBox(
height: SizeConfig.screenWidth * 0.1,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_category("Music", 3),
_category("Sports and Fitness", 4),
],
),
SizedBox(
height: SizeConfig.screenWidth * 0.1,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_category("Personal Grooming", 5),
_category("Information Technology", 6),
],
),
SizedBox(
height: SizeConfig.screenWidth * 0.1,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_category("Home Services", 7),
_category("Lifestyle", 8),
],
),
SizedBox(
height: SizeConfig.screenWidth * 0.1,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_category("Pet Services", 9),
_category("Consulting", 10),
],
),
SizedBox(
height: SizeConfig.screenWidth * 0.25,
),
],
),
],
),
),
);
}
}
Is there any other widget I could use instead of ListView here? I feel like that's the source of the problem as when I use a Column instead of ListView, it renders fine, just because it's bigger than the screen, it throws the good old RenderFlex error. I tried putting the Column in Expanded, but no luck. I feel I'm missing something here.
It's probably being caused by one of your custom widgets like _heyName() or _whatWouldYouLike().
Share the code for those widgets, or better to look into the code you wrote, and make sure they don't start with a Flexible widget.
The error is self explanatory, You are using a Flexible widget inside something besides a Row or Column. So in your listView, the children start with a Flexible, and thus, you get this error. Same goes for Expanded, you can't put an Expanded inside a container or listview for example.
When I use a wrap for listing some widgets I have some problems. Wrap automatically align-center its child widgets. How can I align-left if there is one widget on the row?
Wrappping Output - 1
Wrapping Output - 2
Wrap(
crossAxisAlignment: WrapCrossAlignment.start,
alignment: WrapAlignment.start,
children: customAnnouncementLabels
.map(
(customAnnouncementLabel) => LabelChip(
text: customAnnouncementLabel.name,
color: customAnnouncementLabel.bgColor,
isDetailed: false,
),
)
.toList(),
),
Try wrapping your Wrap Widget with a SizedBox Widget with maximum width
SizedBox(
width: double.infinity,
child: Wrap(
children: [] // Your Children
))
Try it :
runAlignment: WrapAlignment.start
mainAxisAlignment: MainAxisAlignment.start for left align, mainAxisAlignment: MainAxisAlignment.end for right side can be used with Column to get similar output.
I have below code in flutter.
Widget build(BuildContext context) {
return Center(
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
children: <Widget>[
SizedBox(
height: 100,
child: ListTile(
leading: IconButton(
iconSize: 30,
icon: roundImage(post.userPicture, Icon(Icons.person)),
onPressed: () {},
),
subtitle: Text(this.post.message),
)),
],
),
],
),
),
);
}
But I get this error:
════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderPhysicalShape#7713c relayoutBoundary=up3
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1687 pos 12: 'hasSize'
The relevant error-causing widget was
Card
I have added SizedBox in the Row but it still complains about hasSize error. How can I solve this issue?
It's not clear what you're trying to achieve, but instead of using SizedBox you can try wrapping inside Expanded or Flexible widgets.
I tried adding a width of 200 to your SizedBox and it worked.
Although using Expanded as suggested by #dhanasekar works well too.
Add Flexible
Row(
children: [
new Flexible(
child: new TextField(
decoration: const InputDecoration(helperText: "Enter App ID"),
style: Theme.of(context).textTheme.body1,
),
),
],
),
I was getting exactly this while trying to have a Column with one of its children being a ScopedModelDescendant.
I was going crazy with this same error.
A combination of reading this thread and educating myself on layout widgets gave me the solution:
I've wrapped the ScopedModelDescendant child in a Flexible widget, like this:
Column(
children: [
Flexible(child: ScopedModelDescendant<MyAPIProvider>(...)
...
And now it works.
return Card(
child: Row(
children: <Widget>[
Placeholder(
fallbackHeight: 100,
fallbackWidth: 100,
),
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(height: 10, child: Container(child: Text("One"),)),
Expanded(child: Container(child: Text("Center") )),
],
)
],
),
);
On the code above I am getting error:
I/flutter ( 4872): The following assertion was thrown during performLayout():
I/flutter ( 4872): RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter ( 4872): When a column is in a parent that does not provide a finite height constraint, for example if it is
I/flutter ( 4872): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a
I/flutter ( 4872): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
I/flutter ( 4872): space in the vertical direction.
Whole code:
class FilmItems extends StatelessWidget {
List<String> filmListList;
List<String> _getFilmList() {
var items = List<String>.generate(101, (counter) => "item $counter");
return items;
}
FilmItems() {
filmListList = _getFilmList();
}
#override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: filmListList.length,
itemBuilder: (BuildContext context, int index) {
return Card(
child: Row(
children: <Widget>[
Placeholder(
fallbackHeight: 100,
fallbackWidth: 100,
),
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(height: 10, child: Container(child: Text("One"),)),
Expanded(child: Container(child: Text("Center") )),
],
)
],
),
);
});
}
}
What is wrong?
The problem is that you are using Expanded and any of it's parents have an explicit height.
The solution would depend on how do you want to handle the height of the Expanded. In your case, seems to be that you want to have a Row with a fixed height equal to the Placeholder. In that case, you need to wrap the Row with the same height as the Placeholder, like this:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("")),
body: ListView.builder(
itemCount: 3,
itemBuilder: (BuildContext context, int index) {
return Card(
child: SizedBox(
height: 100,
child: Row(
children: <Widget>[
Placeholder(
fallbackHeight: 100,
fallbackWidth: 100,
),
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("One"),
Expanded(child: Center(child: Text("Center"))),
],
),
],
),
),
);
}),
);
}
I removed the height 10 of the Text("One") because if the fontSize is bigger, the text would look cropped. And I wrapped the Text("Center") with a Center widget, I think that's what you wanted to achieve.
Suggestion: If the content inside the Row could haven a bigger height than the Row, the content would look cropped. If that could happen you might want to take another approach.
When you are using Column widget, it's parent should have a finite height. So in your code the parent is a row and it also does not have a finite height. You need wrap Column with Container and give a finite height.
Container(
height: 500,
child: Column()
)
Put your Column/Row inside an Expanded or SizedBox (with some height) like this:
Expanded(
child: Column(...)
)
Or
SizedBox(
height: 250, // give some height
child: Column(...),
)