flutter - How do I animate a container when the page is initializing;

Question

class _MaintenanceState extends State<Maintenance> {

Function below is supposed to initialise the animation

    @override
    void initState() {
      super.initState();
        _animate();
    }

var loginWidth = 0.0;
Curve _curve = Curves.fastOutSlowIn;
_animate() {
  setState(() {
    loginWidth == 0.0 ? loginWidth = 130 : loginWidth = 0.0;
  });
}

I tried placing the width of the animated container in the initState but it still doesn't animate.

                  AnimatedContainer(
                    duration: Duration(seconds: 1),
                    width: loginWidth,
                    height: 60.0,
                    decoration: BoxDecoration(

                      color: Colors.green[600],
                      borderRadius: BorderRadius.circular(20.0),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Row(
                        children: [
                          Text("Add 
Project"),
                              )),
                          Spacer(),
                          Image(
                            image: AssetImage(
                              "assets/images/add_icon.png",
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),

Any suggestions would be much appreciated

question from:https://stackoverflow.com/questions/65643022/how-do-i-animate-a-container-when-the-page-is-initializing

Answer 1

There are several things you have to consider to animate.

1. use AnimationController to track the currentstate of animation, to set the duration till which you want to animate and other several properties if you want to add in animation.
2. if you are using animation you have to use SingleTickerProviderStateMixin or MultiTickerProviderStateMixin mixin in your class.

I am sharing my GitHub project link in which I used a simple animation you can refer to it.