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
166.82k stars 27.64k forks source link

TextField with lots of characters hangs the app #159661

Open Maruf-Elsa opened 1 day ago

Maruf-Elsa commented 1 day ago

Steps to reproduce

When I try to add more than 35 characters as email in TextField or TextFormField, the app freezes for a few seconds. This happens only in real devices of Android & iOS. Without the inputFormatters the app just freezes permanently. With inputFormatters

inputFormatters: [
 LengthLimitingTextInputFormatter(100),
  ],

the app freezes for a few seconds and then types the rest of the text.

                              TextField(
                              controller: emailController,
                              inputFormatters: [
                                LengthLimitingTextInputFormatter(100),
                              ],
                              style: DsTextStyles.body.copyWith(
                                color: DsColors.white,
                              ),
                              decoration: InputDecoration(
                                hintText: S.of(context).enter_your_email_nova,
                                hintStyle: DsTextStyles.body.copyWith(
                                  color: DsColors.white.withOpacity(0.6),
                                ),
                                border: OutlineInputBorder(
                                  borderRadius:
                                      BorderRadius.circular(DsRadii.x3),
                                  borderSide: BorderSide.none,
                                ),
                              ),
                              onChanged: (email) =>
                                  bloc.onEmailChanged.add(email),
                            ),

Expected results

TextField/TextFormField should take as many characters as required without getting the app frozen and not require inputFormatters to get it unstuck after a delay.

Email used - 24097760@student.hoangmaistarschool.com

Actual results

App gets stuck after long characters are added for email.

Code sample

Code sample ```dart TextField( controller: emailController, inputFormatters: [ LengthLimitingTextInputFormatter(100), ], style: DsTextStyles.body.copyWith( color: DsColors.white, ), decoration: InputDecoration( hintText: S.of(context).enter_your_email_nova, hintStyle: DsTextStyles.body.copyWith( color: DsColors.white.withOpacity(0.6), ), border: OutlineInputBorder( borderRadius: BorderRadius.circular(DsRadii.x3), borderSide: BorderSide.none, ), ), onChanged: (email) => bloc.onEmailChanged.add(email), ), ```

Screenshots or Video

Screenshots / Video demonstration https://github.com/user-attachments/assets/1c00fdf3-27ac-45a4-a8e0-3902174291c8

Logs

Logs ```console [Paste your logs here] ```

Flutter Doctor output

Doctor output ```console [✓] Flutter (Channel stable, 3.24.0, on macOS 14.1.2 23B92 darwin-arm64, locale en-IN) • Flutter version 3.24.0 on channel stable at /Users/marufhassan/fvm/versions/3.24.0 • Upstream repository https://github.com/flutter/flutter.git • Framework revision 80c2e84975 (4 months ago), 2024-07-30 23:06:49 +0700 • Engine revision b8800d88be • Dart version 3.5.0 • DevTools version 2.37.2 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/marufhassan/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • ANDROID_HOME = /Users/marufhassan/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 15.3) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 15E204a • CocoaPods version 1.16.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2022.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 17.0.6+0-17.0.6b829.9-10027231) [✓] VS Code (version 1.95.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.100.0 [✓] Connected device (4 available) • sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 15 (API 35) (emulator) • macOS (desktop) • macos • darwin-arm64 • macOS 14.1.2 23B92 darwin-arm64 • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 14.1.2 23B92 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 131.0.6778.86 [✓] Network resources • All expected network resources are available. • No issues found! ```
aly22 commented 1 day ago

instead of limiting the length with an inputformatter you could use the maxLength property of the textField.

danagbemava-nc commented 23 hours ago

Hi @Maruf-Elsa, please provide a complete minimal reproducible code sample without any third-party packages so that we can properly investigate this.

Please also upgrade to the latest version of flutter stable (3.24.5) to see if you still experience this.

Thank you