TextField inside of Row it broke the code

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

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

Answer 2

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: "جستجو",
              ),
            ),
          ),
        ],
      ),
    );
  }
}