Why is my CircularProgressIndicator spinning randomly when the screen loads?

Question

I have a CircularProgressIndicator that is meant to display progress when the user presses a button. However, when I open the screen that uses this class it shows a loading animation and I'm not sure why. When the screen opens, it shouldn't show the animation until the user presses the button.

When the screen opens you see something similar to the animation on this page: https://www.c-sharpcorner.com/article/create-chrome-like-loading-animation/

class _MsgInputState extends State<MsgInput> with TickerProviderStateMixin {

  AnimationController? controller;

  @override
  void initState() {
    super.initState();
    initialize();

  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }

  void initialize() async {
    controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 3),
    )..addListener(() {
      setState(() {});
    });
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Align(
          alignment: Alignment.bottomLeft,
          child: Column(
            children: [
              Row(
                children: [
                  GestureDetector(
                    onTap: () async {
                      controller?.forward();
                    },
                    onLongPressDown: (details) async {
                      controller?.forward();
                    },
                    onLongPressUp: () async {
                      controller?.stop();
                      controller?.reset();
                    },
                    child: Text('Record'),
                  ),
                ],
              ),
              Row(
                children: <Widget>[
                  SizedBox(width: 100),
                  CircularProgressIndicator(
                    value: controller?.value,
                    semanticsLabel: 'Linear progress indicator',
                  ),
                ],
              ),
            ],
          ),
        )
    );
  }

Answer 1

If the value provided to a CircularProgressIndicator is null it just defaults to a spinnging animation.

In the beginnin controller?.value probably returns null. Change it to value: controller?.value ?? 0 so that while it's null 0 is used as a value.

EDIT:

change

CircularProgressIndicator(
  value: controller?.value,
  semanticsLabel: 'Linear progress indicator',
),

to

CircularProgressIndicator(
  value: controller?.value ?? 0,
  semanticsLabel: 'Linear progress indicator',
),

Answer 2

Here is a quick examples on how the provided example could be achieved:

class StateProgress extends StatelessWidget {
  const StateProgress({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: SizedBox(
        height: 50,
        width: 50,
        child: CircularProgressIndicator(
          strokeWidth: 2,
          valueColor: AlwaysStoppedAnimation<Color>(Colors.blueAccent /*Should be the color of the indicator*/),
          backgroundColor: Colors.white, //  Could be made to match the color of the background the indicator is on
        ),
      ),
    );
  }
}