flutter InputDecorator appears not to expand for entire widget

InputDecorator appears not to expand for entire widget

Open NebulaFox opened this issue 1 year ago • 7 comments

I noticed that when you set TextField's input decoration border to OutlineInputBorder it does encompass it's full size.

TextField example: https://dartpad.dev/?id=9fdc5bbe62239c8912ced4d1677abe89

InputDecorator example: https://dartpad.dev/?id=4c1d9d0962bfaf77f57a519cafb3a1e8

Expected results:

I would expect the OutlineInputBorder to wrap the entire TextField.

Actual results:

The OutlineInputBorder just wraps the first line.

flutter doctor -v

[✓] Flutter (Channel stable, 3.7.3, on macOS 12.6.2 21G320 darwin-arm64, locale
    en-GB)
    • Flutter version 3.7.3 on channel stable at /usr/local/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 9944297138 (5 days ago), 2023-02-08 15:46:04 -0800
    • Engine revision 248290d6d5
    • Dart version 2.19.2
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/robbiebykowski/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_SDK_ROOT = /Users/robbiebykowski/Library/Android
    • Java binary at: /Users/robbiebykowski/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7621141/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14C18
    • CocoaPods version 1.11.3

[✓] Android Studio (version 2020.3)
    • Android Studio at /Users/robbiebykowski/Library/Application
      Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7621141/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.75.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.58.0

[✓] Connected device (1 available)
    • macOS (desktop) • macos • darwin-arm64 • macOS 12.6.2 21G320 darwin-arm64

Feb 13 '23 22:02 NebulaFox

Hey @NebulaFox. I can see the outline around the text field in your sample on Dartpad. But it doesn't seem to have a focus border. Is that the issue you're raising here?

Feb 14 '23 08:02 exaby73

Hey @exaby73 No. The problem is the TextField is filling the entire space on the screen, but the OutlineInputBorder doesn't. Here is a screenshot to demonstrate the problem.

Feb 14 '23 12:02 NebulaFox

Looking at the devtools, and your screenshot, the decorator seems to be covering the screen, which makes sense since it's in an Expanded widget. If you want the TextField to expand too, you can wrap the TextField in a SizedBox.expand

Feb 15 '23 08:02 exaby73

Thanks for your reply @exaby73.

It is good to see there is a working solution to have the InputDecorator be the same size as an expanded TextField, but it's a shame that it is not the TextField's internal InputDecorator.

Is the solution then to not use the internal TextField's InputDecorator but wrap the TextField with an InputDecorator and then expand the TextField?

Example: https://dartpad.dev/?id=7550d138a36a1693031d9c3534a4d053

The _Decorator in the screenshot is from the TextField's internal InputDecorator.

Feb 25 '23 13:02 NebulaFox

@NebulaFox Please correct me if I'm wrong or lacking some information here. I ran your first sample code and see the TextField's InputDecoration still be shown when the text is expanded:

Demo

normal visual	inspecting devtool

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.7.5, on macOS 13.0.1 22A400 darwin-x64, locale en-EE)
    • Flutter version 3.7.5 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c07f788888 (5 days ago), 2023-02-22 17:52:33 -0600
    • Engine revision 0f359063c4
    • Dart version 2.19.2
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Users/huynq/Library/Java/JavaVirtualMachines/corretto-1.8.0_302/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment Corretto-8.302.08.1 (build 1.8.0_302-b08)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14B47b
    • CocoaPods version 1.11.3

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

[!] Android Studio (version 2022.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[!] Android Studio
    • Android Studio at /Users/huynq/Downloads/Android Studio Preview.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
    • 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

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

[✓] Connected device (3 available)
    • SM T225 (mobile) • R9JT3004VRJ • android-arm64  • Android 13 (API 33)
    • macOS (desktop)  • macos       • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)     • chrome      • web-javascript • Google Chrome 110.0.5481.100

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 2 categories.

[!] Flutter (Channel master, 3.8.0-17.0.pre.39, on macOS 13.0.1 22A400 darwin-x64, locale en-EE)
    • Flutter version 3.8.0-17.0.pre.39 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 35f191576b (24 minutes ago), 2023-02-28 01:45:11 -0500
    • Engine revision 365f348645
    • Dart version 3.0.0 (build 3.0.0-277.0.dev)
    • DevTools version 2.22.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14B47b
    • CocoaPods version 1.11.3

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

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Android Studio (version 2022.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 11.0.15+0-b2043.56-8887301)

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
    • 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

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

