如何在 flutter 中的 TextFormField 中添加文本和图标

Question

i want to make the text and icon inside TextFormField this is my code

enter image description here

_FormField() {
    return TextFormField(
      validator: (value) {
        if (value!.isEmpty) {
          print("test");
        }
      },
      decoration: InputDecoration(
        fillColor: kPrimaryLightColor,
        filled: true,
        focusColor: kPrimaryLightColor,
        border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(30),
            borderSide: BorderSide.none),
        //hintText: 'Email'
        //hintStyle: TextStyle(color: Colors.black38),
        labelText: 'Email',
        labelStyle: TextStyle(color: kPrimaryColor),
        //icon: Icon(Icons.email),
        icon: Icon(Icons.email_outlined),
      ),
    );
  }

i want it like that

enter image description here

Answer 1

You can use prefixIcon and suffixIcon of inputDecoration to add icons inside the field. If you want the field label only within the field and not as a label above it, specify only hintText and leave out LabelText . Check the following code, you can wrap the icons inside a Padding if you need more space.

TextFormField(
      validator: (value) {
        if (value!.isEmpty) {
          print("test");
        }
      },
      decoration: InputDecoration(
        prefixIcon: Icon(Icons.email_outlined),
        fillColor: Colors.grey,
        filled: true,
        focusColor: Colors.blue,
        border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(30),
            borderSide: BorderSide.none),
        hintText: 'Email',
        suffixIcon: Icon(Icons.email_outlined),
      ),
    )

Answer 2

your can use prefixIcon and suffixIcon which takes widget. In which you can give Icon to the prefixIcon and to the suffixIcon you can give IconButton in which you can give the logic to hide/show password. To implement the logic declare a boolean variable which is used for if the password is to be shown or hidden. the logic must be like this.

bool showPassword=false;
_FormField() {
    return TextFormField(
       obscureText: !showPassword,
      validator: (value) {
        if (value!.isEmpty) {
          print("test");
        }
      },
      decoration: InputDecoration(
suffixIcon:IconButton(icon:showPassword?Icon(Icons.lock):Icon(Icons.lock_open),
onPressed:(){
setState(() {
      showPassword=!showPassword;
   });
}
)
  ),
    );
  }

The code is not formatted well sorry for that I write it manual here