"为什么屏幕加载时我的 CircularProgressIndicator 随机旋转？"

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.

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<\/code> is null<\/code> it just defaults to a spinnging animation.

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