如何在flutter中同一位置的两个不同小部件之间切换？

Question

我有一个卡片小部件，它有一些信息和一个按钮。按下按钮时，我想为卡片设置动画以在同一位置更改为不同的卡片。动画将在稍后添加。

根据我当前的代码，我使用 bool 来控制要显示的小部件。

我的 card1 有以下代码-

SliverFillRemaining(
      child: Padding(
        padding: const EdgeInsets.only(
            top: 10.0, left: 6.0, right: 6.0, bottom: 6.0),
        child: detailsCardIsVisible ? Card(
            elevation: 2.0,
            clipBehavior: Clip.antiAlias,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(8.0))),
            child: productInfoCard()) : ProductEnquiryWidget()
      ),
    )

ProductEnquiryWidget 是第二张卡片。它有一个带按钮的表单。我想要做的是在按下按钮时提交表单并将动画返回到第一张卡片。

我怎么做？我不想将第二张卡的代码与第一张卡放在同一个文件中，因为这会使代码过大。

我正在使用一个名为detailsCardIsVisible的布尔值来控制要显示的卡片。有没有办法可以通过第二张卡中的按钮点击来操纵该变量？

Answer 1

https://docs.flutter.io/flutter/widgets/AnimatedCrossFade-class.html

AnimatedCrossFade(
  duration: const Duration(seconds: 3),
  firstChild: FirstChild(),
  secondChild: SecondChild(),
  crossFadeState: _first ? CrossFadeState.showFirst : CrossFadeState.showSecond,
)