Automatically scroll multiline TextFormField when it extends the maxLines attribute

Question

I'm implementing a TextFormField with the maxLines attribute set to 3. How can I make the TextFormField scroll down once the user starts with his fourth line? At the moment the cursor is just not visible anymore until the user scrolls down by hand. Is there a way to do this automatically?

This behaviour is actually featured in the flutter_gallery app in the 'Text fields' example. Just type a long text to the 'Live story' input until it reaches the fourth line.
The important parts of my code actually look like this:

import 'package:flutter/material.dart';

class TextFormFieldDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Form(
        child: new TextFormField(
          maxLines: 3,
        ),
      ),
    );
  }
}

So far I have found no workaround for this issue.
This issue affects both iOS and android.

PS: This also affects single line TextFields. One would expect the text to scroll to the left once the end of the line is reached, but it doesn't. — Rainer Wittmann, Apr 11 '17 at 14:06

score 18 · Answer 1 · answered Feb 09 '18 at 18:37

Our team accomplished this by nesting some existing widgets:

// create the illusion of a beautifully scrolling text box
return new Container(
    color: Colors.gray,
  padding: new EdgeInsets.all(7.0),

  child: new ConstrainedBox(
    constraints: new BoxConstraints(
      minWidth: _contextWidth(),
      maxWidth: _contextWidth(),
      minHeight: AppMeasurements.isLandscapePhone(context) ? 25.0 : 25.0,
      maxHeight: 55.0,
    ),

    child: new SingleChildScrollView(
      scrollDirection: Axis.vertical,
      reverse: true,

        // here's the actual text box
        child: new TextField(
          keyboardType: TextInputType.multiline,
          maxLines: null, //grow automatically
          focusNode: mrFocus,
          controller: _textController,
          onSubmitted: currentIsComposing ? _handleSubmitted : null,
          decoration: new InputDecoration.collapsed(
            hintText: ''Please enter a lot of text',
          ),
        ),
        // ends the actual text box

      ),
    ),
  );
}

We had help from Darky to get widget ordering and the correct widgets to make it work.

Did anyone got this running for the CupertinoTextBox? Though MaxLines=null is also supposed to create a growing field, no scroll bar shows up — w461, Aug 31 '20 at 08:40
@w461: using a CupertinoTextField will add scrollbars automatically but maxLines can't be null. Scrollbars are added the moment the contents of the text field exceeds maxLines. E.g. if maxLines is 3 and the text occupies 4 lines, a scrollbar is added. — JohnV, Mar 20 '22 at 00:12

score 7 · Accepted Answer · answered Apr 13 '17 at 04:49

7

This appears to be a missing feature in the Flutter Framework, I've filed a bug to get it resolved: https://github.com/flutter/flutter/issues/9365

answered Apr 13 '17 at 04:49

Eric Seidel

3,282
1
15
22

score 5 · Answer 3 · answered Aug 19 '20 at 10:48

5

You can use BoxConstraints and set maxHeight of your TextField

Container(
  constraints: BoxConstraints(maxHeight: 100),
  child: SingleChildScrollView(
    child: TextField(
      maxLines: null,
    ),
  ),
);

answered Aug 19 '20 at 10:48

Abdurahman Popal

2,859
24
18

score 5 · Answer 4 · answered Sep 16 '20 at 02:53

With the latest flutter 1.20.4, this text field will scroll when it rich the max hight.

       Container(
          constraints: BoxConstraints(maxHeight: 200),
             child: TextField(
                maxLines: null,
                 .......
                )
            )

If you are using the Textfield inside Raw or column wrap it in Expanded widget

score 2 · Answer 5 · answered Mar 14 '20 at 08:48

I made it work like this. Hope it helps!

return new Card(
                shape: RoundedRectangleBorder(
                 side: BorderSide(
                   color: Colors.deepPurpleAccent,
                   width: 1
                 ),
                  borderRadius: BorderRadius.circular(3)
                ),
                child: Container(
                  height: 50,
                  child: SingleChildScrollView(
                    child: TextField(
                      maxLines: null,
                    ),
                  ),
                ),
              );

score 2 · Answer 6 · answered May 09 '22 at 23:01

2

I solve this with ScrollController.

ScrollController textFieldScrollController = ScrollController();

TextField(
  scrollController: textFieldScrollController,
  keyboardType: TextInputType.multiline,
  minLines: null,
  maxLines: null,
  onChanged: (value) {
    textFieldScrollController.jumpTo(textFieldScrollController.position.maxScrollExtent);
  },
),

answered May 09 '22 at 23:01

include life

21
3

Great,it works nicely. – Thusitha Deepal Oct 27 '22 at 06:40

score 1 · Answer 7 · answered May 08 '21 at 15:22

Just Use TextFormField() widget & set minLines= and maxLines= . The missing thing is here Scroll indicator.

 TextFormField(
                    minLines: 3,
                    maxLines: 3,
                    key: _messageValueKey,
                    decoration: _inputDecoration,
                  ),

score -3 · Answer 8 · answered Jan 10 '22 at 21:20

Just add the 'reverse: true' to your Scrollable Widget, like so:

    Widget build(BuildContext context) {
      return Container(
        width: MediaQuery.of(context).size.width,
        height: 130.0,
        decoration: BoxDecoration(
          border: Border.all(color: Colors.purpleAccent),
        ),
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          reverse: true,
          child: Text(
            '$message',
            maxLines: 2,
            style: TextStyle(fontSize: 30),
          ),
        ),
      );
    }
  }

Automatically scroll multiline TextFormField when it extends the maxLines attribute

8 Answers8

Linked