Skip to content

TextField hint is ellided at one line with maxLines: null #46182

Closed
Closed
TextField hint is ellided at one line with maxLines: null#46182
Labels
a: text inputEntering text in a text field or keyboard related problemsc: API breakBackwards-incompatible API changesfound in release: 2.5Found to occur in 2.5found in release: 2.6Found to occur in 2.6frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Description

@justinmc
justinmc
opened on Dec 5, 2019

Most multiline TextFields expand to accommodate their hint, except when maxLines is null. Instead, it should accommodate the hint when maxLines is null as well. This would reduce confusion and allow a TextField that grows to any size to accommodate the hint, which is currently not possible.

Correct Case

Setting maxLines allows the TextField to increase in size to fit as much of the hint as possible:

TextField(
  minLines: null,
  maxLines: 2,
  decoration: InputDecoration(
    hintText: 'To be, or not to be, that is the question. Whether \'tis nobler in the mind to suffer the slings and arrows of outrageous fortune, or to take arm against a sea of trouble, and by opposing, end them.',
  ),
)

flutter_29

Incorrect Case

However, when maxLines is null, the TextField stays at 1 line regardless of the length of the hint:

TextField(
  minLines: null,
  maxLines: null,
  decoration: InputDecoration(
    hintText: 'To be, or not to be, that is the question. Whether \'tis nobler in the mind to suffer the slings and arrows of outrageous fortune, or to take arm against a sea of trouble, and by opposing, end them.',
  ),
)

flutter_30

Activity

  1. justinmc
    added
    a: text inputEntering text in a text field or keyboard related problems
    frameworkflutter/packages/flutter repository. See also f: labels.
    c: API breakBackwards-incompatible API changes
    on Dec 5, 2019
  2. HansMuller
    added
    p: material_uimaterial_ui package in flutter/packages
    on Dec 9, 2019

  3. TahaTesser commented on Apr 7, 2020

    @TahaTesser
    TahaTesser
    on Apr 7, 2020
    Contributor

    Issue still exist

    Code Sample

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material App Bar'),
        ),
        body: Center(
          child: TextField(
            minLines: null,
            maxLines: null,
            decoration: InputDecoration(
              hintText:
                  'To be, or not to be, that is the question. Whether \'tis nobler in the mind to suffer the slings and arrows of outrageous fortune, or to take arm against a sea of trouble, and by opposing, end them.',
            ),
          ),
        ),
      ),
    );
  }
}
    flutter doctor -v 
    [✓] Flutter (Channel dev, v1.18.0, on Mac OS X 10.15.4 19E266, locale en-GB)
    • Flutter version 1.18.0 at /Users/taha/Code/flutter_dev
    • Framework revision de1e572916 (13 hours ago), 2020-04-06 16:15:07 -0700
    • Engine revision df257e59c2
    • Dart version 2.8.0 (build 2.8.0-dev.20.0 1210d27678)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/taha/Code/sdk
    • Platform android-29, build-tools 29.0.3
    • ANDROID_HOME = /Users/taha/Code/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_212-release-1586-b4-5784211)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.4)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.4, Build version 11E146
    • CocoaPods version 1.9.1

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

[✓] Android Studio (version 3.6)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 45.0.1
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build
      1.8.0_212-release-1586-b4-5784211)

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

[✓] Connected device (5 available)
    • SM M305F      • 32003c30dc19668f          • android-arm64  • Android 10
      (API 29)
    • Taha’s iPhone • 00008020-001059882212002E • ios            • iOS 13.4
    • macOS         • macOS                     • darwin-x64     • Mac OS X
      10.15.4 19E266
    • Chrome        • chrome                    • web-javascript • Google Chrome
      80.0.3987.149
    • Web Server    • web-server                • web-javascript • Flutter Tools

• No issues found!
  4. TahaTesser
    added
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    on Apr 7, 2020
  5. TahaTesser
    added
    found in release: 1.18Occurs in 1.18
    on Apr 24, 2020

  6. TahaTesser commented on Dec 18, 2020

    @TahaTesser
    TahaTesser
    on Dec 18, 2020
    Contributor
    multiple flutter doctor -v 
    [✓] Flutter (Channel stable, 1.22.5, on macOS 11.1 20C69 darwin-x64, locale
    en-GB)
    • Flutter version 1.22.5 at /Users/tahatesser/Code/flutter_stable
    • Framework revision 7891006299 (8 days ago), 2020-12-10 11:54:40 -0800
    • Engine revision ae90085a84
    • Dart version 2.10.4

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-30, build-tools 30.0.2
    • ANDROID_HOME = /Users/tahatesser/Code/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 12.3)
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.0

[!] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)

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

[✓] Connected device (2 available)
    • RMX2001 (mobile)     • EUYTFEUSQSRGDA6D          • android-arm64 • Android
      10 (API 29)
    • Taha’s iPad (mobile) • 00008020-000255113EE8402E • ios           • iOS
      14.3

! Doctor found issues in 1 category.
    [✓] Flutter (Channel master, 1.26.0-2.0.pre.84, on macOS 11.1 20C69 darwin-x64,
    locale en-GB)
    • Flutter version 1.26.0-2.0.pre.84 at /Users/tahatesser/Code/flutter_master
    • Framework revision cda1fae6b6 (4 hours ago), 2020-12-18 04:04:02 -0500
    • Engine revision 1be6f414e7
    • Dart version 2.12.0 (build 2.12.0-166.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-30, build-tools 30.0.2
    • ANDROID_HOME = /Users/tahatesser/Code/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 12.3)
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.0

