Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Automatically scroll multiline TextFormField when it extends the maxLines attribute

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.

like image 452
Rainer Wittmann Avatar asked Apr 11 '17 14:04

Rainer Wittmann


People also ask

How do I use TextFormField in flutter?

How to Handle Input Data In TextFormField In Flutter Using Controller. To handle user input in TextFormField, create an object of TextEditingController class. Create a TextEditingController object like below and assign it to the controller property of TextFormField. Its object will hold the input data.

How do you Autoscroll text in flutter?

TextScroll Flutter widget adds text auto-scrolling functionality (marquee text).

How do you expand a text field in flutter?

In Flutter, you can create an auto-resize as needed TextField (or TextFormField) in one of the following ways: Set the maxlines argument to null. The textfield can expand forever if a lot of text is entered. Set minLines to 1 and maxLines to N (a possitive integer).


3 Answers

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

like image 162
Eric Seidel Avatar answered Oct 18 '22 19:10

Eric Seidel


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.

like image 16
Deborah Avatar answered Oct 18 '22 20:10

Deborah


You can use BoxConstraints and set maxHeight of your TextField

Container(
  constraints: BoxConstraints(maxHeight: 100),
  child: SingleChildScrollView(
    child: TextField(
      maxLines: null,
    ),
  ),
);
like image 4
Abdurahman Popal Avatar answered Oct 18 '22 19:10

Abdurahman Popal