AnimatedContainer not properly animating BoxDecoration with backgroundBlendMode: BlendMode.overlay #164778

Activity

1. benthillerkus commented on Mar 7, 2025

   

   benthillerkus

   on Mar 7, 2025

   Last edited by benthillerkus

   Contributor

   More actions

   Can't comment on the rendering issue, but if you're using the overlay blend mode, there is no need to animate the alpha, you can just animate the brightness of the foreground. Conversely, if you can just animate the alpha, there is no need to use a special blend mode.

   Unfortunately the link to Dartpad is broken.
2. maheshj01

   added

   in triagePresently being triaged by the triage teamPresently being triaged by the triage team

   on Mar 8, 2025
3. maheshj01 commented on Mar 8, 2025

   

   maheshj01

   on Mar 8, 2025

   Member

   More actions

   Hi @Pomis, Thanks for filing the issue. Please share the complete sample code to investigate the issue ( The shared link to dartpad is broken)
4. maheshj01

   closed this as completedon Mar 8, 2025
5. maheshj01

   reopened this on Mar 8, 2025
6. maheshj01

   added

   waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

   on Mar 8, 2025
7. Pomis commented on Mar 8, 2025

   

   Pomis

   on Mar 8, 2025

   Author

   More actions

   Hi @Pomis, Thanks for filing the issue. Please share the complete sample code to investigate the issue ( The shared link to dartpad is broken)

   Oops, sorry, the working link: https://dartpad.dev/?id=b937d2672f4d177e9ba34b656b3780ed
8. github-actions

   removed

   waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

   on Mar 8, 2025
