How do I remove content padding from TextField?

Question

I am new to flutter and I am creating login form, for that I have used TextField and added prefix icon but I am getting some extra spaces in between textfields (user id and pin

Answer 1

I had to achieve something similar but could not find perfect solution. Came up with and work around using Stack widget.

Widget _username(context){
  return SizedBox(
    height: 35,
    child: Stack(
      children: [
        Align(
          alignment: Alignment.centerLeft,
          child: Icon(
            Icons.mail,
            size: 20,
            color: Theme.of(context).accentColor,
          ),
        ),
        TextField(
          style: TextStyle(
              color: Colors.white
          ),
          decoration: InputDecoration(
            contentPadding: const EdgeInsets.symmetric(vertical: 11.0, horizontal: 33.0),
            hasFloatingPlaceholder: false,
            labelText: 'Username',
            labelStyle: TextStyle(
                color: Colors.white
            ),
            enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(
                  color: Theme.of(context).accentColor,
                )
            ),
            focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(
                color: Theme.of(context).accentColor,
              ),
            ),
          ),
        ),
      ]
    ),
  );
}

SizedBox is used to control the vertical padding. For horizontal padding, Icon and TextField are stacked. This results overlapped TextField's label above Icon so contentPadding property is used to move the label to the right. With this I achieved following look.