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
164.19k stars 27.08k forks source link

NotificationListener bubbling notifications when removing/adding text inside TextField #151750

Closed ciganovic-milan closed 1 month ago

ciganovic-milan commented 1 month ago

Steps to reproduce

  1. Use the attached code below
  2. Enter a lot of characters inside a TextField
  3. Select All of the text
  4. Clear the text from the textfield
  5. The NotificationListener returns maxScrollExtent = 0

Expected results

  1. Use the attached code below
  2. Enter a lot of characters inside a TextField
  3. Select All of the text
  4. Clear the text from the textfield
  5. The NotificationListener returns correct maxScrollExtend

Actual results

The NotificationListener keeps bubbling up every time we close or show the keyboard, I'm not sure why is this even sending the notification updates?

The maxScroll extend is 0 when the screen goes red in the example, meaning the view is not scrollable? šŸ¤”

Code sample

Code sample ```dart import 'package:flutter/material.dart'; class NotificationListenerExample extends StatefulWidget { const NotificationListenerExample({super.key}); @override State createState() => _NotificationListenerExampleState(); } class _NotificationListenerExampleState extends State { bool _isScrollable = false; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: _isScrollable ? null : Colors.red, body: NotificationListener( onNotification: (state) { setState(() { _isScrollable = state.metrics.minScrollExtent != state.metrics.maxScrollExtent; }); return true; }, child: ListView( children: List.generate( 100, (i) => i == 2 ? const TextField() : ListTile( leading: Text("Item $i"), ), ), ), ), ), ); } } void main() => runApp(const NotificationListenerExample()); ```

Screenshots or Video

Screenshots / Video demonstration
Android iOS

Logs

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

Flutter Doctor output

Doctor output ```console [āœ“] Flutter (Channel stable, 3.22.2, on macOS 14.5 23F79 darwin-arm64, locale en-RS) ā€¢ Flutter version 3.22.2 on channel stable at /Users/user/flutter ā€¢ Upstream repository https://github.com/flutter/flutter.git ā€¢ Framework revision 761747bfc5 (6 weeks ago), 2024-06-05 22:15:13 +0200 ā€¢ Engine revision edd8546116 ā€¢ Dart version 3.4.3 ā€¢ DevTools version 2.34.3 [āœ“] Android toolchain - develop for Android devices (Android SDK version 34.0.0) ā€¢ Android SDK at /Users/user/Library/Android/sdk ā€¢ Platform android-34, build-tools 34.0.0 ā€¢ Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java ā€¢ Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160) ā€¢ All Android licenses accepted. [āœ“] Xcode - develop for iOS and macOS (Xcode 15.4) ā€¢ Xcode at /Applications/Xcode.app/Contents/Developer ā€¢ Build 15F31d ā€¢ CocoaPods version 1.15.2 [āœ“] Chrome - develop for the web ā€¢ Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [āœ“] Android Studio (version 2023.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.10+0-17.0.10b1087.21-11572160) [āœ“] Connected device (3 available) ā€¢ macOS (desktop) ā€¢ macos ā€¢ darwin-arm64 ā€¢ macOS 14.5 23F79 darwin-arm64 ā€¢ Mac Designed for iPad (desktop) ā€¢ mac-designed-for-ipad ā€¢ darwin ā€¢ macOS 14.5 23F79 darwin-arm64 ā€¢ Chrome (web) ā€¢ chrome ā€¢ web-javascript ā€¢ Google Chrome 126.0.6478.127 [āœ“] Network resources ā€¢ All expected network resources are available. ā€¢ No issues found! ```
huycozy commented 1 month ago

I can also reproduce the behavior as reported. The issue also occurs if I delete text in TextField bit by bit as in the following video:

