Repository navigation
[Animations] SharedAxisTransition children have improper layout during transition when children are of different size #54585
Description
Steps to Reproduce
The following should reproduce the problem:
import 'package:flutter/material.dart';
import 'package:animations/animations.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(backgroundColor: Colors.black),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageTransitionSwitcher(
transitionBuilder: (Widget child, Animation<double> animation,
Animation<double> secondaryAnimation) {
return SharedAxisTransition(
child: child,
animation: animation,
secondaryAnimation: secondaryAnimation,
transitionType: SharedAxisTransitionType.horizontal,
);
},
duration: Duration(milliseconds: 500),
child: _counter % 2 == 0 ? Big() : Small()),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_counter++;
});
},
child: Icon(Icons.add),
),
);
}
}
class Big extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(width: 300, height: 600, color: Colors.green);
}
}
class Small extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(width: 75, height: 400, color: Colors.red);
}
}
animations 1.0.0+5
Expected results:
Expected the correct layout for next child when transitioning between widgets
Actual results:
Logs
[✓] Flutter (Channel beta, v1.15.17, on Mac OS X 10.14.6 18G87, locale en-US)
• Flutter version 1.15.17 at /Users/jonathanaird/developer/flutter sdk/flutter
• Framework revision 2294d75bfa (5 weeks ago), 2020-03-07 00:28:38 +0900
• Engine revision 5aff311948
• Dart version 2.8.0 (build 2.8.0-dev.12.0 9983424a3c)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
• Android SDK at /Users/jonathanaird/Library/Android/sdk
• Android NDK location not configured (optional; useful for native profiling support)
• Platform android-28, build-tools 28.0.3
• ANDROID_HOME = /Users/jonathanaird/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1248-b01)
• All Android licenses accepted.
[!] Xcode - develop for iOS and macOS (Xcode 10.2.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 10.2.1, Build version 10E1001
✗ Flutter requires a minimum Xcode version of 11.0.0.
Download the latest version or update via the Mac App Store.
• CocoaPods version 1.6.1
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 3.3)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin version 33.3.1
• Dart plugin version 182.5215
• Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1248-b01)
[✓] VS Code (version 1.43.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.9.1
[✓] Connected device (3 available)
• BND L34 • 4AV7N18B16000149 • android-arm64 • Android 8.0.0 (API 26)
• Chrome • chrome • web-javascript • Google Chrome 80.0.3987.163
• Web Server • web-server • web-javascript • Flutter Tools
Reacted by mmgyce, Philip Lindberg, RobinLabiche, Vignes Aruljothi and Steven Spiel
Activity
jason-simmons commentedon Apr 13, 2020
@shihaohong
shihaohong commentedon Jun 18, 2020
As discussed in flutter/packages#170 (comment), one strategy to approach this issue is to expose a
layoutBuilderparameter that provides developers full control over the widget's layout, much like the Flutter framework's AnimatedSwitcher.VladyslavBondarenko commentedon Jul 30, 2020
Persists with
animations: ^1.1.2, current master1.21.0-6.0.pre.117flutter doctor -v
Make Stack alignment a property
RobinLbt commentedon Aug 21, 2020
Is there any workaround for this problem ? I'm having it everytime I use PageTransitionSwitcher
EDIT: The only way I've found for now is to create a CustomPageTransitionSwitcher which takes as a new argument a Alignment, which is then used in the Stack widget.
shihaohong commentedon Sep 3, 2020
This should be fixed with flutter/packages#170, which allows for custom layouts for
PageTransitionSwitcher's children.github-actions commentedon Aug 13, 2021
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.