[✓] 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)

[!] Android Studio
    • Android Studio at /Applications/Android/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
    ✗ Android Studio not found at /Applications/Android/Contents
    • Try updating or re-installing Android Studio.

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

[✓] Connected device (4 available)
    • RMX2001 (mobile)     • EUYTFEUSQSRGDA6D          • android-arm64  •
      Android 10 (API 29)
    • Taha’s iPad (mobile) • 00008020-000255113EE8402E • ios            • iOS
      14.3
    • macOS (desktop)      • macos                     • darwin-x64     • macOS
      11.1 20C69 darwin-x64
    • Chrome (web)         • chrome                    • web-javascript • Google
      Chrome 87.0.4280.88

! Doctor found issues in 1 category.
  7. TahaTesser
    added
    found in release: 1.22Found to occur in 1.22
    found in release: 1.26Found to occur in 1.26
    and removed
    found in release: 1.18Occurs in 1.18
    on Dec 18, 2020

  8. mamuseferha commented on Oct 22, 2021

    @mamuseferha
    mamuseferha
    on Oct 22, 2021

    Hi @justinmc
    Thanks for filing the issue, I verified this on the latest stable and the master channel and the issue is reproducible.

    code sample 
    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Material App Bar'),
        ),
        body: const Center(
          child: TextField(
            minLines: null,
            maxLines: null,
            decoration: InputDecoration(
              hintText:
                  'To be, or not to be, that is the question. Whether \'tis nobler in the mind to suffer the slings and arrows of outrageous fortune, or to take arm against a sea of trouble, and by opposing, end them.',
            ),
          ),
        ),
      ),
    );
  }
}
    flutter doctor -v 
    [✓] Flutter (Channel stable, 2.5.3, on macOS 11.5.2 20G95 darwin-x64, locale en-US)
    • Flutter version 2.5.3 at /Users/flo/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 18116933e7 (5 days ago), 2021-10-15 10:46:35 -0700
    • Engine revision d3ea636dc5
    • Dart version 2.14.4

[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/flo/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 13.0, Build version 13A5212g
    • CocoaPods version 1.11.0

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

[✓] Android Studio (version 2020.3)
    • 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 11.0.10+0-b96-7281165)

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

[✓] Connected device (4 available)
    • sdk gphone x86 (mobile)    • emulator-5554                        • android-x86    • Android 11 (API 30) (emulator)
    • iPhone 12 Pro Max (mobile) • 98CBBFB1-4069-4A28-B7F7-138911ACBE72 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator)
    • macOS (desktop)            • macos                                • darwin-x64     • macOS 11.5.2 20G95 darwin-x64
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 93.0.4577.63

! Doctor found issues in 1 category.
    [✓] Flutter (Channel master, 2.6.0-12.0.pre.453, on macOS 11.5.2 20G95 darwin-x64, locale en-US)
    • Flutter version 2.6.0-12.0.pre.453 at /Users/flo/fvm/versions/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c0e0f4f82e (3 hours ago), 2021-10-22 12:26:36 +0800
    • Engine revision d8a54333e5
    • Dart version 2.15.0 (build 2.15.0-233.0.dev)

[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/flo/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS (Xcode 13.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.0

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

[✓] Android Studio (version 2020.3)
    • 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 11.0.10+0-b96-7281165)

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

[✓] Connected device (4 available)
    • sdk gphone x86 (mobile)    • emulator-5554                        • android-x86    • Android 11 (API 30) (emulator)
    • iPhone 12 Pro Max (mobile) • 98CBBFB1-4069-4A28-B7F7-138911ACBE72 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator)
    • macOS (desktop)            • macos                                • darwin-x64     • macOS 11.5.2 20G95 darwin-x64
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 93.0.4577.63

! Doctor found issues in 1 category.

    Thank you

  9. mamuseferha
    added
    found in release: 2.5Found to occur in 2.5
    found in release: 2.6Found to occur in 2.6
    and removed
    found in release: 1.22Found to occur in 1.22
    found in release: 1.26Found to occur in 1.26
    on Oct 22, 2021
  10. flutter-triage-bot
    added
    multiteam-retriage-candidate
    team-designOwned by Design Languages team
    triaged-designTriaged by Design Languages team
    on Jul 8, 2023
  11. Hixie
    removed
    multiteam-retriage-candidate
    on Mar 6, 2024

  12. bleroux commented on Aug 27, 2024

    @bleroux
    bleroux
    on Aug 27, 2024
    Contributor

    Closing because it was fixed in #148423

  13. bleroux
    closed this as completedon Aug 27, 2024
  14. bleroux
    added
    r: fixedIssue is closed as already fixed in a newer version
    on Aug 27, 2024

  15. github-actions commented on Sep 10, 2024

    @github-actions
    github-actionsbot
    on Sep 10, 2024 – with GitHub Actions

    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.

  16. github-actions
    locked as resolved and limited conversation to collaborators on Sep 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    a: text inputEntering text in a text field or keyboard related problemsc: API breakBackwards-incompatible API changesfound in release: 2.5Found to occur in 2.5found in release: 2.6Found to occur in 2.6frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions