AnimatedSwitcher with conditional render problem

[liudonghua123]

Steps to Reproduce

1. write code using AnimatedSwitcher with conditional render like the following snippets

                        /// TabBarContent
                        AnimatedSwitcher(
                          duration: Duration(milliseconds: 400),
                          child: [
                            CourseDetailsIntroduce(
                                key: ValueKey<String>("details_introduce"),
                                course: course),
                            CourseDetailsComment(
                                key: ValueKey<String>("details_comment"))
                          ][_tabController.index],
                        ),

2. The child content of the AnimatedSwitcher is different height, the first one is higher then the second one.
3. When switch from tab1 to tab2, then you can see the content of tab2 is appear from bottom to top, not hold its original position.

Expected results:

The content of tab is no moving horizontally.

Actual results:
see the following gif.

[TahaTesser]

Hi @liudonghua123
can you please provide your flutter doctor -v and flutter run --verbose?
Also, to better address the issue, would be helpful if you could post a minimal code sample to reproduce the problem
Thank you

[liudonghua123]

@TahaTesser @joekendal Thanks for interesting in this issue, I write a small demo to demonstrate this issue, see https://dartpad.cn/1af2ade4cde5ed5862b8481fe5b89d32 or http://dartpad.dev/1af2ade4cde5ed5862b8481fe5b89d32.

This problem exists in web platform (dartpad) too.

Here is my flutter doctor output.

D:\code\flutter\flutter_chips_input>flutter doctor -v
[✓] Flutter (Channel unknown, v1.18.0-7.0.pre.1, on Microsoft Windows [Version
    10.0.18363.778], locale en-US)
    • Flutter version 1.18.0-7.0.pre.1 at D:\apps\flutter
    • Framework revision 3495ba76c4 (6 days ago), 2020-04-21 15:42:33 +0800
    • Engine revision 2bde4f0ae4
    • Dart version 2.9.0 (build 2.9.0-1.0.dev a12c36dd97)


[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at D:\apps\android_sdk
    • Platform android-29, build-tools 29.0.2
    • ANDROID_HOME = D:\apps\android_sdk
    • Java binary at: D:\apps\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b04)
    • 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.5.4)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.5.30011.22

[✓] Android Studio (version 3.6)
    • Android Studio at D:\apps\Android Studio
    • Flutter plugin version 45.1.1
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b04)

[✓] VS Code, 64-bit edition (version 1.44.2)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.9.1

[✓] Connected device (4 available)
    • Android SDK built for x86 64 • emulator-5554 • android-x64    • Android 10 (API 29)
      (emulator)
    • Windows                      • Windows       • windows-x64    • Microsoft Windows
      [Version 10.0.18363.778]
    • Chrome                       • chrome        • web-javascript • Google Chrome
      81.0.4044.122
    • Web Server                   • web-server    • web-javascript • Flutter Tools

• No issues found!

D:\code\flutter\flutter_chips_input>

[TahaTesser]

Hi @liudonghua123
Do would be solved by implementing #48217 this?

[liudonghua123]

@TahaTesser Hi, I tried to use IndexedStack with AnimatedSwitcher, it did not have this problem, however using IndexedStack will case another problem, the height of IndexedStack will always use the maxium height of the children. If I navigate to a tight height tab, then there will some blank spaces below it. see #55464 for more details. So I dropped this solution.

The first version of code is write using TabBar and TabBarView, but using TabBarView will case not have size problem. Because I need to use TabBarView in a Column, the children of TabBarView is dynamic height, I can't give a specified height to the TabBarView. see #54968 for more details.

For the demo code, I can make it work expected by wrapping the conditional rendering child with Container, but this fix will not work for mine own code. I think if the key reasons found or bugs fixed for the demo code, then mine code will work too.

[liudonghua123]

For me, the best solution is to use TabBar and TabBarView, and make TabBarView to fit the children's height ,like the Wrap widget does.
In this way, the logic is clear, and the switch animation is also fit my designs.