search

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.37k stars 27.55k forks source link

AnimatedRotation breaks IconButton tap callback #132916

Open Lootwig opened 1 year ago

Lootwig commented 1 year ago

Is there an existing issue for this?

Steps to reproduce

Use an IconButton inside AnimatedRotation

Expected results

Button stays clickable

Actual results

onPressed doesn't fire on click/tap

Code sample

Code sample https://dartpad.dev/?id=9fe057209798eea5fcd1edd2c20aa816

Screenshots or Video

No response

Logs

No response

Flutter Doctor output

Doctor output ```console [√] Flutter (Channel stable, 3.13.0, on Microsoft Windows [Version 10.0.19045.3324], locale en-US) • Flutter version 3.13.0 on channel stable at C:\flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision efbf63d9c6 (5 days ago), 2023-08-15 21:05:06 -0500 • Engine revision 1ac611c64e • Dart version 3.1.0 • DevTools version 2.25.0 [√] Windows Version (Installed version of Windows is version 10 or higher) [!] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at C:\Users\david\AppData\Local\Android\Sdk\ • Platform android-34, build-tools 34.0.0 • ANDROID_HOME = C:\Users\david\AppData\Local\Android\Sdk\ • ANDROID_SDK_ROOT = C:\Users\david\AppData\Local\Android\Sdk\ • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java • Java version OpenJDK Runtime Environment (build 11.0.11+9-b60-7590822) X Android license status unknown. Run `flutter doctor --android-licenses` to accept the SDK licenses. See https://flutter.dev/docs/get-started/install/windows#android-setup for more details. [√] Chrome - develop for the web • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe [√] Visual Studio - develop Windows apps (Visual Studio Community 2019 16.11.18) • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community • Visual Studio Community 2019 version 16.11.32802.440 • Windows 10 SDK version 10.0.19041.0 [√] Android Studio (version 2021.1) • Android Studio at C:\Program Files\Android\Android Studio • 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.11+9-b60-7590822) [√] IntelliJ IDEA Ultimate Edition (version 2022.3) • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA 2021.2.3 • Flutter plugin version 72.1.4 • Dart plugin version 223.8836.5 [√] IntelliJ IDEA Ultimate Edition (version 2023.2) • IntelliJ at C:\Users\david\AppData\Local\JetBrains\Toolbox\apps\IDEA-U\ch-0\232.8660.185 • Flutter plugin can be installed from: https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin version 232.8660.129 [√] VS Code (version 1.81.1) • VS Code at C:\Users\david\AppData\Local\Programs\Microsoft VS Code • Flutter extension version 3.1.0 [√] VS Code, 64-bit edition (version 1.81.0) • VS Code at C:\Program Files\Microsoft VS Code • Flutter extension version 3.1.0 [√] Connected device (4 available) • Pixel 7 Pro (mobile) • adb-2B221FDH300CKF-Bf8PBk._adb-tls-connect._tcp • android-arm64 • Android 13 (API 33) • Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.19045.3324] • Chrome (web) • chrome • web-javascript • Google Chrome 116.0.5845.96 • Edge (web) • edge • web-javascript • Microsoft Edge 115.0.1901.188 [√] Network resources • All expected network resources are available. ! Doctor found issues in 1 category. ```
burakJs commented 1 year ago

Research Result

Example Screenshots

Lootwig commented 1 year ago

Ok, but since the whole point of applying the rotation is to ensure that the button is within the viewport, this behavior seems very much to be a bug, or is there any part in the doc I missed about hit testing not being supported?

dam-ease commented 1 year ago

Hi @Lootwig. Thanks for filing this. I am able to reproduce this on the latest master and stable channels on Android and iOS. This issue doesn't seem to occur on web as clicking the icon works fine. Also, from my observations, removing the OverflowBox shrinks the size but doesn't expand the Placeholder, my thoughts are it might not be an issue with AnimatedRotation, can you check this out as well?

Lootwig commented 1 year ago

@dam-ease the linked dartpad is in fact also broken for me on windows/google chrome.

replacing AnimatedRotation with RotatedBox/quarterTurns: 1 makes the button clickable just fine in that same environment.

dam-ease commented 1 year ago

Thanks for your response. From the linked dartPad, it works fine on my end:

https://github.com/flutter/flutter/assets/53122008/89491092-77ec-4e3a-b9fd-990bb9afe8cb

I can also see that the replacement makes the button clickable both on mobile and on web.

Lootwig commented 1 year ago

@dam-ease just checked, works on macbook pro+chrome for me too, is that what you were using for your video (I saw the .mov file extension)?

