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',
                  ),
                ],
              ),
            ],
          ),
        )
    );
  }

Seems to be working fine on my end. Could you provide a video? — rapaterno, Feb 07 '22 at 00:16
@rapaterno The link I provided has a GIF of what it looks like. This is the easiest way I could show you what my app is doing since I don't know how to record a video of it. When I open the screen with the CircularProgressIndicator, it shows this same loading animation. It shouldn't show anything at all until the button is pressed. — whatwhatwhat, Feb 07 '22 at 02:33

MindStudio · Answer 1 · 2022-02-07T04:14:39.047

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',
),

edited Feb 07 '22 at 04:14

answered Feb 07 '22 at 00:22

MindStudio

706
1
4
13

Where exactly would I modify the code? – whatwhatwhat Feb 07 '22 at 02:13
They meant for it to be added under the CircularProgressIndicator widget. Above the semantic labels field. @whatwhatwhat – rapaterno Feb 07 '22 at 04:02

score -1 · Answer 2 · answered Feb 07 '22 at 01:46

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
        ),
      ),
    );
  }
}

Why is my CircularProgressIndicator spinning randomly when the screen loads?

2 Answers2