Flutter 中的 ProgressIndicator 持续时间

Question

如何显示进度指示器，以便它应该显示大约 15 seconds.Once 15 秒后按钮出现在中心 "try again" 下方有一条消息 "no internet connection"。

Answer 1

您可以使用 Future.delayed() 添加延迟，要在运行时间内更改小部件，我们可以使用 setState().

将它们结合在一起，你可以尝试这样的事情：

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

您可以将 setState 与计时器一起使用，该计时器会自行停止

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

Flutter 中的 ProgressIndicator 持续时间

ProgressIndicator duration in Flutter

progress-indicator

dart

flutter