I would like to remove a form card from the screen on submit with a fading or shrinking animation. The thing is, I am removing it from the screen if the form validation is correct. (I can create something synchronous and, I can remove it from the screen after the animation(?))

The problem I have, I don't know the size of the card. so I can't just call setState() and change the initial size.

What is the best way to remove a Widget with an animation from the tree?

This is what I tried so far, I don't know if it's correct way:

Future.delayed(Duration.zero, () {
  setState(() {
    _height = _containerKey.currentContext!.size!.height;
    _width = _containerKey.currentContext!.size!.width;
  });
});

I used this function in initState() to get the dynamic card's width and height. And on submit, I will just set the size of the card to 0. (I am using Future.delayed to make sure it runs after the build method but, not sure if it's right)

CodePudding user response：

You can use boolean to keep track of whether to show or hide the form card. Initially set boolean showFormCard to true and once after validation change it to false and setState.

Likewise for animation you can use AnimatedOpacity : https://api.flutter.dev/flutter/widgets/AnimatedOpacity-class.html