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

Answer 3

I created a separate stateful widget to show a circular progress indicator for 5 seconds, then show an empty screen.

class ShowLoadingAndEmptyScreen extends StatefulWidget {
    const ShowLoadingAndEmptyScreen({
        super.key
    });

    @override
    State < ShowLoadingAndEmptyScreen > createState() =>
        _ShowLoadingAndEmptyScreenState();
}

class _ShowLoadingAndEmptyScreenState extends
State < ShowLoadingAndEmptyScreen > {
    bool isLoading = true;

    @override
    Widget build(BuildContext context) {
        Future.delayed(const Duration(seconds: 5), () {
            if (mounted) {
                setState(() {
                    isLoading = false;
                });
            }
        });
        return isLoading ?
            const Scaffold(body: Center(child:
                CircularProgressIndicator(), ), ): const EmptyScreen(
                title: 'You haven\'t place any order yet',
                subtitle: 'order something and make me happy :)',
                buttonText: 'Shop now',
                imagePath: 'assets/images/cart.png',
            );
    }
}

Then in the main file I am verifying if the order-list is empty or not to finally show the orders or clear the screen.

@override
Widget build(BuildContext context) {

        final ordersProvider = Provider.of < OrdersProvider > (context);
        final ordersList = ordersProvider.getOrders;
        return FutureBuilder(
            future: ordersProvider.fetchOrders(),
            builder: (context, snapshot) {
                return ordersList.isEmpty ?
                    const ShowLoadingAndEmptyScreen(): Scaffold(body: ListView(children: ordersList);
                    });
        }