9. maheshj01 commented on Mar 10, 2025

   

   maheshj01

   on Mar 10, 2025

   Last edited by maheshj01

   Member

   More actions

   Reproducible on the latest stable and the master channel. AnimatedContainer.decoration.backgroundBlendMode flickers when animating color

   Screen.Recording.2025-03-10.at.18.24.40.mov

   minimal code sample

   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(
         title: 'Flutter Demo',
         debugShowCheckedModeBanner: false,
         theme: ThemeData(colorSchemeSeed: Colors.blue),
         home: Center(child: SelectableButton(isSelected: false)),
       );
     }
   }
   
   class SelectableButton extends StatefulWidget {
     final bool isSelected;
     final VoidCallback? onPressed;
   
     const SelectableButton({
       super.key,
       required this.isSelected,
       this.onPressed,
     });
   
     @override
     State<SelectableButton> createState() => _SelectableButtonState();
   }
   
   const Color _white = Color(0xFFFFFFFF);
   const Color _darkBlue = Color(0xFF212936);
   const Color _green = Color(0xFF43946C);
   
   class _SelectableButtonState extends State<SelectableButton>
       with SingleTickerProviderStateMixin {
     late final _statesController = WidgetStatesController()
       ..update(
         WidgetState.selected,
         widget.isSelected,
       );
   
     bool get _isSelected =>
         _statesController.value.contains(WidgetState.selected);
   
     @override
     void initState() {
       super.initState();
     }
   
     @override
     Widget build(BuildContext context) {
       return TextButton(
         statesController: _statesController,
         style: ButtonStyle(
           padding: const WidgetStatePropertyAll(EdgeInsets.zero),
           shape: WidgetStateProperty.resolveWith((states) {
             return RoundedRectangleBorder(
               borderRadius: BorderRadius.circular(5),
             );
           }),
           backgroundBuilder: (context, states, child) {
             final color =
                 states.contains(WidgetState.selected) ? _green : _darkBlue;
             return Container(
               decoration: BoxDecoration(
                 color: color,
                 borderRadius: BorderRadius.circular(5),
               ),
               child: child,
             );
           },
           animationDuration: kThemeAnimationDuration,
           shadowColor: WidgetStateProperty.resolveWith((states) {
             if (states.contains(WidgetState.selected)) {
               return _green.withValues(alpha: 0.5);
             }
   
             return _darkBlue.withValues(alpha: 0.5);
           }),
           foregroundColor: WidgetStateProperty.resolveWith((states) {
             if (states.contains(WidgetState.pressed)) {
               return Colors.white38;
             }
   
             return Colors.white;
           }),
           foregroundBuilder: (context, states, child) {
             return AnimatedContainer(
               duration: kThemeAnimationDuration,
               decoration: BoxDecoration(
                 color: states.contains(WidgetState.hovered)
                     ? _white.withValues(alpha: 0.5)
                     : _white.withValues(alpha: 0),
                 backgroundBlendMode: BlendMode.overlay,
                 borderRadius: BorderRadius.circular(5),
               ),
               child: child,
             );
           },
         ),
         onPressed: () {
           _statesController.update(WidgetState.selected, !_isSelected);
           widget.onPressed?.call();
         },
         child: Padding(
           padding: const EdgeInsets.symmetric(
             horizontal: 16,
             vertical: 8,
           ),
           child: Text(
             "System Off",
           ),
         ),
       );
     }
   }
   

   flutter doctor -v

   [!] Flutter (Channel stable, 3.29.1, on macOS 15.1.1 24B2091 darwin-arm64, locale en-US) [2.1s]
       • Flutter version 3.29.1 on channel stable at /Users/mahesh/Development/flutter
       ! Warning: `flutter` on your path resolves to /Users/mahesh/Development/flutter_master/bin/flutter,
         which is not inside your current Flutter SDK checkout at /Users/mahesh/Development/flutter.
         Consider adding /Users/mahesh/Development/flutter/bin to the front of your path.
       ! Warning: `dart` on your path resolves to /Users/mahesh/Development/flutter_master/bin/dart, which
         is not inside your current Flutter SDK checkout at /Users/mahesh/Development/flutter. Consider
         adding /Users/mahesh/Development/flutter/bin to the front of your path.
       • Upstream repository https://github.com/flutter/flutter.git
       • Framework revision 09de023485 (10 days ago), 2025-02-28 13:44:05 -0800
       • Engine revision 871f65ac1b
       • Dart version 3.7.0
       • DevTools version 2.42.2
       • 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 35.0.0) [3.7s]
       • Android SDK at /Users/mahesh/Library/Android/sdk
       • Platform android-35, build-tools 35.0.0
       • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
       • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
         This is the JDK bundled with the latest Android Studio installation on this machine.
         To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
       • Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)
       • All Android licenses accepted.
   
   [✓] Xcode - develop for iOS and macOS (Xcode 16.0) [3.5s]
       • Xcode at /Applications/Xcode.app/Contents/Developer
       • Build 16A242d
       • CocoaPods version 1.16.2
   
   [✓] Chrome - develop for the web [129ms]
       • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
   
   [✓] Android Studio (version 2024.1) [128ms]
       • 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.11+0-17.0.11b1207.24-11852314)
   
   [✓] IntelliJ IDEA Community Edition (version 2021.2.1) [127ms]
       • IntelliJ at /Applications/IntelliJ IDEA CE.app
       • Flutter plugin version 61.2.4
       • Dart plugin version 212.5080.8
   
   [✓] VS Code (version 1.96.2) [19ms]
       • VS Code at /Applications/Visual Studio Code.app/Contents
       • Flutter extension version 3.102.0
   
   [✓] Connected device (3 available) [6.6s]
       • macOS (desktop)                 • macos                 • darwin-arm64   • macOS 15.1.1 24B2091 darwin-arm64
       • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin         • macOS 15.1.1 24B2091 darwin-arm64
       • Chrome (web)                    • chrome                • web-javascript • Google Chrome 131.0.6778.265
   
   [✓] Network resources [1,178ms]
       • All expected network resources are available.
   
   ! Doctor found issues in 1 category.
   

   [✓] Flutter (Channel master, 3.30.0-1.0.pre.330, on macOS 15.1.1 24B2091 darwin-arm64, locale en-US) [1,908ms]
       • Flutter version 3.30.0-1.0.pre.330 on channel master at /Users/mahesh/Development/flutter_master
       • Upstream repository https://github.com/flutter/flutter.git
       • Framework revision 99e1a0652c (10 days ago), 2025-02-25 16:59:54 -0800
       • Engine revision 99e1a0652c
       • Dart version 3.8.0 (build 3.8.0-133.0.dev)
       • DevTools version 2.43.0
   
   [✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [1,806ms]
       • Android SDK at /Users/mahesh/Library/Android/sdk
       • Platform android-35, build-tools 35.0.0
       • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
       • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
         This is the JDK bundled with the latest Android Studio installation on this machine.
         To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
       • Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)
       • All Android licenses accepted.
   
   [✓] Xcode - develop for iOS and macOS (Xcode 16.0) [1,186ms]
       • Xcode at /Applications/Xcode.app/Contents/Developer
       • Build 16A242d
       • CocoaPods version 1.16.2
   
   [✓] Chrome - develop for the web [123ms]
       • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
   
   [✓] Android Studio (version 2024.1) [123ms]
       • 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.11+0-17.0.11b1207.24-11852314)
   
   [✓] IntelliJ IDEA Community Edition (version 2021.2.1) [122ms]
       • IntelliJ at /Applications/IntelliJ IDEA CE.app
       • Flutter plugin version 61.2.4
       • Dart plugin version 212.5080.8
   
   [✓] VS Code (version 1.96.2) [16ms]
       • VS Code at /Applications/Visual Studio Code.app/Contents
       • Flutter extension version 3.102.0
   
   [✓] Connected device (3 available) [6.6s]
       • sdk gphone16k arm64 (mobile) • emulator-5554 • android-arm64  • Android 15 (API 35) (emulator)
       • macOS (desktop)              • macos         • darwin-arm64   • macOS 15.1.1 24B2091 darwin-arm64
       • Chrome (web)                 • chrome        • web-javascript • Google Chrome 131.0.6778.265
   
   [✓] Network resources [280ms]
       • All expected network resources are available.
   
   • No issues found!
   
