RenderFlex children have non-zero flex error with textfield flutter - flutter

Question

I'm trying to create this design: https://www.uplabs.com/posts/public-transport-app-design?utm_source=extension&utm_medium=click&utm_campaign=muzli (the top of the first one)
But i'm having this issue: renderflex children have non-zero flex but incoming height constraints are unbounded
This is my code:
Scaffold(
body: Container(
width: double.infinity,
height: double.infinity,
child: Stack(
children: [
Positioned(
left: 0,
right: 0,
child: Container(
width: double.maxFinite,
height: MediaQuery.of(context).size.height / 1.5,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/abstract2.jpg"),
fit: BoxFit.cover)),
)),
Positioned(
left: 0,
top: 5,
child: SizedBox(
height: 20.0,
child: Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Expanded(child: TextField()),
Icon(Icons.person)
],
),
),
)),
The thing is when I remove replace the TextField() with Text(), the error disapear. I don't know what i'm doing wrong.
Can you help me please ? Thanks

Answer 1

try this.
Stack(
children: [
/// this is usefull cause it says that the stack will cover all of the screen
SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
),
///place your image here
Container(
height: MediaQuery.of(context).size.height*0.5,
decoration: const BoxDecoration(color: Colors.red),
// decoration: const BoxDecoration(
// image: DecorationImage(
// image: AssetImage("assets/images/abstract2.jpg"),
// fit: BoxFit.cover)),
),
///text field ned a width or to be flexible to work.
Positioned(
width: MediaQuery.of(context).size.width,
top: MediaQuery.of(context).size.height *0.3,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: TextFormField(
maxLines: 1,
keyboardType: TextInputType.multiline,
textInputAction: TextInputAction.next,
decoration: InputDecoration(
fillColor: StyleConstants.whiteColor,
filled: true,
border: StyleConstants.defaultBorder,
focusedBorder: StyleConstants.focusedBorder,
enabledBorder: StyleConstants.defaultBorder,
contentPadding: const EdgeInsets.symmetric(
vertical: 20.0, horizontal: 20.0),
),
),
), Icon(Icons.person)],
),
)
],
)

Answer 2

Try this buddy, I think the problem is caused by using expanded in sizedbox. I usually get this error when I use a TextField in a Row. In such cases, you need to wrap the TextField in a SizedBox or Container and define its width and height, or wrap it in a Flexible Widget. Then it is resolved.
child: SizedBox(
height: 20.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Expanded(child: TextField()),
Icon(Icons.person)
],
),