Skip to content

[Animations] SharedAxisTransition children have improper layout during transition when children are of different size #54585

Closed
flutter/packages
#170
Closed
[Animations] SharedAxisTransition children have improper layout during transition when children are of different size#54585
flutter/packages
#170
Labels
found in release: 1.21Found to occur in 1.21has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: animationsThe animations packagepackageflutter/packages repository. See also p: labels.

Description

@jonaird
jonaird
opened on Apr 12, 2020

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:
bug

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

Activity

  1. VladyslavBondarenko
    added
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    p: animationsThe animations package
    plugin
    on Apr 13, 2020

  2. jason-simmons commented on Apr 13, 2020

    @jason-simmons
    jason-simmons
    on Apr 13, 2020
    Member

    @shihaohong

  3. shihaohong commented on Jun 18, 2020

    @shihaohong
    shihaohong
    on Jun 18, 2020
    Contributor

    As discussed in flutter/packages#170 (comment), one strategy to approach this issue is to expose a layoutBuilder parameter that provides developers full control over the widget's layout, much like the Flutter framework's AnimatedSwitcher.

  4. VladyslavBondarenko commented on Jul 30, 2020

    @VladyslavBondarenko
    VladyslavBondarenko
    on Jul 30, 2020

    Persists with animations: ^1.1.2, current master 1.21.0-6.0.pre.117

    flutter doctor -v 
    [✓] Flutter (Channel master, 1.21.0-6.0.pre.117, on Mac OS X 10.15.6 19G73, locale en-GB)
    • Flutter version 1.21.0-6.0.pre.117 at /Users/nevercode/dev/flutter
    • Framework revision 7ec2d360bc (2 hours ago), 2020-07-29 23:25:38 -0700
    • Engine revision a9910e409c
    • Dart version 2.10.0 (build 2.10.0-1.0.dev 24c7666def)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/nevercode/Library/Android/sdk
    • Platform android-29, build-tools 29.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.6, Build version 11E708
    • CocoaPods version 1.9.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.47.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.12.2

[✓] Connected device (6 available)
    • Redmi Note 7 (mobile)       • 6345c469                                 • android-arm64  • Android 9 (API 28)
    • Nevercode’s iPhone (mobile) • b668e524315069f3db3661ac11ff1f66afafebdb • ios            • iOS 13.6
    • iPhone 11 Pro Max (mobile)  • 55C8466B-5367-492B-8EFE-EC45D980571F     • ios            • com.apple.CoreSimulator.SimRuntime.iOS-13-6 (simulator)
    • macOS (desktop)             • macos                                    • darwin-x64     • Mac OS X 10.15.6 19G73
    • Web Server (web)            • web-server                               • web-javascript • Flutter Tools
    • Chrome (web)                • chrome                                   • web-javascript • Google Chrome 84.0.4147.105

• No issues found!
  5. VladyslavBondarenko
    added
    found in release: 1.21Found to occur in 1.21
    on Jul 30, 2020
  6. federunco
    added a commit that references this issue on Aug 17, 2020

    Make Stack alignment a property

    b7e078c

  7. RobinLbt commented on Aug 21, 2020

    @RobinLbt
    RobinLbt
    on 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.

  8. shihaohong commented on Sep 3, 2020

    @shihaohong
    shihaohong
    on Sep 3, 2020
    Contributor

    This should be fixed with flutter/packages#170, which allows for custom layouts for PageTransitionSwitcher's children.

  9. shihaohong
    closed this as completedon Sep 3, 2020

  10. github-actions commented on Aug 13, 2021

    @github-actions
    github-actionsbot
    on 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 -v and a minimal reproduction of the issue.

  11. github-actions
    locked as resolved and limited conversation to collaborators on Aug 13, 2021
  12. flutter-triage-bot
    added
    packageflutter/packages repository. See also p: labels.
    on Jul 5, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    found in release: 1.21Found to occur in 1.21has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: animationsThe animations packagepackageflutter/packages repository. See also p: labels.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions