Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

flutter space between inputTextForm field and bottom border

enter image description here enter image description here enter image description here

Everything works fine except the space between the elements/user input and bottom bar. I tried different methods to get rid of that space: content padding, box constraints, prefix icon constraints etc. None worked. Eventually I limited the height of this widget, but then my error message was placed on top of user input and I was getting this message Another exception was thrown: BoxConstraints has a negative minimum height.
Here is the code:

 Widget _emailField(FormBloc formBloc) {
    return StreamBuilder(
        stream: formBloc.email,
        builder: (context, AsyncSnapshot<String> snapshot) {
          return TextFormField(
            autofocus: false,
            keyboardType: TextInputType.emailAddress,
            autovalidateMode: AutovalidateMode.onUserInteraction,
            validator: (value) {
              if (value == null) {
                return "Email cannot be empty";
              } else {
                if (value.isEmpty) {
                  return "Email cannot be empty";
                }
              }
            },
            onChanged: formBloc.changeEmail,
            textInputAction: TextInputAction.next,
            decoration: InputDecoration(
              prefixIcon: const Icon(
                Icons.email,
                size: 15,
              ),
              contentPadding: const EdgeInsets.all(0),
              labelText: "Email",
              labelStyle: const TextStyle(fontSize: 14),
              errorText:
                  snapshot.error != null ? snapshot.error as String : null,
            ),
          );
        }
      );
  }

I need to make everything work as before, except this time I do need to have no space between bottom border and input elements, how can I do so?

like image 206
Aleksandre Bregadze Avatar asked Nov 21 '25 12:11

Aleksandre Bregadze


1 Answers

First inside InputDecoration(), you can give zero padding to your prefix icon. Then set prefixIconConstraints to BoxConstraints(maxHeight:0) Still isn't enough you can give negative value to contentPadding: EdgeInsets.only(bottom:-5),.

InputDecoration(
          prefixIcon: Padding(
            padding: EdgeInsets.only(right:10),
            child:const Icon(
              Icons.email,
              size: 15,
            ),
          ),
          prefixIconConstraints: BoxConstraints(maxHeight:0),
          contentPadding: EdgeInsets.only(bottom:-5),
          labelText: "Email",
          labelStyle: const TextStyle(fontSize: 14),
          errorText:"error",
        )
like image 120
Chirag Bargoojar Avatar answered Nov 23 '25 07:11

Chirag Bargoojar



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!