How to solve: How can I make my TextField look like the following (FLUTTER)


Asked by Moritz on January 02, 2022 (source).

So in my Design, I have my Textfields like this: enter image description here

how can I make that in Flutter?


Question answered by Amir H (source).

I didn’t know the correct size and colors so change them based on your design, if you wish you can use your icon asset instead of Icons class.

  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;

    return Scaffold(
      body: Center(
        child: Container(
          width: width * 0.8,
          height: height * 0.07,
          padding: EdgeInsets.all(width * 0.03),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(6),
              color: Colors.white,
              border: Border.all(color: Colors.grey)),
          child: Center(
            child: Row(
              children: <Widget>[
                const Icon(
                  color: Colors.grey,
                  width: width * 0.04,
                const Expanded(
                  child: TextField(
                    decoration: InputDecoration.collapsed(
                        hintText: '[email protected]',
                        hintStyle: TextStyle(color: Colors.grey)),

enter image description here

Video Answers on YouTube