InputDecoration doesn't have the ability to increase space between the label and input text/hint #74300

JoueBien · 2021-01-20T07:29:02Z

The old solution seams to be:

contentPadding: EdgeInsets.only(top: 100),

but that adds padding on top of the label instead of in between.

Looks like someones made the content padding to also be around the label so now you can't increase the top padding to increase the gap between the label and input text.
In my build of Flutter:

With the Flutter version used in the dev docs: https://api.flutter.dev/flutter/material/InputDecoration-class.html it behaves correctly.

Steps to Reproduce

run the following as a decoration of a Text Field

InputDecoration(
    labelText: "Label Not Set",
    labelStyle: TextStyle(
      fontSize: 13,
      height: 1.2,
    ),
    contentPadding: EdgeInsets.only(top: 16),
    hintText: "Hint Lable Not Set",
    hintStyle: TextStyle(
      fontSize: 16,
      height: 1.2
    ),
  );

Flutter Doctor

[√] Flutter (Channel unknown, 1.22.3, on Microsoft Windows [Version 10.0.18363.1316], locale en-AU)
• Flutter version 1.22.3 at C:\Users\zach\fvm\default
• Framework revision 8874f21 (3 months ago), 2020-10-29 14:14:35 -0700
• Engine revision a1440ca392
• Dart version 2.10.3

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
• Android SDK at C:\Users\zach\AppData\Local\Android\sdk
• Platform android-29, build-tools 29.0.2
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
• All Android licenses accepted.

[!] Android Studio (version 4.1.0)
• Android Studio at C:\Program Files\Android\Android Studio
X Flutter plugin not installed; this adds Flutter specific functionality.
X Dart plugin not installed; this adds Dart specific functionality.
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] VS Code (version 1.52.1)
• VS Code at C:\Users\zach\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.18.1

[√] Connected device (1 available)
• AOSP on IA Emulator (mobile) • emulator-5554 • android-x86 • Android 9 (API 28) (emulator)

Ignore the two fails - that just happens to be an issue where FD doesn't pick up the plugins even though the VS Code is 100% happy.

The text was updated successfully, but these errors were encountered:

pedromassangocode · 2021-01-20T08:04:44Z

I can see the same behavior on both, Master and Stable channel.

code sample

import 'package:flutter/material.dart';

void main() => runApp(
      MaterialApp(
        home: Scaffold(
          body: Center(
            child: TextFormField(
              decoration: InputDecoration(
                labelText: "Label Not Set",
                hintText: 'hint text',
                contentPadding: EdgeInsets.only(top: 100),
              ),
            ),
          ),
        ),
      ),
    );

flutter doctor -v

