TextFormField does not follow Min / Max Line rules as indicated.

Flutter 2.0.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision c5a4b40 (5 weeks ago) • 2021-03-04 09:47:48 -0800

In reference to #27205

The behaviour for minLines and maxLines being set along with expands = false to avoid the textField from growing outside that does not work.

How do you achieve the behaviour for example to have min lines as 1 and max lines as 5

the textfield start with a line size of 1 and grows until 5. After line 5 instead of growing vertically via scroll it should stop user input.

I have a hack that creates a input formatter with regex replacement... there has to be a better way tho

class MaxLineInputFormatter extends TextInputFormatter {
  MaxLineInputFormatter({int maxLines}) {
    _exp = new RegExp("^(?:[^\n-\r\x85]*(?:\r\n?|[\n-\f\x85])){0,$maxLines}[^\n-\r\x85]*\$");
  }

  RegExp _exp;

  @override
  TextEditingValue formatEditUpdate(
    TextEditingValue oldValue,
    TextEditingValue newValue,
  ) {
    print('newValue: $newValue');
    print('oldValue: $newValue');

    if (_exp.hasMatch(newValue.text)) {
      return newValue;
    }

    return oldValue;
  }
}

@zaidkazi

Hi @zaidkazi
Thanks for filing the issue, it does keep scrolling and doesn't stop with following code, while your workaround seems to be fix the issue

              TextField(
                minLines: 1,
                maxLines: 5,
                expands: false,
              ),

Here I created a complete runnable code sample to demonstrate the issue with and without `MaxLineInputFormatter`

code sample

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      theme: ThemeData.dark(),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material App Bar'),
      ),
      body: Center(
        child: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("Without MaxLineInputFormatter"),
              TextField(
                minLines: 1,
                maxLines: 5,
                expands: false,
              ),
              Text("With MaxLineInputFormatter"),
              TextField(
                minLines: 1,
                maxLines: 5,
                expands: false,
                inputFormatters: [
                  MaxLineInputFormatter(maxLines: 5),
                ],
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {},
      ),
    );
  }
}

class MaxLineInputFormatter extends TextInputFormatter {
  MaxLineInputFormatter({required int maxLines}) {
    _exp = new RegExp(
        "^(?:[^\n-\r\x85]*(?:\r\n?|[\n-\f\x85])){0,$maxLines}[^\n-\r\x85]*\$");
  }

  late RegExp _exp;

  @override
  TextEditingValue formatEditUpdate(
    TextEditingValue oldValue,
    TextEditingValue newValue,
  ) {
    print('newValue: $newValue');
    print('oldValue: $newValue');

    if (_exp.hasMatch(newValue.text)) {
      return newValue;
    }

    return oldValue;
  }
}

Preview

Screen.Recording.2021-04-12.at.11.35.40.AM.mov

flutter doctor -v

[✓] Flutter (Channel stable, 2.0.4, on macOS 11.2.3 20D91 darwin-x64, locale
    en-GB)
    • Flutter version 2.0.4 at /Users/tahatesser/Code/flutter_stable
    • Framework revision b1395592de (10 days ago), 2021-04-01 14:25:01 -0700
    • Engine revision 2dce47073a
    • Dart version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/SDK
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.55.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 11.2.3 20D91 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 89.0.4389.114

• No issues found!

[✓] Flutter (Channel master, 2.1.0-13.0.pre.574, on macOS 11.2.3 20D91
    darwin-x64, locale en-GB)
    • Flutter version 2.1.0-13.0.pre.574 at
      /Users/tahatesser/Code/flutter_master
    • Framework revision 02efffc134 (2 days ago), 2021-04-10 03:49:01 -0400
    • Engine revision 8863afff16
    • Dart version 2.13.0 (build 2.13.0-222.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/SDK
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.55.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 11.2.3 20D91 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 89.0.4389.114

• No issues found!

My fix is not ideal as I just realized text input formatters don't take into account the existing state of a TextField if we have a textfield that can be saved and edited again. Text input formatter's will only apply rules on the new text and ignore what existing text is present.

Hence I think this issue is pretty important.

The intention of minLines/maxLines is to set the size of the field, not the content, so I think this is working as intended. I admit I haven't thought much about how to limit the number of lines of content though. I think I would do it with an input formatter like you are doing. I think you'll have to manually apply your formatter to any text that is programmatically loaded into the TextField.

Maybe we can update the docs for minLines/maxLines to make this more clear? Is there anything else we should do to make this more straightforward?

Honestly the text input formatter feels pretty hacky I guess a documentation update would help to make it straight forward but ideally if we could bake the logic into the text field itself it would be a much better experience

I'm going to close this as fixed by #85138, but if anyone else is struggling with limiting the number of lines the user can enter, please give a 👍 to this issue or comment. Maybe we can get this line limiting input formatter added to the framework if enough people think it would be useful.

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

TextFormField does not follow Min / Max Line rules as indicated. #80133

Here I created a complete runnable code sample to demonstrate the issue with and without `MaxLineInputFormatter`

Preview

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

TextFormField does not follow Min / Max Line rules as indicated. #80133

Description

Activity

zaidkazi commented on Apr 9, 2021

TahaTesser commented on Apr 12, 2021

Here I created a complete runnable code sample to demonstrate the issue with and without MaxLineInputFormatter

Preview

zaidkazi commented on Apr 19, 2021

justinmc commented on Jun 23, 2021

zaidkazi commented on Jun 24, 2021

justinmc commented on Jun 24, 2021

github-actions commented on Jul 31, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Here I created a complete runnable code sample to demonstrate the issue with and without `MaxLineInputFormatter`