Animation not working properly in flutter?

Question

I want 1st circle to go up and come down when I press the click button!

the animation is not working. I tried restarting the app many times but the problem still remains. what is the problem?

import 'package:flutter/material.dart';

    class Pin extends StatefulWidget {
    @override
    _PinState createState() => _PinState();
    }

    class _PinState extends State<Pin> with SingleTickerProviderStateMixin {
    AnimationController _controller;
    Animation<EdgeInsets> _animation;
    @override
    void initState() {
        super.initState();
        _controller = AnimationController(
        vsync: this,
        duration: Duration(milliseconds: 300),
        );

        _animation = EdgeInsetsTween(
        begin: EdgeInsets.only(top: 0, left: 0, right: 0, bottom: 0),
        end: EdgeInsets.only(top: 0, left: 0, right: 0, bottom: 12),
        ).animate(CurvedAnimation(
        parent: _controller,
        curve: Curves.easeInOut,
        ));

        //_controller.forward();
        _controller.addStatusListener((status) {
        if (status == AnimationStatus.completed) {
            _controller.reverse();
        }
        });
    }

    @override
    Widget build(BuildContext context) {
        return Container(
        padding: const EdgeInsets.all(100),
        width: double.infinity,
        height: MediaQuery.of(context).size.height * 0.6,
        color: const Color.fromRGBO(113, 201, 206, 1),
        child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[

            Container(
                width: 233,
                height: 44,
                color: Colors.blue,
                child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                    Container(
                    padding: _animation.value,
                    height: double.infinity,
                    color: Colors.red,
                    alignment: Alignment.bottomCenter,
                    child: Container(
                        width: 32,
                        height: 32,
                        decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(16),
                        ),
                    ),
                    ),
                    Container(
                    height: double.infinity,
                    alignment: Alignment.bottomCenter,
                    child: Container(
                        width: 32,
                        height: 32,
                        decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(16),
                        ),
                    ),
                    ),
                    Container(
                    height: double.infinity,
                    alignment: Alignment.bottomCenter,
                    child: Container(
                        width: 32,
                        height: 32,
                        decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(16),
                        ),
                    ),
                    ),
                    Container(
                    height: double.infinity,
                    alignment: Alignment.bottomCenter,
                    child: Container(
                        width: 32,
                        height: 32,
                        decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(16),
                        ),
                    ),
                    ),
                ],
                ),
            ),
            Container(
                child: RaisedButton(
                onPressed: () {
                    setState(() {
                    _controller.stop();
                    _controller.forward();
                    print("Animation Started");
                    });
                },
                child: Text("Chick!"),
                ),
            ),
            ],
        ),
        );
    }
    }

all the elements are made up of containers where this has one large blue rectangle container and inside it has, small four containers and inside it has a container with a rounded corner.

Answer 1

Your code looks fine, but one piece is missing,

That you should listen to each change of your AnimationController and each time rebuild that part of your view that should be animated.

Just add that in your initState() method:

_controller.addListener((){
    setState(() {});
});

Also, you could remove setState from RaisedButton onPressed:, it's not necessary to have it there.