TextField hint and input text go outside of given constraints.

[ScottS2017]

Steps to Reproduce

Use a TextField as shown below, without including a String for the counterText.

To see the problem get fixed, uncomment the counterText in the sample code below.

import 'package:flutter/material.dart';

main() {
  runApp(
    const MaterialApp(
      home: Material(
        child: SizedBox.expand(
          child: ColoredBox(
            color: Color(0xFF000000),
            child: Center(
              child: SearchBox(),
            ),
          ),
        ),
      ),
    ),
  );
}

/// A decorated TextField that allows the user to enter a search term.
class SearchBox extends StatefulWidget {
  /// Constructor for the SearchBox.
  const SearchBox({
    Key? key,
  }) : super(key: key);

  @override
  _SearchBoxState createState() => _SearchBoxState();
}

class _SearchBoxState extends State<SearchBox> {
  final TextEditingController emailController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        height: 46.0,
        width: 425.0,
        child: DecoratedBox(
          decoration: BoxDecoration(
            color: const Color(0xFF2c3e57),
            borderRadius: BorderRadius.circular(23.0),
          ),
          child: Row(
            children: [
              const SizedBox(width: 16.0),
              const Padding(
                padding: EdgeInsets.only(top: 4.0),
                child: Icon(
                  Icons.search,
                  color: Color(0xFFDDDDDD),
                  size: 32.0,
                ),
              ),
              const SizedBox(width: 8.0),
              Expanded(
                child: TextField(
                  maxLength: 44,
                  maxLines: 1,
                  autocorrect: false,
                  enableSuggestions: false,
                  style: Theme.of(context).textTheme.headlineSmall!.copyWith(
                        color: const Color(0xFFDDDDDD),
                      ),
                  decoration: InputDecoration(
                    // TODO Uncomment the counter text parameter to solve the issue.
                    // counterText: '',
                    border: InputBorder.none,
                    enabledBorder: InputBorder.none,
                    focusedBorder: InputBorder.none,
                    focusedErrorBorder: InputBorder.none,
                    filled: false,
                    hintText: 'Issue: Hint & input text too high.',
                    hintStyle: Theme.of(context).textTheme.headlineSmall!.copyWith(
                          color: const Color(0xFFDDDDDD),
                        ),
                  ),
                  controller: TextEditingController(),
                  // TODO implement on(Something) here.
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

[darshankawar]

Thanks for the detailed report and code sample. Using it and running on latest stable and master, I see same behavior:

If we uncomment counterText: '',, the behavior is expected as below:

The linked / original issue seems to be #26343 which reported same issue as this. Using the code sample provided in it too, replicates the said behavior. The fix was made as part of this PR: #27205

Labeling it as a regression.

stable, master flutter doctor -v

[✓] Flutter (Channel stable, 2.10.3, on macOS 12.2.1 21D62 darwin-x64, locale
    en-GB)
    • Flutter version 2.10.3 at /Users/dhs/documents/fluttersdk/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7e9793dee1 (11 hours ago), 2022-03-02 11:23:12 -0600
    • Engine revision bd539267b4
    • Dart version 2.16.1
    • DevTools version 2.9.2

[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

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

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

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

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

! Doctor found issues in 1 category.


[✓] Flutter (Channel master, 2.11.0-0.0.pre.831, on macOS 12.2.1 21D62
    darwin-x64, locale en-GB)
    • Flutter version 2.11.0-0.0.pre.831 at
      /Users/dhs/documents/fluttersdk/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 3172065fba (3 hours ago), 2022-03-08 19:35:20 -0600
    • Engine revision 5c760759fe
    • Dart version 2.17.0 (build 2.17.0-182.0.dev)
    • DevTools version 2.11.1

[!] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! Flutter recommends a minimum Xcode version of 13.
      Download the latest version or update via the Mac App Store.
    • CocoaPods version 1.11.2

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

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

[✓] Connected device (5 available)
    • SM G975F (mobile)       • RZ8M802WY0X • android-arm64   • Android 11 (API 30)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1 18D61
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 98.0.4758.80

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

! Doctor found issues in 1 category.

/cc @justinmc

[justinmc]

I plan to check back in on this after other InputDecorator layout bugs #99914 and #121753.