how add text and icon inside TextFormField in flutter-CodePudding

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

_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

CodePudding user response：

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),
      ),
    )

CodePudding user response：

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