10. maheshj01

    added

    frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.

    p: material_uimaterial_ui package in flutter/packagesmaterial_ui package in flutter/packages

    has reproducible stepsThe issue has been confirmed reproducible and is ready to work onThe issue has been confirmed reproducible and is ready to work on

    team-frameworkOwned by Framework teamOwned by Framework team

    found in release: 3.29Found to occur in 3.29Found to occur in 3.29

    and removed

    in triagePresently being triaged by the triage teamPresently being triaged by the triage team

    on Mar 10, 2025
11. 6 remaining items

    Load more
12. Piinks

    added

    triaged-designTriaged by Design Languages teamTriaged by Design Languages team

    and removed

    team-frameworkOwned by Framework teamOwned by Framework team

    triaged-frameworkTriaged by Framework teamTriaged by Framework team

    on Aug 26, 2026
13. Piinks

    added

    frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.

    a: animationAnimation APIsAnimation APIs

    team-frameworkOwned by Framework teamOwned by Framework team

    and removed

    p: material_uimaterial_ui package in flutter/packagesmaterial_ui package in flutter/packages

    packageflutter/packages repository. See also p: labels.flutter/packages repository. See also p: labels.

    P2Important issues not at the top of the work listImportant issues not at the top of the work list

    team-designOwned by Design Languages teamOwned by Design Languages team

    triaged-designTriaged by Design Languages teamTriaged by Design Languages team

    on Oct 20, 2026
14. Renzo-Olivares

    added

    P2Important issues not at the top of the work listImportant issues not at the top of the work list

    triaged-frameworkTriaged by Framework teamTriaged by Framework team

    on Oct 20, 2026
15. Renzo-Olivares commented on Oct 20, 2026

    

    Renzo-Olivares

    on Oct 20, 2026

    Contributor

    More actions

    This is still reproducible on master, potentially due to BoxDecoration.lerp and BoxDecoration.scale omitting backgroundBlendMode in their newly constructed BoxDecoration.
16. Renzo-Olivares

    marked BoxDecoration.lerp and scale drop backgroundBlendMode #195757 as a duplicate of this issue on Nov 3, 2026