As the title states, i really cannot figure out why is this happening, the page is switching but with no animation. What i am trying to do is implement a multi page signup form using a setState and Switch-case to switch between pages, i tried to apply animations, but failed at it.

class _SignupMainState extends State<SignupMain> {

  int _stepNumber = 0;
  Widget _formWidget;

  @override
  void initState() {
    _formWidget = buildChild(context);
    super.initState();
  }

  void nextPage(BuildContext context) {
    setState(() {
      _stepNumber = (_stepNumber + 1);
      _formWidget = buildChild(context);
    });
  }

  void previousPage(BuildContext context) {
    setState(() {
      _stepNumber = (_stepNumber - 1);
      _formWidget = buildChild(context);
    });
  }

  Widget buildChild(BuildContext context) {
    switch (_stepNumber) {
      case 0:
        return Form(
            key: _formKey,
            child: Page1(),
          );
        break;
      case 1:
        return Form(
            key: _formKey,
            child: Page2(),
          );
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: AnimatedSwitcher(
          duration: const Duration(milliseconds: 1000),
          transitionBuilder: (Widget child, Animation<double> animation) {
            return ScaleTransition(child: child, scale: animation);
          },
          child: _formWidget,
          key: ValueKey<int>(_stepNumber),
        ),
      ),
      backgroundColor: Theme.of(context).backgroundColor,
    );
  }

}


Solution 1: Aquiko

Your key is inside of your AnimatedSwitcher, you should put it inside of the widget you're trying to animate.

Example:

class yourclass...{
  Container _container;
  @override
  void initState() {
    _container = _yourWidget();

  }
  @override
  Widget build(BuildContext context) {
    return AnimatedSwitcher(
       ....
       ....
      child:_container 
    );
  }

  Container _yourWidget(){
   return Container(
     key:ValueKey<int>(your key that will change whenever the you decide to change)
   )
 }
}

Then change the _container and the value of your key on a setState