Animation not firing at the start of the page in flutter

Issue

I wanted to show an animation that my container increases its width and height just at the start of the page every time. Here it directly takes the values of initstate and doesn't show any animation.

Padding(
              padding: const EdgeInsets.all(8.0),
              child: AnimatedContainer(
                duration: Duration(seconds: 2),
                curve: Curves.easeInOut,
                decoration: BoxDecoration(
                    image:DecorationImage(
                      fit: BoxFit.cover,
                      colorFilter: ColorFilter.mode(Colors.black54, BlendMode.darken),
                      image: AssetImage("lib/images/read.jpg"),
                    ),
                    borderRadius: BorderRadius.circular(10),
                    gradient: LinearGradient(
                        colors: <Color>[
                          Colors.yellowAccent,
                          Colors.blueAccent,
                        ]
                    )
                ),
                width: width,
                height: height,
                child: FlatButton(
                  onPressed: (){
                    Navigator.push(context, MaterialPageRoute(builder: (context)=>Quote_Categories())
                    );
                  },
                  child: Text(
                    'Reader',
                    style: TextStyle(
                      fontSize: 35,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
            ),

height=400;
width=250;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    registernotification();
    width=200;
    height=200;
  }

Solution

initState: Called when this object is inserted into the tree.

So basically you are having width:200 and height = 200 before reading the value, because those are inside initState. You can simply create a Future method with Duration.zero and use setState to update the UI.

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

  changeContainerSize() {
    Future.delayed(Duration.zero).then((value) {
      setState(() {
        width = 200;
        height = 200;
      });
    });
  }

Or use addPostFrameCallback

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
      setState(() {
        width = 200;
        height = 200;
      });
    });
  }

Answered By - Yeasin Sheikh