Flutter - Textfield label overflow cutting off text

Question

I am working on a Flutter project, I have implemented a Form with a TextFormField, we have some fields with really long labels, and because they are so long, Flutter us cutting the text off and adding ... in the end, is it possible to set the overflow so it makes the label text in to 2 lines instead of cutting the text off?

TextFormField(
          key: GlobalKey(),
          controller: _textEditingController,
          focusNode: _focusNode,
          obscureText: true,
          keyboardType: TextInputType.text,
          textInputAction: TextInputAction.done,
          decoration: widget.decorations.copyWith(
            errorText:
                widget.field["error"] != null ? widget.field["error"] : null,
            labelText: "A VERY VERY VERY VERY VERY VERY LONG LABEL",
            hintText: widget.field["helpText"],
            helperStyle: TextStyle(
              color: Colors.black,
            ),
          ),
          onFieldSubmitted: widget.onFieldSubmitted,
          onSaved: widget.onSaved,
          onTap: widget.onTap,
        ),

Hi, thanks for your reply, I don't think this will work for a textfield label, — Billy Mahmood, Feb 17 '20 at 09:37
Why not like plain html, you add a title attribute and when someone hover on it the label will appear, a trick. — Utkarsh Dubey, Feb 17 '20 at 09:42
I am sure the `labelText: "A VERY VERY VERY VERY VERY VERY LONG LABEL",` requires a string and you can not assign it a Widget — Billy Mahmood, Feb 17 '20 at 10:34
`maxLines` attribute available for `TextFormField` mentioned in your example here. Check this, https://stackoverflow.com/questions/45900387/multi-line-textfield-in-flutter and this, https://stackoverflow.com/questions/43348254/automatically-scroll-multiline-textformfield-when-it-extends-the-maxlines-attrib — Utkarsh Dubey, Feb 18 '20 at 09:52
Sorry I am talking about the label cutting off, not the value. — Billy Mahmood, Feb 18 '20 at 10:13
I got to know, I saw another thread which is telling exactly same that it will increase height of field not `labelText`. One more thing if you have only one line then you can use `hintText`. — Utkarsh Dubey, Feb 18 '20 at 10:24
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/208041/discussion-between-utkarsh-dubey-and-user3057745). — Utkarsh Dubey, Feb 18 '20 at 11:42
You need to think differently it's still a bug, https://github.com/flutter/flutter/issues/30439 — Utkarsh Dubey, Feb 18 '20 at 12:08
Try CSS if possible, like [CSS Scrolling Text](https://www.html.am/html-codes/marquees/css-scrolling-text.cfm) or `white-space: pre-wrap;` — Utkarsh Dubey, Feb 18 '20 at 14:55

score 3 · Answer 1 · answered Jan 27 '21 at 19:36

3

I found this solution while I was trying to solve the same problem. Try using the decoration property with the errorMaxLines property set to a number greater than 1. E.g.

TextField(
     keyboardType: TextInputType.number,
     decoration: InputDecoration(
     errorMaxLines: 2,),)

answered Jan 27 '21 at 19:36

abene42

47
7

2

The solution you have provided is about error text not labelText – Peter Oct 01 '21 at 18:17

score 1 · Answer 2 · answered Nov 02 '22 at 08:33

1

It works for me....

TextFormField(

 decoration: InputDecoration(
 label: Text(
      "A VERY VERY VERY VERY VERY VERY LONG LABEL",
    ),)

answered Nov 02 '22 at 08:33

Dinesh

21
1
3

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 04 '22 at 20:33
This seems to work to allow the 2nd line of text but doesn't maintain the same space between the bottom of the 2nd line of the label and the field itself. – Matt Booth Apr 26 '23 at 11:34

score 0 · Answer 3 · answered Apr 26 '23 at 11:55

I worked through all the other answers, and this is the only one that worked for me. The Container has a transform property allowing us to essentially use negative margins, use it in Decoration to give more space for 2 lines of a label which don't encroach on your field.

decoration: InputDecoration(
    contentPadding: EdgeInsets.only(top: 5, bottom: 5),
    label: Container(
      transform: Matrix4.translationValues(0.0, -15.0, 0.0),
      child: const Text(
          'Label text here. This also allows you to have long lable text as you can use the space for 2 lines.'),
    ),
  ),

score 0 · Answer 4 · answered Aug 02 '23 at 05:30

0

u can use labelStyle's overFlow parameter to do as u want;

labelText: "hii there",
labelStyle: TextStyle(overflow: TextOverflow...... )

answered Aug 02 '23 at 05:30

Jubayer Al

1
1

Flutter - Textfield label overflow cutting off text

4 Answers4