TextField inside of Row it broke the code - flutter

Question

I'm trying to make a custom search widget. when I add TextField inside of Row it broke the code.
My code without TextField.
import 'package:flutter/material.dart';
class SearchWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.yellowAccent,
borderRadius: BorderRadius.circular(500),
),
child: Row(
children: [
Container(
decoration: BoxDecoration(
color: Colors.redAccent,
borderRadius: BorderRadius.circular(500),
),
child: IconButton(icon: Icon(Icons.search), onPressed: () {}),
),
],
),
);
}
}
But after adding TextField everything will gon.
my code with TextField inside of Row.
import 'package:flutter/material.dart';
class SearchWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.yellowAccent,
borderRadius: BorderRadius.circular(500),
),
child: Row(
children: [
Container(
decoration: BoxDecoration(
color: Colors.redAccent,
borderRadius: BorderRadius.circular(500),
),
child: IconButton(icon: Icon(Icons.search), onPressed: () {}),
),
TextField(
decoration: InputDecoration(
labelText: "جستجو",
),
),
],
),
);
}
}
I hade this problem in other cases, I think it's any problem with the Row and Column.

Answer 1

Try this way
You need to wrap your TextField inside Expanded widget
class SearchWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.yellowAccent,
borderRadius: BorderRadius.circular(500),
),
child: Row(
children: [
Container(
decoration: BoxDecoration(
color: Colors.redAccent,
borderRadius: BorderRadius.circular(500),
),
child: IconButton(icon: Icon(Icons.search), onPressed: () {}),
),
Expanded(
child: TextField(
decoration: InputDecoration(
labelText: "جستجو",
),
),
),
],
),
);
}
}

Answer 2

I think you don't even need the Container just to create a circular rectangle text field because the textField has enableBorder, disableBorder, and border as its properties to make its border circular and you can suffix/prefix IconButton for the search implementation, but if you want to implement it the with the container I have a similar code:
Row(
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(24)),
child: TextFormField(
autovalidate: true,
autocorrect: true,
textInputAction: TextInputAction.search,
onFieldSubmitted: (val) {
_search();
},
onChanged: (val) {
// Your Code
},
controller: _controller,
decoration: InputDecoration(
hintText: 'Search',
contentPadding: const EdgeInsets.only(left: 24.0),
border: InputBorder.none),
),
),
),
IconButton(
icon: Icon(
Icons.search,
color: Colors.white,
),
onPressed: () {
_search();
})
],
),
Let me know if you need the TextField circular border code I'll be happy to help you