CODEWITHSUNDEEP
flutterdart
VOnStack
VOnStack

Reputation: 133

Horizontal scroll in TextFormField flutter on text input

I have an email input text field when I write more text than the width of this input, the rest of the text is not visible. Is there a way to have a horizontal scroll as I input into this text form field?

The following image describes the behavior I want.

HorizontalScroll in TextFormField

Edit: My Code

Container(
  width: 270,
  height: 42,
  child: new TextFormField(
    validator: (val) => val.isEmpty ? 'Enter an email' : null,
    decoration: new InputDecoration(
      icon: Icon(
        Icons.email_outlined,
      ),
      labelText: 'Email',
      border: new OutlineInputBorder(
        borderRadius: new BorderRadius.circular(25.0),
        borderSide: new BorderSide(),
      ),
    ),
    keyboardType: TextInputType.emailAddress,
    onChanged: (val) {
      setState(() => email = val);
    },
  ),
),

This is what happens when I type beyond the width of the TextFormField This is what happens when I type beyond the width of the TextFormField

Upvotes: 3

Views: 3574

Answers (1)

Zac
Zac

Reputation: 1103

There are two ways to go about this:

  1. You can add the isDense property to your TextFormField, in which case your code will look like this:
Container(
        width: 270,
        height: 42,
        child: TextFormField(
          textAlignVertical: TextAlignVertical.center,
          validator: (val) => val!.isEmpty ? 'Enter an email' : null,
          decoration: new InputDecoration(
            isDense: true,
            icon: Icon(
              Icons.email_outlined,
            ),
            labelText: 'Email',
            border: new OutlineInputBorder(
              borderRadius: new BorderRadius.circular(25.0),
              borderSide: new BorderSide(),
            ),
          ),
          keyboardType: TextInputType.emailAddress,
          onChanged: (val) {
            setState(() => email = val);
          },
        ),
      ),

This fixes the problem to an extent, however if font that extends lower(like commas, semicolons etc. still get clipped off). The next method fixes this:

  1. Use the contentPadding property, since if you check the source code, all isDense does is modify the contentPadding property's value. This is some of the actual code behind isDense:
if (decoration!.filled == true) { // filled == null same as filled == false
        contentPadding = decorationContentPadding ?? (decorationIsDense
          ? const EdgeInsets.fromLTRB(12.0, 8.0, 12.0, 8.0)
          : const EdgeInsets.fromLTRB(12.0, 12.0, 12.0, 12.0));
      } else {
        // Not left or right padding for underline borders that aren't filled
        // is a small concession to backwards compatibility. This eliminates
        // the most noticeable layout change introduced by #13734.
        contentPadding = decorationContentPadding ?? (decorationIsDense
          ? const EdgeInsets.fromLTRB(0.0, 8.0, 0.0, 8.0)
          : const EdgeInsets.fromLTRB(0.0, 12.0, 0.0, 12.0));
      }

As you can see, all Flutter does behind the scenes is assign hardcoded values to your arguments based on the parameters you've passed. In your case, the best configuration seems to be:

Container(
        width: 270,
        height: 42,
        child: TextFormField(
          textAlignVertical: TextAlignVertical.center,
          validator: (val) => val!.isEmpty ? 'Enter an email' : null,
          decoration: InputDecoration(
            contentPadding: EdgeInsets.fromLTRB(12.0, 8.0, 12.0, 8.0),
            icon: Icon(
              Icons.email_outlined,
            ),
            labelText: 'Email',
            border: new OutlineInputBorder(
              borderRadius: new BorderRadius.circular(25.0),
              borderSide: new BorderSide(),
            ),
          ),
          keyboardType: TextInputType.emailAddress,
          onChanged: (val) {
            setState(() => email = val);
          },
        ),
      ),

The above code fixes your issue, but might create more problems if your font height changes.

Upvotes: 6

Related Questions