How to achieve Expandable TextField with Center Align of text and prefixIcon in Flutter

Question

I am stuck in trying to achieve a text field with prefix Icon. I want the text field and prefixIcon to be center-aligned and should expand while typing. Any help, please

Answer 1

I think this is something you are looking for:

class HomeTest extends StatefulWidget {
  @override
  _HomeTestState createState() => _HomeTestState();
}

class _HomeTestState extends State<HomeTest> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => FocusScope.of(context).unfocus(),
      child: Scaffold(
        body: Center(
          child: SizedBox(
            width: 250.0,
            child: TextField(
              maxLines: null,
              decoration: InputDecoration(
                contentPadding: const EdgeInsets.symmetric(
                  horizontal: 10.0,
                  vertical: 12.0,
                ),
                prefixIcon: Icon(Icons.search),
                hintText: "Type Something...",
                // border: OutlineInputBorder()
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Adjustments

• Use contentPadding according to your need
• Change fontSize of the text if needed.

Answer 2

Try using this code.But the prefix icon doesn't expand increase of text. I have commented if someone could try please update it.

              Container(
                  height: somevalue..,
                  width: somevalue..,
                  alignment: Alignment.center,
                  //color: Colors.yellow,
                  child: TextField(
                    cursorHeight: somevalue..,
                    maxLines: 1,
                    maxLength: 11,
                    textDirection: TextDirection.ltr,
                    keyboardType: TextInputType.number,
                    textAlign: TextAlign.center,
                    decoration: InputDecoration(
                      counterText: "",
                    contentPadding:EdgeInsets.symmetric(horizontal: -1),
                      enabledBorder: InputBorder.none,
                      focusedBorder: InputBorder.none,
                      hintText: "\u20b90",
                       hintTextDirection: TextDirection.ltr,
                      // prefixIconConstraints:
                      //     BoxConstraints(maxWidth: 20, minWidth: 5),
                      // prefixIcon: Text(
                      //   "\u20b9",
                      //   style: TextStyle(
                      //       fontSize:
                      //           SizeUtils.horizontalBlockSize * 10),
                      // ),
                    ),
                    style: TextStyle(
                        fontSize:somevalue),
                  ),

output