How do I switch between two different widgets on the same location in flutter?

Issue

I have a card widget which has some info and a button. On button press, I want to animate the card to change to a different card at the same location. The animation will be added later.

As per my current code, I am using a bool to control which widget to display.

My card1 has the following code-

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()
      ),
    )

The ProductEnquiryWidget is the second card. It has a form with a button. What I want to do is to submit the form on button press and animate back to the first card.

How do I do that? I don’t want to put the code for the second card in the same file as the first card as it will make the code too large.

I am using a boolean named detailsCardIsVisible to control which card to display. Is there a way I could manipulate that variable from button tap in the second card?

Solution

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,
)

Answered By – Günter Zöchbauer

Answer Checked By – Senaida (FlutterFixes Volunteer)