dam-ease commented 1 year ago

Hi @Lootwig. Yes, can you please share a video of the behaviour on windows/chrome? Thank you!

Lootwig commented 1 year ago

Ok this is getting interesting. This doesn't seem to be about the operating system but the viewport dimensions:

https://github.com/flutter/flutter/assets/39827040/c9ad7fc9-6d19-435e-a627-b28605d59a30

dam-ease commented 1 year ago

Thanks for your response! Yes, it seems to be about the viewport, hence my https://github.com/flutter/flutter/issues/132916#issuecomment-1686127335 that this might not be an issue with AnimatedRotation

Lootwig commented 1 year ago

I noticed this is labeled "waiting for customer response", but I'm not sure what the question is. Is the behavior I depicted not reproducible?

dam-ease commented 1 year ago

Hi @Lootwig. Apologies for not being too clear, I am able to reproduce this but I was trying to confirm from your end as well that my observation of it being about the viewport dimensions and not with AnimatedRotation was correct before renaming this issue. I'd be labelling this for more insights.

Android iOS Web (macOS) Web(Windows)
✅ ✅ ❌ ✅

✅ - Reproducible with Code Sample ❌- Not Reproducible with Code Sample

Code Sample

```dart import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Material App', // theme: ThemeData.dark(), home: Home(), ); } } class Home extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Material App Bar'), ), body: AnimatedRotation( duration: const Duration(milliseconds: 500), turns: .25, child: OverflowBox( maxWidth: double.infinity, maxHeight: double.infinity, alignment: Alignment.center, child: SizedBox( width: MediaQuery.of(context).size.height, height: MediaQuery.of(context).size.width, child: Center( child: Stack( children: [ AspectRatio( aspectRatio: 16 / 9, child: SizedBox.expand(child: Placeholder()), ), Positioned( top: 32, left: 32, child: IconButton( onPressed: () => print('tap'), icon: Icon(Icons.close), ), ), ], ), ), ), ), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: () {}, ), ); } } ```

stable, master flutter doctor -v

``` [✓] Flutter (Channel stable, 3.13.2, on macOS 13.0 22A380 darwin-arm64, locale en-NG) • Flutter version 3.13.2 on channel stable at /Users/damilolaalimi/sdks/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision ff5b5b5fa6 (11 days ago), 2023-08-24 08:12:28 -0500 • Engine revision b20183e040 • Dart version 3.1.0 • DevTools version 2.25.0 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/damilolaalimi/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • ANDROID_HOME = /Users/damilolaalimi/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.6b802.4-9586694) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 14.3.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14E300c • CocoaPods version 1.12.1 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2022.2) • 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.6b802.4-9586694) [✓] VS Code (version 1.81.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.50.0 [✓] Connected device (3 available) • iPhone 14 Pro (mobile) • 6548B0D1-7674-4306-9852-198C465F1104 • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 13.0 22A380 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 116.0.5845.140 [✓] Network resources • All expected network resources are available. • No issues found! ``` ``` [✓] Flutter (Channel master, 3.14.0-14.0.pre.93, on macOS 13.0 22A380 darwin-arm64, locale en-NG) • Flutter version 3.14.0-14.0.pre.93 on channel master at /Users/damilolaalimi/fvm/versions/master • Upstream repository https://github.com/flutter/flutter.git • Framework revision ef9befc9da (14 hours ago), 2023-09-03 11:23:20 -0700 • Engine revision fbc6f4a540 • Dart version 3.2.0 (build 3.2.0-131.0.dev) • DevTools version 2.27.0 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/damilolaalimi/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • ANDROID_HOME = /Users/damilolaalimi/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.6b802.4-9586694) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 14.3.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14E300c • CocoaPods version 1.12.1 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2022.2) • 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.6b802.4-9586694) [✓] VS Code (version 1.81.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.50.0 [✓] Connected device (5 available) • sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 14 (API 34) (emulator) • iPhone 14 (mobile) • EDD62579-BA84-4339-BDA7-E870040C507A • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator) • iPhone 14 Pro (mobile) • 6548B0D1-7674-4306-9852-198C465F1104 • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 13.0 22A380 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 116.0.5845.140 [✓] Network resources • All expected network resources are available. • No issues found! ```

Lootwig commented 1 year ago

I have to check when I get home (am on my phone rn) but I believe when using the static Transform.rotate version, the problem does not occur, which would mean that the AninatedRotation is at least partially to blame.

Might just have been a specific (working) screen aspect ratio though, or I misremember.