flutter - ProgressIndicator duration in Flutter

Question

How to show progress indicator so that it should show for about 15 seconds.Once it pass 15 seconds a button appears at center "try again" with a message at below "no internet connection".

Answer 1

You can add a delay using Future.delayed(), and to change the widgets in run time, we can use setState().

Combining it all together, you can try something like this:

Widget _dialogContent; // Declare this outside the method, globally in the class

// In your method:
_dialogContent = CircularProgressIndicator();
showDialog(
        context: context,
        builder: (BuildContext context) => Container(
          child: AlertDialog(
            content: _dialogContent, // The content inside the dialog
          )
        )
    ); // Your Dialog
Future.delayed(Duration(seconds: 15)); // Duration to wait
setState((){
  _dialogContent = Container(...), // Add your Button to try again and message text in this
})

Answer 2

You can use a setState with a timer that stops it self

bool isLoading = false;   //create a variable to define wheather loading or not

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);


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

class _MyHomePageState extends State<MyHomePage> {

  //creating the timer that stops the loading after 15 secs
  void startTimer() {
    Timer.periodic(const Duration(seconds: 15), (t) {
      setState(() {
        isLoading = false; //set loading to false
      });
      t.cancel(); //stops the timer
    });
  }

  @override
  void initState() { 
    startTimer();  //start the timer on loading 
    super.initState();    
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(        
        title: Text("App Name"),
      ),
      body: Center(
        child: isLoading
            ? Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  CircularProgressIndicator(), //show this if state is loading
                  Text("Loading...."),
                ],
              )
            : Container(
              //your desiggn here
              ),
      ),
    );
  }
}