Animated Container not animating

Issue

I have an animated container, which starts at width and height 0, and then gets changed to 300 each, after a setState, which I call at initState. But It doesn't seem to animate. Here's the code-

import 'package:flutter/material.dart';

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

  @override
  State<ChooseCardWidget> createState() => ChooseCardWidgetState();
}

class ChooseCardWidgetState extends State<ChooseCardWidget> {
  double height = 0;
  double width = 0;
  final double roundedValue = 20;

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

  void startAnimation() {
    setState(() {
      height = 300;
      width = 300;
    });
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: Duration(seconds: 10),
      height: height,
      width: width,
      decoration: ShapeDecoration(
        shadows: const [
          BoxShadow(color: Colors.grey, blurRadius: 20, spreadRadius: 5)
        ],
        color: Colors.purple,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(roundedValue),
        ),
      ),
    );
  }
}

It just starts off as being 300 in width and height. How do I fix this? Thanks!

Solution

You are calling startAnimation() directly inside initState, means it will get height=300 and width=300 on 1st build.

You can use addPostFrameCallback to animate this, it will set height and width to 300 after 1st frame is build.

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance?.addPostFrameCallback((timeStamp) {
      startAnimation();
    });
  }

Also, you can use

Future.delayed(Duration.zero, () {
      startAnimation();
    });

Answered By - Yeasin Sheikh