Here is my code:
AlertDialog alert = AlertDialog(
content: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Image(
image: correct
? AssetImage('assets/images/correct.png')
: AssetImage('assets/images/wrong.png')),
Padding(padding: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0)),
Text(message)
],
),
),
actions: [
okButton,
],
);
So, it almost works as expected. When I call the alert dialog, it appears correctly with the image and the text. But, for a split second, something overflows.
Here is the stack:
════════ Exception caught by rendering library
═════════════════════════════════════════════════════ The following
assertion was thrown during layout: A RenderFlex overflowed by 102
pixels on the bottom.
The relevant error-causing widget was: Column
file:///Users/path/to/file/blabla.dart:61:16
: To inspect this widget in Flutter DevTools, visit:
http://127.0.0.1:9100/#/inspector?uri=http%3A%2F%2F127.0.0.1%3A55261%2FDahKsJWBhm4%3D%2F&inspectorRef=inspector-863
The overflowing RenderFlex has an orientation of Axis.vertical. The
edge of the RenderFlex that is overflowing has been marked in the
rendering with a yellow and black striped pattern. This is usually
caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to
force the children of the RenderFlex to fit within the available space
instead of being sized to their natural size. This is considered an
error condition because it indicates that there is content that cannot
be seen. If the content is legitimately bigger than the available
space, consider clipping it with a ClipRect widget before putting it
in the flex, or using a scrollable container rather than a Flex, like
a ListView.
The specific RenderFlex in question is: RenderFlex#117f5
relayoutBoundary=up9 OVERFLOWING ... parentData: offset=Offset(24.0,
20.0) (can use size) ... constraints: BoxConstraints(w=192.0, 0.0<=h<=120.0) ... size: Size(192.0, 120.0) ... direction: vertical ... mainAxisAlignment: start ... mainAxisSize: min ...
crossAxisAlignment: center ... verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
Any idea what might cause this? Thx!
Wrapping your Column with SingleChildScrollView might fix the problem:
AlertDialog alert = AlertDialog(
content: Container(
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Image(
image: correct
? AssetImage('assets/images/correct.png')
: AssetImage('assets/images/wrong.png')),
Padding(padding: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0)),
Text(message)
],
),
),
),
actions: [
okButton,
],
);
Related
I am dynamically generating Chip widgets but the Wrap class is not wrapping overflowing widgets to next line.
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
physics: ClampingScrollPhysics(),
padding: const EdgeInsets.symmetric(
horizontal: 12,
),
children: [
Row(
children: [
Wrap(
spacing: 5,
children: _getChips(), // gets a list of chips
),
],
),
],
),
);
But I get this error in console
The following assertion was thrown during layout:
A RenderFlex overflowed by 94 pixels on the right.
The overflowing RenderFlex has an orientation of Axis.horizontal.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.
Am I doing something wrong?
Try removing Row widget. Wrap with default direction is an alternative to Row that moves child widgets to the next line if there is no enough space.
Also, I'd recommend using SingleChildScrollView as a container instead of ListView to get scrolling behavior.
return Scaffold(
body: SingleChildScrollView(
physics: ClampingScrollPhysics(),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 12,
),
child: Wrap(
spacing: 5,
children: _getChips(), // gets a list of chips
),
),
),
);
Can anybody see why I'm getting this error on the first child: Column? I'm using a stack in my build. and tried wrapping each widget in a Flexible widget but can't figure out where the code is overflowing. The screen flashes the telltale yellow/black renderflex lines for just a second but then seems to render just fine. The messages in the console are annoying though as is the little yellow/black flash at the beginning.
A RenderFlex overflowed by 99804 pixels on the bottom.
The relevant error-causing widget was:
Column file:///E:/FlutterProjects/myproject/lib/builders/CustomPageView.dart:47:26
Here's the code. Line 47 is the first child: column.
class _CustomPageViewState extends State<CustomPageView> {
Widget build(context) {
return PageView.builder(
itemCount: widget.speakcrafts.length,
itemBuilder: (context, int currentIndex) {
return createViewItem(widget.speakcrafts[currentIndex], context);
},
);
}
Widget createViewItem(SpeakContent speakcraft, BuildContext context) {
var contsize = MediaQuery.of(context).size.width * 0.60;
var contHeightsize = MediaQuery.of(context).size.height;
return Stack(
children: <Widget>[
Container(
color: Colors.black12,
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.network(
speakcraft.gavatar,
height: contsize,
width: contsize,
),
PlayerWidget2(url: kUrl),
],
),
),
],
),
),
],
);
And here's the full error code with chunhunghan's ConstrainedBox suggestion;
A RenderFlex overflowed by 99325 pixels on the right.
The relevant error-causing widget was:
Row file:///E:/FlutterProjects/speakoholic/lib/builders/CustomPageView.dart:121:25
The specific RenderFlex in question is: RenderFlex#d5393 relayoutBoundary=up8 OVERFLOWING
parentData: offset=Offset(0.0, 556.9); flex=null; fit=null (can use size)
constraints: BoxConstraints(0.0<=w<=674.9, 0.0<=h<=Infinity)
size: Size(674.9, 100000.0)
direction: horizontal
mainAxisAlignment: center
mainAxisSize: max
crossAxisAlignment: center
textDirection: ltr
verticalDirection: down
child 1: RenderErrorBox#d3900
parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
constraints: BoxConstraints(unconstrained)
size: Size(100000.0, 100000.0)
════════════════════════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
A RenderFlex overflowed by 100385 pixels on the bottom.
The relevant error-causing widget was:
Column file:///E:/FlutterProjects/speakoholic/lib/builders/CustomPageView.dart:49:28
It turns out I had to follow the error further down the widget tree of this widget;
child: PlayerWidget2(url: kUrl))
Within PlayerWidget2 was a path that was null prior to a PageViewBuilder being built. This threw a null path error which lead to the renderflex error. Once built, the null was filled in with a path. So in order to get rid of the errors I simply added a default path to the widget to fill in the null until the PageViewBuilder was built.
you can wrap your whole body content as a child of SingleChildScrollView SinglechildScrollView widget which may help you to overcome from this issue,or you can also make use of listview which can arrange list of widgets properly ListView
Code: Basically I have a simple app with three images aligned. I have 1 column and two rows. First row has two images and second row has 1 image aligned. Its the structure of the app. It just aligns perfectly when run below code in device but the moment I run on WEB there is this overflow. I try resizing the browser window only then it begins to become pretty again. Is there a workaround for Flutter Web please on how should I do the alignments here? Below code is inside body and inside Scaffold. I am attaching pics from device where there is no issue and from Flutter web where there is overflow issue.
return Column(
mainAxisAlignment: MainAxisAlignment.center,
//crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: FlatButton(
child: Image.asset('images/image1.png'),
),
),
Expanded(
child: FlatButton(
child: Image.asset('images/image1.png'),
),
),
],
),
Row(
children: <Widget>[
Expanded(
child: Image.asset('images/image1.png'),
),
],
),
],
);
}
Error:
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY
╞═════════════════════════════════════════════════════════ The
following assertion was thrown during layout: A RenderFlex overflowed
by 1238 pixels on the bottom.
The relevant error-causing widget was: Column
file:///C:/Users/1025632/Documents/GitHub/flutter-course/diceylips/lib/main.dart:43:12
The overflowing RenderFlex has an orientation of Axis.vertical. The
edge of the RenderFlex that is overflowing has been marked in the
rendering with a yellow and black striped pattern. This is usually
caused by the contents being too big for the RenderFlex. Consider
applying a flex factor (e.g. using an Expanded widget) to force the
children of the RenderFlex to fit within the available space instead
of being sized to their natural size. This is considered an error
condition because it indicates that there is content that cannot be
seen. If the content is legitimately bigger than the available space,
consider clipping it with a ClipRect widget before putting it in the
flex, or using a scrollable container rather than a Flex, like a
ListView. The specific RenderFlex in question is: RenderFlex#1ad1e
relayoutBoundary=up1 OVERFLOWING: creator: Column ← DicePage ←
_BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ←
CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ←
_InkFeatures-[GlobalKey#cb60e ink renderer] ← NotificationListener ←
PhysicalModel ← ⋯ parentData: offset=Offset(0.0, 56.0); id=_ScaffoldSlot.body (can use size) constraints:
BoxConstraints(0.0<=w<=1280.0, 0.0<=h<=554.0) size: Size(1280.0,
554.0)
direction: vertical
mainAxisAlignment: center
mainAxisSize: max
crossAxisAlignment: center
verticalDirection: down
Image with no issue in device
Image with overflow issue in chrome
Wrap the column with a sized box or container with defined height and width
SizedBox(
height:200,
width:200,
child: your column goes here,
)
Add below code inside Container
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
....
....
)
This is the generic way to define full width and height to your Container
If you don't try to fit your widget in screen and scroll is an option for you, you can use listview or a similar widget.
ListView(
children: <Widget>[
Column(
Otherwise, wrapping Container with MediaQuery.of(context).size.width and MediaQuery.of(context).size.height will work but there is just one catch here, if you use an appbar this height should be "MediaQuery.of(context).size.height - AppBar().preferredSize.height"
I'm having a hard time Googling my way out of this. I've created the default Flutter app that comes with the basic tutorial, and now I would like to add a ListView to it, like so:
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
// Column is also a layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Invoke "debug painting" (press "p" in the console, choose the
// "Toggle Debug Paint" action from the Flutter Inspector in Android
// Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
// to see the wireframe for each widget.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
Container(
width: 50, // This changes nothing.
height: 50, // This changes nothing.
child: const Center(child: Text('Text entry'))
)
]
),
],
),
),
The only thing I've added, is the ListView widget.
The error that I receive is this:
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
RenderBox was not laid out: RenderRepaintBoundary#d4bf6 relayoutBoundary=up3 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1687 pos 12: 'hasSize'
The relevant error-causing widget was:
Column file:///Users/user/code/project/lib/main.dart:77:16
════════════════════════════════════════════════════════════════════════════════════════════════════
Now, I've concluded that this has something to do with how the ListView is packed into its parent container, maybe that the rendering engine doesn't know how to handle the size of the list view, but I haven't been able to find information on how to actually fix it.
this is because the ListView by default wants to expand itself to fill available space. and cause you to wrap it with column it can't expand itself. you have two options here:
First is Wrap your Listview with Expanded widget. Expanded will take all the remaining available space for its child. for this option use below code:
Expanded(
child: ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
Container(
width: 50, // This changes nothing.
height: 50, // This changes nothing.
child: const Center(child: Text('Text entry'))
)
]
),
),
the second option is to set shrinkWrap property of ListView to true. by doing this ListView don't expand itself:
ListView(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
children: <Widget>[
Container(
width: 50, // This changes nothing.
height: 50, // This changes nothing.
child: const Center(child: Text('Text entry'))
)
]
)
I think the problem comes from the fact that you place a ListView inside a Column. Hence you must provide a size to your ListView. the answer to this question provides a good code example to solve your issue.
The actual reason for this error is that both Column and ListView try to expands in vertical axis. hence you need to constrain the height of ListView.
listView has shrinkWrap attribute can you try:
ListView(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
children: <Widget>[
Container(
width: 50, // This changes nothing.
height: 50, // This changes nothing.
child: const Center(child: Text('Text entry'))
)
]
)
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(...)
)