How can i put the icon on the left top in my textFormField/ textfield?

Issue

I have an textfield but the problem is that the icon is still centered in the middel while the textfield is expanded. How can i make the icon go on the left site of the hint text (left top)?

TextFormField reusableTextField2(String text, IconData icon,TextEditingController controller) {
  return TextFormField(

    controller: controller,
    cursorColor: Colors.white,
    style: TextStyle(color: Colors.white.withOpacity(0.9)),

    decoration: InputDecoration(
      
      prefixIcon: Icon(

        icon,
        color: Colors.white70,

      ),
      border: OutlineInputBorder(borderRadius: BorderRadius.circular(30.0),
          borderSide: const BorderSide(width: 0, style: BorderStyle.none)),
      contentPadding: EdgeInsets.symmetric(vertical: 20, horizontal: 20),


      labelText: text,
      labelStyle: TextStyle(color: Colors.white.withOpacity(0.9)),
      filled: true,
      floatingLabelBehavior: FloatingLabelBehavior.never,
      fillColor: Colors.white.withOpacity(0.3),
      alignLabelWithHint: true,
    ),
    maxLines: null,
    minLines: 7,
  );
}

This is the TextField

enter image description here

enter image description here

Solution

You can wrap it with Stack widget, then set the icon separately, but so it gets aligned vertically the same as the TextFormField widget, give it a vertical padding same as the TextFormField‘s contentPadding. like this:

Widget reusableTextField2(
    String text, IconData icon, TextEditingController controller) {
  final verticalPadding = EdgeInsets.symmetric(vertical: 20);
  return Stack(
    children: <Widget>[
      TextFormField(
        controller: controller,
        cursorColor: Colors.white,
        style: TextStyle(color: Colors.white.withOpacity(0.9)),
        decoration: InputDecoration(
          border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(30.0),
              borderSide: const BorderSide(width: 0, style: BorderStyle.none)),
          contentPadding:
              verticalPadding + EdgeInsets.symmetric(horizontal: 20),
          labelText: text,
          labelStyle: TextStyle(color: Colors.white.withOpacity(0.9)),
          filled: true,
          floatingLabelBehavior: FloatingLabelBehavior.never,
          fillColor: Colors.black.withOpacity(0.3),
          alignLabelWithHint: true,
        ),
        maxLines: null,
        minLines: 7,
      ),
      Container(
        padding: verticalPadding,
        child: Icon(icon),
      ),
    ],
  );
}

Answered By – Gwhyyy

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published