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
161.86k stars 26.57k forks source link

Shadow animation using Impeller causing rendering issues (regression) #145969

Closed spkersten closed 2 weeks ago

spkersten commented 1 month ago

Steps to reproduce

Same issue as https://github.com/flutter/flutter/issues/140653 is back on Flutter 3.19.4

  1. Run the code sample with Impeller enabled.
  2. Press on the cards a couple of times to activate the shadow animation

Expected results

No UI issues

Actual results

Some vertical black lines will appear on random cards.

Note that this issue only happens when running on iOS with Impeller enabled.

Code sample

Code sample ```dart // Copyright 2014 The Flutter Authors. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import 'package:flutter/material.dart'; void main() => runApp(const AnimatedShadowIssueExampleApp()); class AnimatedShadowIssueExampleApp extends StatelessWidget { const AnimatedShadowIssueExampleApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: const Text('Bug example')), backgroundColor: const Color(0xff222222), body: const SizedBox(height: 180, child: AnimatedShadowIssue()), ), ); } } class AnimatedShadowIssue extends StatelessWidget { const AnimatedShadowIssue({super.key}); @override Widget build(BuildContext context) { return const CustomScrollView( scrollDirection: Axis.horizontal, slivers: [ SliverToBoxAdapter(child: Square()), SliverToBoxAdapter(child: Square()), SliverToBoxAdapter(child: Square()), SliverToBoxAdapter(child: Square()), SliverToBoxAdapter(child: Square()), ], ); } } class Square extends StatefulWidget { const Square({super.key}); @override State createState() => _SquareState(); } class _SquareState extends State with TickerProviderStateMixin { late AnimationController _pressAnimationController; late Animation> _shadowAnimation; @override void initState() { super.initState(); _pressAnimationController = AnimationController(vsync: this)..addListener(() => setState(() {})); _shadowAnimation = BoxShadowListTween(begin: normalShadows, end: pressedShadows).animate(_pressAnimationController); } @override void dispose() { _pressAnimationController.dispose(); super.dispose(); } Future animateDown() async { try { await _pressAnimationController .animateTo(1, duration: const Duration(milliseconds: 100), curve: Curves.easeOutQuart) .orCancel; } on Exception { // Will throw is onTapUp happens too fast. Ignore the exception } } Future animateUp() async { try { await _pressAnimationController .animateTo(0, duration: const Duration(milliseconds: 100), curve: Curves.easeOutQuart) .orCancel; } on Exception { // Will throw is onTapDown happens too fast. Ignore the exception } } @override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.all(4.0), child: Opacity( opacity: 0.8, child: DecoratedBox( decoration: BoxDecoration( boxShadow: _shadowAnimation.value, ), child: Stack( children: [ const Positioned.fill( child: ColoredBox( color: Color(0xff20c0a0), ), ), GestureDetector( behavior: HitTestBehavior.opaque, onTapDown: (details) => animateDown(), onTapUp: (details) => animateUp(), onTapCancel: () => animateUp(), child: const Center( child: Padding( padding: EdgeInsets.all(12.0), child: Text("Wide card"), ), ), ), ], ), ), ), ); } } class BoxShadowListTween extends Tween> { BoxShadowListTween({required List begin, required List end}) : super(begin: begin, end: end); @override List lerp(double t) => BoxShadow.lerpList(begin, end, t)!; } const normalShadows = [ BoxShadow( color: Color(0x39000000), offset: Offset(0.0, 1.5), blurRadius: 3.0, spreadRadius: 0.0, blurStyle: BlurStyle.normal, ), BoxShadow( color: Color(0x6c000000), offset: Offset(0.0, 6.0), blurRadius: 12.0, spreadRadius: 0.0, blurStyle: BlurStyle.normal, ) ]; const pressedShadows = [ BoxShadow( color: Color(0x40000000), offset: Offset(0.0, 1.0), blurRadius: 2.0, spreadRadius: 0.0, blurStyle: BlurStyle.normal, ), BoxShadow( color: Color(0x73000000), offset: Offset(0.0, 4.0), blurRadius: 8.0, spreadRadius: 0.0, blurStyle: BlurStyle.normal, ) ]; ```

