Problems with Animated switcher

Question

i am just getting into having to use animation widgets in flutter and i have been having some problems. i am trying to transition from one widget to another using animated switcher. sure enough, it transitions but it does not animate, perhaps i am missing something. help is needed.

class MiddleArea extends StatefulWidget {
  const MiddleArea({Key? key}) : super(key: key);

  @override
  State<MiddleArea> createState() => _MiddleAreaState();
}

class _MiddleAreaState extends State<MiddleArea> {
  bool _flag = true;

  @override
  Widget build(BuildContext context) {
    return Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                GestureDetector(
                  onTap: (){
                    setState(() {
                       _flag = !_flag;
                    });
                  },
                    child: TopIcon(
                      icons: Icons.coffee_outlined, color: Colors.brown.shade300,)
                ),
                TopIcon(icons: Icons.favorite_border, color: Colors.brown.shade300)
              ],
            )
          ],
        ),
            AnimatedSwitcher(
              duration: Duration(seconds: 3),
              transitionBuilder: (Widget child, Animation<double> animation) {
                return ScaleTransition(scale: animation, child: child);
              },
                child: _flag == true ? Center(
                     child: Container(
                       key: Key('1'),
                       height: MediaQuery.of(context).size.height*0.6,
                       width: MediaQuery.of(context).size.width*0.6,
                        child: Image.asset('assets/images/starcup.png'),
                      ),
                    ):Center(
                  child: Container(
                    key: Key('2'),
                    height: MediaQuery.of(context).size.height*0.6,
                    width: MediaQuery.of(context).size.width*0.6,
                    child: Image.asset('assets/images/multi.png'),
                  ),
                ),
                 ),

Answer 1

You are putting the Key inside the Container, while you should put it inside the Center widget

child: _flag == true
? Center(
  key: Key('1'),
  child: Container())
: Center(
  key: Key('2'),
  child: Container()),