Flutter:
I am trying to make a todo list app. So I have used Stack widget with two children ListView and a Row widget positioned at the bottom with Positioned widget. I want the Row to contain a TextField and a IconButton wrapped with a SizedBox.
Now what I want is to align the IconButton to bottom-right corner and the TextField to take all the available space. this code I have tried.
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
// TODO: ListView here
Positioned(
bottom: 0.0,
child: Row(
children: [
// child #1
const Expanded(
child: TextField(
decoration: InputDecoration(
hintText: "Type here"
),
),
),
// child #2
SizedBox(
height: 30.0,
width: 30.0,
child: IconButton(
icon: const Icon(Icons.send),
onPressed: () {},
),
),
],
),
),
],
),
);
}
this code throws this error.
The following assertion was thrown during performLayout():
RenderFlex children have non-zero flex but incoming width constraints are unbounded.
When a row is in a parent that does not provide a finite width constraint, for example if it is in a horizontal scrollable, it will try to shrink-wrap its children along the horizontal axis. Setting a flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining space in the horizontal direction.
These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child cannot simultaneously expand to fit its parent.
Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible children (using Flexible rather than Expanded). This will allow the flexible children to size themselves to less than the infinite remaining space they would otherwise be forced to take, and then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum constraints provided by the parent.
now I set mainAxisSize of Row to MainAxisSize.min and flex of Flexible widget to FlexFit.loose.
Positioned(
bottom: 0.0,
child: Row(
mainAxisSize: MainAxisSize.min, // added this
children: [
// child #1
const Flexible(
fit: FlexFit.loose, // added this
child: TextField(
decoration: InputDecoration(
hintText: "Type here"
),
),
),
// child #2
SizedBox(
height: 30.0,
width: 30.0,
child: IconButton(
icon: const Icon(Icons.send),
onPressed: () {},
),
),
],
),
),
but getting this error now.
The following assertion was thrown during performLayout():
An InputDecorator, which is typically created by a TextField, cannot have an unbounded width.
This happens when the parent widget does not provide a finite width constraint. For example, if the InputDecorator is contained by a Row, then its width must be constrained. An Expanded widget or a SizedBox can be used to constrain the width of the InputDecorator or the TextField that contains it.
'package:flutter/src/material/input_decorator.dart':
Failed assertion: line 959 pos 7: 'layoutConstraints.maxWidth < double.infinity'
Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
https://github.com/flutter/flutter/issues/new?template=2_bug.md
If I don't use the Stack then its fine. But I have to. Now what should I do?
If a widget is wrapped in a [Positioned], then it is a positioned widget in its [Stack]. If the [right] property is non-null, the right edge of this child will be positioned [right] layout units from the right of the stack widget. The [left], [bottom], and [top] properties work analogously.
So, if you set [right] to 0.0 and [left] to 0.0, it means that
[stack] will force the child to have a particular width. in this case the full width of the screen.
Just add this 2 lines of code to achieve what you want.
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
// TODO: ListView here
Positioned(
bottom: 0.0,
left: 0.0, <----------- (1)
right: 0.0, <----------- (2)
child: Row(
children: [
// child #1
const Expanded(
child: TextField(
decoration: InputDecoration(
hintText: "Type here"
),
),
),
// child #2
SizedBox(
height: 30.0,
width: 30.0,
child: IconButton(
icon: const Icon(Icons.send),
onPressed: () {},
),
),
],
),
),
],
),
);
}
Code:
Table(
children: [
TableRow(
children: [
Container(height: 100, color: Colors.red),
Container(color: Colors.green), // Read 'Q1' below.
Container(height: 100, color: Colors.blue),
],
),
],
)
Q1: How to stretch green Container height to the maximum height of the given TableRow?
PS: For simplicity, I provided manual heights to the container1 and the container2 but in real world, I don't know their heights. Second, I know I can find the height of both the Container using RenderBox and then I can find out the max of (container1, container3) and apply that to the 2nd one but that would be too much of work, I'm looking for a better approach.
Use TableCell and TableCellVerticalAlignment.fill.
TableCell:
A widget that controls how a child of a Table is aligned.
A TableCell widget must be a descendant of a Table, and the path from the TableCell widget to its enclosing Table must contain only TableRows, StatelessWidgets, or StatefulWidgets (not other kinds of widgets, like RenderObjectWidgets).
TableCellVerticalAlignment.fill:
Cells with this alignment are sized to be as tall as the row, then made to fit the row.If all the cells have this alignment, then the row will have zero height.
Table(
children: [
TableRow(
children: [
Container(height: 100, color: Colors.red),
TableCell(
verticalAlignment: TableCellVerticalAlignment.fill,
child: Container(color: Colors.green),
),
Container(height: 100, color: Colors.blue),
],
),
],
)
I have this code in bottomNavigationBar"
bottomNavigationBar: BottomAppBar(
child: IntrinsicHeight(
child: Row(
children: <Widget>[
IconButton(
icon: Icon(Icons.arrow_back_ios),
onPressed: () => Navigator.of(context).pop(),
),
Spacer(),
IconButton(
icon: Text(
"QR",
style: Theme.of(context).textTheme.title,
),
onPressed: () => Navigator.of(context).pop(),
),
VerticalDivider(
color: Theme.of(context).textTheme.headline.color,
),
IconButton(
icon: Icon(Icons.share),
onPressed: () => Navigator.of(context).pop(),
),
],
),
),
),
And the code works as expected.
If I remove IntrinsicHeight widget, the divider goes all the way across all screen.
The reason I want an alternative is because in the documentation of IntrinsicHeight it says:
This class is relatively expensive. Avoid using it where possible.
What would be the cheap alternative?
Thank you
If you're looking for "a cheap way to have the row fit the min height of dynamic content", then there are none.
The cheap solution is, to have a fixed height on the Row – typically by wrapping it in SizedBox:
SizedBox(
height: 42,
child: Row(...),
)
This works well if the content has a fixed height. But it won't if the height is dynamic.
In this specific case, you could either use SizedBox with height=48 (this is the default height of the IconButton widget) or avoid using VerticalDivider and draw it by adding a left border to the share icon.
Container(
decoration: BoxDecoration(
border: Border(
left: Divider.createBorderSide(
context,
color: Theme.of(context).textTheme.headline.color,
),
),
),
child: IconButton(
icon: Icon(Icons.share),
onPressed: () => Navigator.of(context).pop(),
),
),
In Flutter it might seem counter-intuitive, but when most widgets are given bounded constraints they try to fill the whole (bounded) space allowed, whereas when given unbounded constraints (set to INFINITY) they only take the required space (their intrinsic size). So to make a widget have its intrinsic size one can try wrapping it with UnconstrainedBox.
But it might be problematic in your case, because you are using a Row, and its height should not be unbounded..
Wrap a widget in a Container with a specific height that's the alternative of Intrinsic Height.
In Android match_parent and wrap_content are used to resize the widgets automatically relative to their parent to the content the widget contains.
In Flutter it seems by default all widgets are set to wrap_content, how would I change it such that I can fill its width and height to that of its parent?
You can do with little Trick:
Suppose you have requirement of :
( Width,Height )
Wrap_content ,Wrap_content :
//use this as child
Wrap(
children: <Widget>[*your_child*])
Match_parent,Match_parent:
//use this as child
Container(
height: double.infinity,
width: double.infinity,child:*your_child*)
Match_parent,Wrap_content :
//use this as child
Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[*your_child*],
);
Wrap_content ,Match_parent:
//use this as child
Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[your_child],
);
In order to get behavior for match_parent and wrap_content we need to
use mainAxisSize property in Row/Column widget, the mainAxisSize
property takes MainAxisSize enum having two values which is
MainAxisSize.min which behaves as wrap_content and MainAxisSize.max
which behaves as match_parent.
Link of the original Article
The short answer is that the parent doesn't have a size until the child has a size.
The way layout works in Flutter is that each widget provides constraints to each of its children, like "you can be up to this wide, you must be this tall, you have to be at least this wide", or whatever (specifically, they get a minimum width, a maximum width, a minimum height, and a maximum height). Each child takes those constraints, does something, and picks a size (width and height) that matches those constraints. Then, once each child has done its thing, the widget can can pick its own size.
Some widgets try to be as big as the parent allows. Some widgets try to be as small as the parent allows. Some widgets try to match a certain "natural" size (e.g. text, images).
Some widgets tell their children they can be any size they want. Some give their children the same constraints that they got from their parent.
There are actually some options available:
You can use SizedBox.expand to make your widget match parents dimensions, or SizedBox(width: double.infinity) to match only the width or SizedBox(heigth: double.infinity) to match only the heigth.
If you want a wrap_content behavior it depends on the parent widget you are using, for example if you put a button on a column it will behave like wrap_content and to use it like match_parent you can wrap the button with a Expanded widget or a sizedbox.
With a ListView the button gets a match_parent behavior and to get a wrap_content behavior you can wrap it with a Flex widget like Row.
Using an Expanded widget makes a child of a Row, Column, or Flex
expand to fill the available space in the main axis (e.g., horizontally for
a Row or vertically for a Column).
https://docs.flutter.io/flutter/widgets/Expanded-class.html
Using a Flexible widget gives a child of a Row, Column, or Flex the flexibility to expand to fill the available space in the main axis (e.g., horizontally for a Row or vertically for a Column), but, unlike Expanded, Flexible does not require the child to fill the available space.
https://docs.flutter.io/flutter/widgets/Flexible-class.html
Use the widget Wrap.
For Column like behavior try:
return Wrap(
direction: Axis.vertical,
spacing: 10,
children: <Widget>[...],);
For Row like behavior try:
return Wrap(
direction: Axis.horizontal,
spacing: 10,
children: <Widget>[...],);
For more information: Wrap (Flutter Widget)
I used this solution, you have to define the height and width of your screen using MediaQuery:
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width
)
To make a child fill its parent, simply wrap it into a FittedBox
FittedBox(
child: Image.asset('foo.png'),
fit: BoxFit.fill,
)
A simple workaround:
If a container has only one top level child, then you can specify alignment property for the child and give it any available value. it'll fill all the space in the container.
Container(color:Colors.white,height:200.0,width:200.0,
child:Container(
color: Colors.yellow,
alignment:Alignment.[any_available_option] // make the yellow child match the parent size
)
)
Another way:
Container(color:Colors.white,height:200.0,width:200.0,
child:Container(
color: Colors.yellow,
constraints: BoxConstraints.expand(height: 100.0), // height will be 100 dip and width will be match parent
)
)
Stack(
children: [
Container(color:Colors.red, height:200.0, width:200.0),
Positioned.fill(
child: Container(color: Colors. yellow),
)
]
),
Use FractionallySizedBox widget.
FractionallySizedBox(
widthFactor: 1.0, // width w.r.t to parent
heightFactor: 1.0, // height w.r.t to parent
child: *Your Child Here*
}
This widget is also very useful when you want to size your child at a fraction of its parent's size.
Example:
If you want the child to occupy 50% width of its parent, provide widthFactor as 0.5
Match Parent
To match or fill the parent (height & width) we can use additional constraints on Container:
Container(
constraints: BoxConstraints.expand(), // ← this guy
child: Text('Center > Container > Text')
)
In Flutter, constraints are the space you can fill (or must fill, if "tight" constraints).
Constraints are given... no actually, imposed by parents.
By default, Container will wrap its content (child:) & size itself to its child, unless overriden (or not allowed by tight constraints).
Using the constraints: argument, we can give Container additional constraints to override default Container constraint behavior (such as wrapping content).
Using Container(constraints: BoxConstraints.something) doesn't overwrite incoming/parent constraints; It just allows us to override default behavior, where allowed, such as wrapping content.
Code Sample - BoxConstraints
Here's a copy/paste code example showing effects of various constraints we can apply to a Container that has "loose" incoming/parental constraints (provided by Center).
import 'package:flutter/material.dart';
class MatchParentPage extends StatefulWidget {
#override
_MatchParentPageState createState() => _MatchParentPageState();
}
class _MatchParentPageState extends State<MatchParentPage> {
BoxConstraints constraints;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Match Parent'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded( // shares space constraint evenly with other Expanded
child: Center( // ← fills tight parent constraint & loosens ↓ child constraint ↓
child: Container( // got loose constraint from Center...
constraints: constraints, // can apply many additional constraints
color: Colors.lightBlueAccent.withOpacity(.3),
child: Text('Center > Container > Text')),
),
),
Expanded(
child: Container(
color: Colors.orangeAccent,
child: Wrap(
children: [
_button('default', null),
_button('*expand()', BoxConstraints.expand()),
_button('*tight(Size.infinite)', BoxConstraints.tight(Size.infinite)),
_button('tight(Size.zero)', BoxConstraints.tight(Size.zero)),
_button('tight(Size.fromHeight(100))', BoxConstraints.tight(Size.fromHeight(100))),
_button('tight(Size.fromWidth(100))', BoxConstraints.tight(Size.fromWidth(100))),
_button('tightForFinite(width: 100, height: 100)', BoxConstraints.tightForFinite(width: 100, height: 100)),
_button('loose(Size.infinite)', BoxConstraints.loose(Size.infinite)),
_button('tightFor(width: double.infinity)', BoxConstraints.tightFor(width: double.infinity)),
_button('tightFor(height: double.infinity)', BoxConstraints.tightFor(height: double.infinity)),
])
),
)
],
),
);
}
Widget _button(String label, BoxConstraints _constraints) {
bool _active = _constraints == constraints;
return Padding(
padding: const EdgeInsets.only(top:8, left: 8),
child: RaisedButton(
color: _active ? Colors.cyanAccent : null,
child: Text(label),
onPressed: () {
setState(() => constraints = _constraints);
},
),
);
}
}
Use this line of codes inside the Column.
For wrap_content : mainAxisSize: MainAxisSize.min
For match_parent : mainAxisSize: MainAxisSize.max
MATCH_PARENT
FractionallySizedBox(
widthFactor: 1.0, // width w.r.t to parent
heightFactor: 1.0, // height w.r.t to parent
child: ElevatedButton(
onPressed: () {},
child: Text("+"),
),
)
OR
Container(
height: double.infinity,
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
child: Text("+"),
),
)
OR
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: ElevatedButton(
onPressed: () {},
child: Text("+"),
),
)
OR
Container(
constraints: BoxConstraints.expand(),
child: ElevatedButton(
onPressed: () {},
child: Text("+"),
),
)
WRAP_CONTENT
Wrap(children: [
Container(
child: ElevatedButton(
onPressed: () {},
child: Text("+"),
),
),
])
OR
Container(
constraints: BoxConstraints.tightFor(),
child: ElevatedButton(
onPressed: () {},
child: Text("+"),
),
)
Match_parent,Wrap_content :
Row(
children: [
Expanded(
child: Container(
child: ElevatedButton(
onPressed: () {},
child: Text("+"),
),
),
),
])
Wrap_content,Match_parent :
Column(
children: [
Expanded(
child: Container(
child: ElevatedButton(
onPressed: () {},
child: Text("+"),
),
),
),
])
For match parent option you can wrap your widget by a container and give it a width like this
width: double.infinity
this approach will make the widget fill max space available for it on the screen.
As you can see, the face icon on the right is being clipped and I'm not sure why.
Here is my code:
new Container(
padding: new EdgeInsets.fromLTRB(style.wideMargin, style.wideMargin * 2,
style.wideMargin, style.wideMargin),
decoration: new BoxDecoration(backgroundColor: Colors.white),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
new Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
new PrecisionTextOverflow(
'Name of a thing',
lineWidth: style.longLineWrappingWidth,
mainTextStyle: style.blackParagraphText),
// Because PrecisionTextOverflow paints itself directly, the UI
// doesn't know its size so we use a blank Text object to make the
// column center itself correctly.
new Text(' '),
],
),
),
new Transform(
transform:
new Matrix4.translationValues(0.0, -style.defaultMargin, 0.0),
child: new IconButton(
padding: EdgeInsets.zero,
icon: new Icon(Icons.face,
size: style.headingText.fontSize,
color: style.favoriteColor[isItemFavorite]),
onPressed: favoritePressed,
),
),
],
),
)
That PrecisionTextOverflow is a class I made of a StatelessWidget that uses a CustomPainter to paint text on the screen. I don't imagine it's related to the issue at hand, but just FYI.
I've tried removing the padding from the outer container but it doesn't help. I've tried adjusting the transformation to shift the icon to the left but it just shifts it in its clipped form. What am I doing wrong? How can I correct this?
Edit:
Okay, I did a render tree dump and it looks like the enclosing Row sets its height as 24.0, which passes on down to the IconButton which gives itself a size of (24.0, 24.0). Is there a way to increase the height of a Row? Or should I rethink my whole structure?
You're setting the size on the Icon, rather than the IconButton. If you move the size argument to IconButton it should work.
What's going on is that the IconButton is defaulting to 24.0, and since you have it in an unbounded space it's being size-limited to 24.0 via a LimitedBox. It then tries to pass that size down to the Icon via an IconTheme inherited widget, but the Icon has been told to ignore that and be size 30.0 regardless.
I'll improve the docs.
I had the same problem for a different reason
Wrapping the IconButton in a Container with a fixed height and width can cause it to clip like in the example.