[✓] Flutter (Channel stable, 1.22.5, on Mac OS X 10.15.7 19H114 darwin-x64, locale en)
    • Flutter version 1.22.5 at /Users/pedromassango/Code/flutter_stable
    • Framework revision 7891006299 (6 weeks 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/pedromassango/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • 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.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.1, Build version 12A7403
    • CocoaPods version 1.9.3

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

[✓] IntelliJ IDEA Community Edition (version 2020.3.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin installed
    • Dart plugin version 203.6912

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

[✓] Connected device (1 available)
    • sdk gphone x86 64 (mobile) • emulator-5554 • android-x64 • Android 11 (API 30) (emulator)

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 1.26.0-2.0.pre.419, on Mac OS X 10.15.7 19H114 darwin-x64, locale en)
    • Flutter version 1.26.0-2.0.pre.419 at /Users/pedromassango/Code/flutter_master
    • Framework revision 913d5933c1 (2 hours ago), 2021-01-19 22:34:03 -0800
    • Engine revision b58dbc88fc
    • Dart version 2.12.0 (build 2.12.0-240.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /Users/pedromassango/Library/Android/sdk
    • Platform android-30, build-tools 30.0.2
    • 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 /Applications/Xcode.app/Contents/Developer
    • Xcode 12.1, Build version 12A7403
    ! CocoaPods 1.9.3 out of date (1.10.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

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

[✓] IntelliJ IDEA Community Edition (version 2020.3.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 52.2.5
    • Dart plugin version 203.6912

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

[✓] Connected device (3 available)
    • sdk gphone x86 64 (mobile) • emulator-5554 • android-x64    • Android 11 (API 30) (emulator)
    • macOS (desktop)            • macos         • darwin-x64     • Mac OS X 10.15.7 19H114 darwin-x64
    • Chrome (web)               • chrome        • web-javascript • Google Chrome 87.0.4280.141

! Doctor found issues in 1 category.

goderbauer · 2021-01-20T23:39:26Z

/cc @justinmc

justinmc · 2021-01-26T22:45:37Z

Nothing jumps out at me as the cause for this change. I'll try to bisect it later.

justinmc · 2021-02-17T23:03:54Z

I'm having trouble going back before December 2020, but this bug still exists at that point.

JoueBien · 2021-02-24T03:10:35Z

1 month open - please keep open as this is still an issue.

JoueBien · 2021-03-17T02:19:56Z

Cool so no movement - @justinmc @goderbauer @pedromassangocode is this actually going to get fixed? or is the plan just to sacrifice the bug to the close robot like the other 5 or so stale unfixed bugs that I'm continually running across each week.

justinmc · 2021-03-31T22:37:50Z

I'm unlikely to get back to this in the near future but anyone else that's interested is welcome to. Some things to think about:

When did this behavior change, and why did it change? Can we find the PR that changed it?
The code that handles layout of the different input decoration pieces is here:

flutter/packages/flutter/lib/src/material/input_decorator.dart

Line 957 in f86c859

_RenderDecorationLayout _layout(BoxConstraints layoutConstraints) {

mamuseferha · 2021-10-20T10:04:52Z

Hi @JoueBien
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(
      MaterialApp(
        home: Scaffold(
          body: Center(
            child: TextFormField(
                decoration: InputDecoration(
                    labelText: "Label Not Set",
                    hintText: 'hint text',
                    contentPadding: EdgeInsets.only(top: 100))),
          ),
        ),
      ),
    );

Output

Screen.Recording.2021-10-20.at.11.02.52.AM.mov

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.406, on macOS 11.5.2 20G95 darwin-x64, locale en-US)
    • Flutter version 2.6.0-12.0.pre.406 at /Users/flo/fvm/versions/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 71a0b6169d (73 minutes ago), 2021-10-20 02:08:04 -0400
    • Engine revision 115c859b2c
    • 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

JoueBien · 2021-11-27T10:06:41Z

Keep Alive - please keep open as this is still an issue.

JoueBien · 2021-12-28T11:17:35Z

Keep Alive - please keep open as this is still an issue.

JoueBien · 2022-04-28T02:43:56Z

Keep Alive - please keep open as this is still an issue.

HansMuller added the f: material design flutter/packages/flutter/material repository. label Jan 21, 2021

mamuseferha added found in release: 2.5 Found to occur in 2.5 found in release: 2.6 Found to occur in 2.6 and removed found in release: 1.22 Found to occur in 1.22 found in release: 1.26 Found to occur in 1.26 labels Oct 20, 2021

flutter-triage-bot bot added multiteam-retriage-candidate team-design Owned by Design Languages team triaged-design Triaged by Design Languages team labels Jul 8, 2023

Hixie removed the multiteam-retriage-candidate label Mar 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

InputDecoration doesn't have the ability to increase space between the label and input text/hint #74300

InputDecoration doesn't have the ability to increase space between the label and input text/hint #74300

JoueBien commented Jan 20, 2021 •

edited

pedromassangocode commented Jan 20, 2021 •

edited

goderbauer commented Jan 20, 2021

justinmc commented Jan 26, 2021

justinmc commented Feb 17, 2021

JoueBien commented Feb 24, 2021

JoueBien commented Mar 17, 2021

justinmc commented Mar 31, 2021

mamuseferha commented Oct 20, 2021

JoueBien commented Nov 27, 2021

JoueBien commented Dec 28, 2021

JoueBien commented Apr 28, 2022

InputDecoration doesn't have the ability to increase space between the label and input text/hint #74300

InputDecoration doesn't have the ability to increase space between the label and input text/hint #74300

Comments

JoueBien commented Jan 20, 2021 • edited

Steps to Reproduce

Flutter Doctor

pedromassangocode commented Jan 20, 2021 • edited

goderbauer commented Jan 20, 2021

justinmc commented Jan 26, 2021

justinmc commented Feb 17, 2021

JoueBien commented Feb 24, 2021

JoueBien commented Mar 17, 2021

justinmc commented Mar 31, 2021

mamuseferha commented Oct 20, 2021

JoueBien commented Nov 27, 2021

JoueBien commented Dec 28, 2021

JoueBien commented Apr 28, 2022

JoueBien commented Jan 20, 2021 •

edited

pedromassangocode commented Jan 20, 2021 •

edited