flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
162.18k stars 26.64k forks source link

Filled text field active indicator overflows container bounds #146507

Closed bleroux closed 1 month ago

bleroux commented 1 month ago

Steps to reproduce

  1. Run the code sample on mobile.
  2. Observe that the active indicator overflows the container height at the bottom (which is 56dp on mobile).

Expected results

Active indicator does not overflow container bounds. Similarly to an outlined text field border which is painted correctly:

image

Actual results

The active indicator overflows the container at the bottom.

image

Code sample

Code sample ```dart import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: SafeArea( child: Scaffold( body: Padding( padding: const EdgeInsets.all(16.0), child: Column( children: [ Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( height: 56, width: 30, color: Colors.amber[700], child: const Center( child: Text('56dp', style: TextStyle(fontSize: 10, fontWeight: FontWeight.bold)), ), ), const SizedBox( width: 140, child: TextField( decoration: InputDecoration( labelText: 'Label text', filled: true, // border: OutlineInputBorder(), ), ), ), Container( height: 56, width: 30, color: Colors.amber[700], child: const Center( child: Text('56dp', style: TextStyle(fontSize: 10, fontWeight: FontWeight.bold)), ), ), ], ), const SizedBox(height: 5), const Text( 'Active indicator painted\noutside container bounds.', textAlign: TextAlign.center, style: TextStyle(fontSize: 12), ), ], ), ), ), ), ); } } ```

Screenshots or Video

No response

Logs

No response

Flutter Doctor output

Doctor output ```console [!] Flutter (Channel master, 3.22.0-6.0.pre.23, on macOS 14.2.1 23C71 darwin-arm64, locale fr-FR) ! Warning: `flutter` on your path resolves to /Users/bruno/Nevercode/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/Bruno/Nevercode/flutter. Consider adding /Users/Bruno/Nevercode/flutter/bin to the front of your path. ! Warning: `dart` on your path resolves to /opt/homebrew/Cellar/dart/2.18.4/libexec/bin/dart, which is not inside your current Flutter SDK checkout at /Users/Bruno/Nevercode/flutter. Consider adding /Users/Bruno/Nevercode/flutter/bin to the front of your path. ! Upstream repository https://github.com/NevercodeHQ/flutter is not a standard remote. Set environment variable "FLUTTER_GIT_URL" to https://github.com/NevercodeHQ/flutter to dismiss this error. [!] Android toolchain - develop for Android devices (Android SDK version 34.0.0) ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses [!] Xcode - develop for iOS and macOS (Xcode 15.1) ! CocoaPods 1.11.3 out of date (1.13.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#updating-cocoapods for instructions. [✓] Chrome - develop for the web [✓] Android Studio (version 2023.1) [✓] VS Code (version 1.88.0) [✓] Connected device (4 available) [✓] Network resources ! Doctor found issues in 3 categories. ```
github-actions[bot] commented 2 weeks ago

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.