flutter unbounded width of TextField in a Stack widget: An InputDecorator, which is typically created by a TextField, cannot have an unbounded width - flutter

Question

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?

Answer 1

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: () {},
),
),
],
),
),
],
),
);
}