Repository navigation
AnimatedCrossFade clips CircularProgressIndicator #25950
Description
Activity
To investigate we would need a minimal runnable reproduction
as a single file so that we can just copy your code intolib/main.dartof a new project and run to reproduce.A screenshot that demonstrates the issue would be helpful as well.
minimal runnable reproduction
Can you please make it complete so that copying it as
lib/main.dartallows to run without any additional steps?- added this to the milestone
on Jan 3, 2019 Reproducible on the latest master
1.21.0-6.0.pre.41.flutter doctor -v
[√] Flutter (Channel master, 1.21.0-6.0.pre.41, on Microsoft Windows [Version 10.0.18362.959], locale et-EE) • Flutter version 1.21.0-6.0.pre.41 at C:\Development\flutter_master • Framework revision 39fa00201d (5 hours ago), 2020-07-27 21:11:43 -0700 • Engine revision f27729e97b • Dart version 2.10.0 (build 2.10.0-0.0.dev 24c7666def) [√] Android toolchain - develop for Android devices (Android SDK version 30.0.0) • Android SDK at C:\Users\Isa\AppData\Local\Android\sdk • Platform android-30, build-tools 30.0.0 • Java binary at: C:\Users\Isa\AppData\Local\JetBrains\Toolbox\apps\AndroidStudio\ch-0\193.6626763\jre\bin\java • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01) • All Android licenses accepted. [√] Chrome - develop for the web • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe [√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.6.4) • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community • Visual Studio Community 2019 version 16.6.30309.148 • Windows 10 SDK version 10.0.18362.0 [√] Android Studio (version 4.0) • Android Studio at C:\Users\Isa\AppData\Local\JetBrains\Toolbox\apps\AndroidStudio\ch-0\193.6626763 • Flutter plugin version 47.1.2 • Dart plugin version 193.7361 • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01) [√] VS Code (version 1.47.2) • VS Code at C:\Users\Isa\AppData\Local\Programs\Microsoft VS Code • Flutter extension version 3.12.2 [√] Connected device (5 available) • SM G950F (mobile) • ce12171c51cc001c03 • android-arm64 • Android 9 (API 28) • sdk gphone x86 (mobile) • emulator-5554 • android-x86 • Android 11 (API 30) (emulator) • Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.18362.959] • Web Server (web) • web-server • web-javascript • Flutter Tools • Chrome (web) • chrome • web-javascript • Google Chrome 84.0.4147.89 • No issues found!Padding workaround seems to work fine for now.
Workaround
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatefulWidget { // This widget is the root of your application. @override MyAppState createState() { return new MyAppState(); } } class MyAppState extends State<MyApp> { CrossFadeState xFadeState = CrossFadeState.showFirst; @override Widget build(BuildContext context) { return MaterialApp( title: 'Issue Demo', home: Scaffold( body: Center( child: Container( color: Colors.red, width: 50, height: 50, child: GestureDetector( onTap: () { setState(() { xFadeState == CrossFadeState.showSecond ? xFadeState = CrossFadeState.showFirst : xFadeState = CrossFadeState.showSecond; }); }, child: Center( child: AnimatedCrossFade( firstChild: Text('data'), secondChild: Padding( padding: const EdgeInsets.all(8.0), child: SizedBox( height: 20, width: 20, child: CircularProgressIndicator(), ), ), duration: Duration(milliseconds: 250), crossFadeState: xFadeState, ), ), ), ), ), ), ); } }3 remaining items
I have a similar issue with SizeTransition:
I see a bug in the SizeTransition code (hardcoded ClipRect):
https://github.com/flutter/flutter/blob/d927c9331005f81157fa39dff7b5dab415ad330b/packages/flutter/lib/src/widgets/transitions.dart#LL366C20-L366C20If you remove ClipRect, then there are no problems. In the AnimatedCrossFade (AnimatedSize) widget, the situation is exactly the same, which is why the bug is observed.
any updates?
Reacted by nrabinsAlkami, mdazy and Anton KarpenkoI'm also interested in this one, as the code below produces this - the second row is inside an
AnimatedCrossFade, the first one is not.
Flutter 3.10.2 • channel stable • https://github.com/flutter/flutter.git Framework • revision 9cd3d0d9ff (6 weeks ago) • 2023-05-23 20:57:28 -0700 Engine • revision 90fa3ae28f Tools • Dart 3.0.2 • DevTools 2.23.1import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { final text = RichText( text: const TextSpan( text: 'Right-aligned bold italic underlined', style: TextStyle( color: Colors.black, fontWeight: FontWeight.w600, fontStyle: FontStyle.italic, ), ), ); return MaterialApp( title: 'Flutter Demo', home: Scaffold( appBar: AppBar(), body: Column( children: [ text, AnimatedCrossFade( firstChild: text, secondChild: const SizedBox.shrink(), crossFadeState: CrossFadeState.showFirst, duration: const Duration(milliseconds: 500), ) ], ), ), ); } }
- added a commit that references this issue
on Apr 3, 2026 - added a commit that references this issue
on Apr 23, 2026 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 -vand a minimal reproduction of the issue.- locked as resolved and limited conversation to collaborators
on May 7, 2026
Steps to Reproduce
CircularProgressIndicatorwidget, IncreasestrokeWidthto 10 to better see the issue.AnimatedCrossFadewidget to toggle between the two.Note: Adding padding resulted in a skewed indicator, Which is even more strange.
Detailed issue demonstration
Code to reproduce
In a stateful widget
Without the
SizedBoxWith padding around the
CircularProgressIndicator, Issue seems to be fixed but during transition the indicator is skewed as demonstrated by this gif, Surrounding the padding with aSizedBoxshows that theAnimatedCrossFadedoesn't respect theSizedBox's Size and skews the indicator while animating the size transition anyway.I hope this is enough detail to reproduce, I'll be glad to provide more if needed.
flutter doctor -v