Screenshots or Video

Screenshots / Video demonstration https://github.com/flutter/flutter/assets/4456832/551bf9aa-f61f-4063-8f7b-698d1aef0082

Logs

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

Flutter Doctor output

Doctor output ```console [!] Flutter (Channel [user-branch], 3.19.4, on macOS 14.1.1 23B81 darwin-arm64, locale en-NL) • Framework revision 68bfaea224 (8 days ago), 2024-03-20 15:36:31 -0700 • Engine revision a5c24f538d • Dart version 3.3.2 • DevTools version 2.31.1 ```
danagbemava-nc commented 4 weeks ago

Hi @spkersten, while I can reproduce this on the stable channel, I can't seem to reproduce this on either the beta or master channels.

Can you confirm if this still reproduces for you on either the beta or master channels? There's a possibility this never made it to stable 3.19 to begin with and as such may not be a regression

gabrielgarciagava commented 3 weeks ago

@danagbemava-nc I tested the example code in version 3.19.1 and version 3.19.4. The bug does not exist on 3.19.1, but exists on 3.19.4, which shows that it is actually a regression.

Just for context, I created the other closed ticket. Back then, I reported the bug on 3.16.5. In summary: 3.16.5 -> Bug 3.19.1 -> No bug 3.19.3 -> No bug 3.19.4 -> Bug

[EDIT] I bisected the version that re introduced the issue. It was good on 3.19.3, and bad on 3.19.4.

jason-simmons commented 3 weeks ago

This is related to the https://github.com/flutter/engine/commit/8e7455253dece47278edaca6cdd14107c2d577a4 cherry pick in 3.19.4 but is not happening on the main branch.

danagbemava-nc commented 3 weeks ago

@gabrielgarciagava, thanks for the investigation. I can confirm that this is the case.

Thanks @jason-simmons for the insight as well. I can confirm this is fine on the master channel as well.

Labeling based on the info above.

