TextFormField in flutter

Question

I have a problem. I create a TextFormField. When text length is so lengthy, I want textField will display as the below image. Help me. Thank you.

This is code:

TextFormField(
            controller: nameController,
            enabled: false,
            textInputAction: TextInputAction.next,
            keyboardType: TextInputType.emailAddress,
            style: TextUtil.regularArial.copyWith(
              fontSize: ScreenUtil.getInstance().setSp(14),
              color: ColorUtil.grey8E8E8E,
            ),
            decoration: InputDecoration(
              fillColor: Colors.white,
              filled: true,
              isDense: true,
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(6)),
                borderSide: BorderSide(color: Colors.white, width: 1),
              ),
              hintText: "Email",
              hintStyle: TextUtil.regularArial.copyWith(
                fontSize: ScreenUtil.getInstance().setSp(14),
                color: ColorUtil.grey7A7A7A,
              ),
            ),
            validator: (value){
             
            },
          ),

you can achieve this in a text with overflow: ellipsis property. You could also try @youOne's answer below. Check this out: https://stackoverflow.com/questions/44579918/flutter-wrap-text-on-overflow-like-insert-ellipsis-or-fade — CoderUni, Jun 21 '20 at 04:14

score 1 · Answer 1 · answered Jun 21 '20 at 04:11

1

Try add maxLines: null

TextFormField(maxLines: null)

If the maxLines property is null, there is no limit to the number of lines, and the wrap is enabled.

answered Jun 21 '20 at 04:11

Aldy Yuan

1,795
9
23

I used maxLines: null but it only expand height TextField – Chung Jun 21 '20 at 05:44
I want to display TextFormField on only one line – Chung Jun 21 '20 at 05:45
I'm sorry I don't know the answer, and why would you do that anyway someone input their email address and they can't see the rest of the email. But if you trying to do it with Text you can try adding TextOverflow.ellipsis `Text("Very Long Text", overflow: TextOverflow.ellipsis)` it will work like charm – Aldy Yuan Jun 21 '20 at 12:14
No matter, Thank for your helping. – Chung Jun 21 '20 at 12:45

TextFormField in flutter

1 Answers1