Demo another way to produce the issue https://github.com/user-attachments/assets/23f90e64-053a-4f48-b051-f014095e494c
flutter doctor -v (stable and master) ```bash [āœ“] Flutter (Channel stable, 3.22.2, on macOS 14.1 23B74 darwin-x64, locale en-VN) ā€¢ Flutter version 3.22.2 on channel stable at /Users/huynq/Documents/GitHub/flutter ā€¢ Upstream repository https://github.com/flutter/flutter.git ā€¢ Framework revision 761747bfc5 (3 weeks ago), 2024-06-05 22:15:13 +0200 ā€¢ Engine revision edd8546116 ā€¢ Dart version 3.4.3 ā€¢ DevTools version 2.34.3 [āœ“] Android toolchain - develop for Android devices (Android SDK version 34.0.0) ā€¢ Android SDK at /Users/huynq/Library/Android/sdk ā€¢ Platform android-34, build-tools 34.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 17.0.10+0-17.0.10b1087.21-11572160) ā€¢ All Android licenses accepted. [āœ“] Xcode - develop for iOS and macOS (Xcode 15.4) ā€¢ Xcode at /Applications/Xcode15.4.app/Contents/Developer ā€¢ Build 15F31d ā€¢ CocoaPods version 1.15.2 [āœ“] Chrome - develop for the web ā€¢ Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [āœ“] Android Studio (version 2023.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 ā€¢ android-studio-dir = /Applications/Android Studio.app/ ā€¢ Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160) [āœ“] VS Code (version 1.90.2) ā€¢ VS Code at /Applications/Visual Studio Code.app/Contents ā€¢ Flutter extension version 3.90.0 [āœ“] Connected device (3 available) ā€¢ iPhone (mobile) ā€¢ d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e ā€¢ ios ā€¢ iOS 15.8 19H370 ā€¢ macOS (desktop) ā€¢ macos ā€¢ darwin-x64 ā€¢ macOS 14.1 23B74 darwin-x64 ā€¢ Chrome (web) ā€¢ chrome ā€¢ web-javascript ā€¢ Google Chrome 126.0.6478.127 [āœ“] Network resources ā€¢ All expected network resources are available. ā€¢ No issues found! ``` ```bash [!] Flutter (Channel master, 3.24.0-1.0.pre.114, on macOS 14.1 23B74 darwin-x64, locale en-VN) ā€¢ Flutter version 3.24.0-1.0.pre.114 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 82b63ff27d (21 hours ago), 2024-07-14 05:07:36 -0400 ā€¢ Engine revision a921637f16 ā€¢ Dart version 3.6.0 (build 3.6.0-36.0.dev) ā€¢ DevTools version 2.37.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 34.0.0) ā€¢ Android SDK at /Users/huynq/Library/Android/sdk ā€¢ Platform android-34, build-tools 34.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 17.0.10+0-17.0.10b1087.21-11572160) ā€¢ All Android licenses accepted. [āœ“] Xcode - develop for iOS and macOS (Xcode 15.4) ā€¢ Xcode at /Applications/Xcode15.4.app/Contents/Developer ā€¢ Build 15F31d ā€¢ CocoaPods version 1.15.2 [āœ“] Chrome - develop for the web ā€¢ Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [āœ“] Android Studio (version 2023.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 ā€¢ android-studio-dir = /Applications/Android Studio.app/ ā€¢ Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160) [āœ“] VS Code (version 1.91.0) ā€¢ VS Code at /Applications/Visual Studio Code.app/Contents ā€¢ Flutter extension version 3.92.0 [āœ“] Connected device (2 available) ā€¢ macOS (desktop) ā€¢ macos ā€¢ darwin-x64 ā€¢ macOS 14.1 23B74 darwin-x64 ā€¢ Chrome (web) ā€¢ chrome ā€¢ web-javascript ā€¢ Google Chrome 126.0.6478.127 [āœ“] Network resources ā€¢ All expected network resources are available. ! Doctor found issues in 1 category. ```
ciganovic-milan commented 1 month ago

@huycozy Thanks for the swift reply Huy, I've also managed to reproduce it while just pasting the text into the textfield, although every so often.

goderbauer commented 1 month ago

My guess is that you'd want to check ScrollMetricsNotification.depth to make sure you are processing the notifications of the correct scrollable. Assuming you want to only listen notifications from the ListView, you want to make sure that the NotificationListener only processes notifications with a depth of 0 and ignores all others. In your current example, the listener likely also sees notifications from the scrollable that's build into the text field. See also: https://main-api.flutter.dev/flutter/widgets/ViewportNotificationMixin/depth.html

Does the problem go away if you include such a depth guard?

      NotificationListener<ScrollMetricsNotification>(
          onNotification: (state) {
            if (state.depth != 0) return; // add this
            setState(() {
              _isScrollable = state.metrics.minScrollExtent !=
                  state.metrics.maxScrollExtent;
            });
            return true;
          },
ciganovic-milan commented 1 month ago

@goderbauer oh, what a nice find! Thank you very much Micheal and Huy, that indeed fixes the issue!

github-actions[bot] commented 3 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.