[✓] Connected device (3 available)
    • Pixel 3a (mobile) • 964AY0WL20 • android-arm64  • Android 12 (API 32)
    • macOS (desktop)   • macos      • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)      • chrome     • web-javascript • Google Chrome 110.0.5481.100

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 2 categories.

Feb 28 '23 11:02 huycozy

@huycozy No, the TextField's InputDecoration isn't expanded when I run the the example. It is like my earlier screenshot.

The only difference I can see is yours includes text in the TextField while mine doesn't. I expected the TextField's InputDecorator to fill the expanded space, without text.

Hope that helps.

Feb 28 '23 14:02 NebulaFox

Ah, I see the issue now. Without filled text, TextField's InputDecoration should be expanded to its max height. My first thought is that this issue may be similar to #82709 (a duplicate of #108813) but it is not because of the different behavior.

Labeling this issue for further insights. I would like to summarise the issue as below:

Step to reproduce

Run this sample code

Sample code

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  const App({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {

  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Scaffold(
        appBar: AppBar(),
        body: Padding(
            padding: const EdgeInsets.only(left: 8, right: 8, bottom: 8.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("LABEL", style: theme.textTheme.bodySmall,),
                SizedBox(height: 8.0,),
                Expanded(
                  child: TextField(
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                    ),
                    maxLines: null,
                    keyboardType: TextInputType.multiline,
                  ),
                )
              ],
            )
        )
    );
  }
}

The TextField's InputDecoration is not expanded even though it's inside an Expanded widget.

Actual result	Expected result

Workaround

https://github.com/flutter/flutter/issues/120633#issuecomment-1445124226

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.7.5, on macOS 13.0.1 22A400 darwin-x64, locale en-EE)
    • Flutter version 3.7.5 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision c07f788888 (5 days ago), 2023-02-22 17:52:33 -0600
    • Engine revision 0f359063c4
    • Dart version 2.19.2
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Users/huynq/Library/Java/JavaVirtualMachines/corretto-1.8.0_302/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment Corretto-8.302.08.1 (build 1.8.0_302-b08)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14B47b
    • CocoaPods version 1.11.3

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

[!] Android Studio (version 2022.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[!] Android Studio
    • Android Studio at /Users/huynq/Downloads/Android Studio Preview.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
    • 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

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

[✓] Connected device (3 available)
    • SM T225 (mobile) • R9JT3004VRJ • android-arm64  • Android 13 (API 33)
    • macOS (desktop)  • macos       • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)     • chrome      • web-javascript • Google Chrome 110.0.5481.100

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 2 categories.

[!] Flutter (Channel master, 3.8.0-17.0.pre.39, on macOS 13.0.1 22A400 darwin-x64, locale en-EE)
    • Flutter version 3.8.0-17.0.pre.39 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 35f191576b (24 minutes ago), 2023-02-28 01:45:11 -0500
    • Engine revision 365f348645
    • Dart version 3.0.0 (build 3.0.0-277.0.dev)
    • DevTools version 2.22.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14B47b
    • CocoaPods version 1.11.3

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

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Android Studio (version 2022.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 11.0.15+0-b2043.56-8887301)

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
    • 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

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

[✓] Connected device (3 available)
    • Pixel 3a (mobile) • 964AY0WL20 • android-arm64  • Android 12 (API 32)
    • macOS (desktop)   • macos      • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)      • chrome     • web-javascript • Google Chrome 110.0.5481.100

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 2 categories.

Mar 01 '23 09:03 huycozy

How do we expect this to work with the expands parameter too? I think there might be some kind of conflict between the expands parameter and the Expanded widget, like what we expect to happen when expands is false but it's inside of Expanded, etc.

The fact that you can click below the border to focus the field does seem like a bug... I'm not sure exactly what the solution should look like in every case, though.

Here is the original PR where I introduced expanded, for the record: https://github.com/flutter/flutter/pull/27205.

Mar 02 '23 23:03 justinmc

flutter flutter copied to clipboard

InputDecorator appears not to expand for entire widget

Step to reproduce

Workaround

flutter
flutter copied to clipboard