CircularProgressIndicator does not stop

Question

It is probably a basic question, but I did not found an answer. I execute CircularProgressIndicator() and the screen shows the circle but the circle is stopped? In my case, it continues... endless... Why? Do I need to make a call in order to stop it?

below the sample code:

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:web_scraper/web_scraper.dart';
import 'dart:io';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _count = 0;
  bool ShowCircle = true;


  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample Code'),
      ),
      body: Center(
      child : Column(
      children: <Widget>[
        //sleep(const Duration(seconds:2)),
        Text("Sample",style:TextStyle(fontSize: 21)),
      ]



      )),
      backgroundColor: Colors.blueGrey.shade200,
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ShowCircle = !ShowCircle;
          if (ShowCircle)
          CircularProgressIndicator(value:0.0);
          else
            CircularProgressIndicator(value:1.0);
        },
        tooltip: 'Increment Counter',
        child: const Icon(Icons.add),
      ),
    );
  }
}

BR Asi

Answer 1

As the official documentation says, the CircularProgressIndicator have two behavior :

• Determinate. Determinate progress indicators have a specific value at each point in time, and the value should increase monotonically from 0.0 to 1.0, at which time the indicator is complete. To create a determinate progress indicator, use a non-null value between 0.0 and 1.0.
• Indeterminate. Indeterminate progress indicators do not have a specific value at each point in time and instead indicate that progress is being made without indicating how much progress remains. To create an indeterminate progress indicator, use a null value.

https://api.flutter.dev/flutter/material/CircularProgressIndicator-class.html

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool _showCircle = true;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample Code'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Text("Indeterminate", style: TextStyle(fontSize: 21)),
            _showCircle ? CircularProgressIndicator() : CircularProgressIndicator(value: 0.0),
            Text("Determinate", style: TextStyle(fontSize: 21)),
            _showCircle ? CircularProgressIndicator(value: 0.7) : CircularProgressIndicator(value: 0.0),
          ],
        ),
      ),
      backgroundColor: Colors.blueGrey.shade200,
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _showCircle = !_showCircle;
          });
        },
        tooltip: 'Increment Counter',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Answer 2

You can wrap the circular progress indicator in a Visibility widget:

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool _showCircle = true;

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample Code'),
      ),
      body: Center(
        child: Visibility(
          visible: _showCircle,
          child: CircularProgressIndicator(),
        ),
      ),
      backgroundColor: Colors.blueGrey.shade200,
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _showCircle = !_showCircle;
          });
        },
        tooltip: 'Show/Hide Circular Progress Indicator',
        child: const Icon(Icons.add),
      ),
    );
  }
}

In this example, pressing the button will toggle the visibility of the circular progress indicator on/off.