flutter doctor -v ``` [!] Flutter (Channel [user-branch], 3.19.3, on macOS 14.3.1 23D60 darwin-arm64, locale en-GB) ! Flutter version 3.19.3 on channel [user-branch] at /Users/nexus/dev/sdks/flutter_rc/flutter Currently on an unknown channel. Run `flutter channel` to switch to an official channel. If that doesn't fix the issue, reinstall Flutter by following instructions at https://flutter.dev/docs/get-started/install. ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutters/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutter_rc/flutter. Consider adding /Users/nexus/dev/sdks/flutter_rc/flutter/bin to the front of your path. ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutters/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutter_rc/flutter. Consider adding /Users/nexus/dev/sdks/flutter_rc/flutter/bin to the front of your path. ! Upstream repository unknown source is not a standard remote. Set environment variable "FLUTTER_GIT_URL" to unknown source to dismiss this error. • Framework revision ba39319843 (4 weeks ago), 2024-03-07 15:22:21 -0600 • Engine revision 2e4ba9c6fb • Dart version 3.3.1 • DevTools version 2.31.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/nexus/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 15.3) • Xcode at /Applications/Xcode-15.3.0.app/Contents/Developer • Build 15E204a • CocoaPods version 1.14.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2023.1) • Android Studio at /Users/nexus/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.7+0-17.0.7b1000.6-10550314) [✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5) • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app • Flutter plugin version 77.2.2 • Dart plugin version 232.10286 [✓] VS Code (version 1.87.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.84.0 [✓] Connected device (4 available) • Nexus (mobile) • 00008020-001875E83A38002E • ios • iOS 17.4.1 21E236 • iPhone 15 Pro Max (mobile) • EDEAD7BE-0FE6-45A2-ABF4-22FB3A0EFE65 • ios • com.apple.CoreSimulator.SimRuntime.iOS-17-4 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 14.3.1 23D60 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 123.0.6312.87 ! Error: Browsing on the local area network for Dean’s iPad. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac. The device must be opted into Developer Mode to connect wirelessly. (code -27) [✓] Network resources • All expected network resources are available. ! Doctor found issues in 1 category. ``` ``` [!] Flutter (Channel stable, 3.19.5, on macOS 14.3.1 23D60 darwin-arm64, locale en-GB) • Flutter version 3.19.5 on channel stable at /Users/nexus/dev/sdks/flutter ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutters/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutter. Consider adding /Users/nexus/dev/sdks/flutter/bin to the front of your path. ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutters/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutter. Consider adding /Users/nexus/dev/sdks/flutter/bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision 300451adae (6 days ago), 2024-03-27 21:54:07 -0500 • Engine revision e76c956498 • Dart version 3.3.3 • DevTools version 2.31.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/nexus/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 15.3) • Xcode at /Applications/Xcode-15.3.0.app/Contents/Developer • Build 15E204a • CocoaPods version 1.14.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2023.1) • Android Studio at /Users/nexus/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.7+0-17.0.7b1000.6-10550314) [✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5) • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app • Flutter plugin version 77.2.2 • Dart plugin version 232.10286 [✓] VS Code (version 1.87.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.84.0 [✓] Connected device (4 available) • Nexus (mobile) • 00008020-001875E83A38002E • ios • iOS 17.4.1 21E236 • iPhone 15 Pro Max (mobile) • EDEAD7BE-0FE6-45A2-ABF4-22FB3A0EFE65 • ios • com.apple.CoreSimulator.SimRuntime.iOS-17-4 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 14.3.1 23D60 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 123.0.6312.87 ! Error: Browsing on the local area network for Dean’s iPad. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac. The device must be opted into Developer Mode to connect wirelessly. (code -27) [✓] Network resources • All expected network resources are available. ! Doctor found issues in 1 category. ``` ``` [✓] Flutter (Channel master, 3.22.0-3.0.pre.29, on macOS 14.3.1 23D60 darwin-arm64, locale en-GB) • Flutter version 3.22.0-3.0.pre.29 on channel master at /Users/nexus/dev/sdks/flutters • Upstream repository https://github.com/flutter/flutter.git • Framework revision 8761788442 (7 hours ago), 2024-04-03 01:29:30 -0400 • Engine revision 5fc83bc24b • Dart version 3.5.0 (build 3.5.0-11.0.dev) • DevTools version 2.34.1 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/nexus/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.7+0-17.0.7b1000.6-10550314) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 15.3) • Xcode at /Applications/Xcode-15.3.0.app/Contents/Developer • Build 15E204a • CocoaPods version 1.14.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2023.1) • Android Studio at /Users/nexus/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.7+0-17.0.7b1000.6-10550314) [✓] IntelliJ IDEA Ultimate Edition (version 2023.2.5) • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app • Flutter plugin version 77.2.2 • Dart plugin version 232.10286 [✓] VS Code (version 1.87.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.84.0 [✓] Connected device (5 available) • Nexus (mobile) • 00008020-001875E83A38002E • ios • iOS 17.4.1 21E236 • iPhone 15 Pro Max (mobile) • EDEAD7BE-0FE6-45A2-ABF4-22FB3A0EFE65 • ios • com.apple.CoreSimulator.SimRuntime.iOS-17-4 (simulator) • macOS (desktop) • macos • darwin-arm64 • macOS 14.3.1 23D60 darwin-arm64 • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 14.3.1 23D60 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 123.0.6312.87 ! Error: Browsing on the local area network for Dean’s iPad. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac. The device must be opted into Developer Mode to connect wirelessly. (code -27) [✓] Network resources • All expected network resources are available. • No issues found! ```
jonahwilliams commented 2 weeks ago

We're probably not going to cherry pick out this change, as it fixed another regression (imo worse, but they're both bad). Instead I would recommend updating to the beta, which will become the next stable soon.

jonahwilliams commented 2 weeks ago

Actually the current beta is 3.21, but 3.22 which will be released this week will be the next stable.

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