显示循环进度指示器，异步任务答案

【问题标题】：Show circular progress indicator, async task显示循环进度指示器，异步任务
【发布时间】：2020-09-04 17:52:07
【问题描述】：

我试图在运行异步任务时显示一个循环进度指示器。异步任务由单击按钮触发，并且还将用户引导至新页面。代码如下所示：

child: GestureDetector(
   onTap: () async{

     //some async task that takes a few seconds

     Navigator.push( ...
}

我希望用户在单击按钮时首先看到一个圆形进度指示器，当任务完成时，他应该被引导到另一个屏幕。但我不知道如何向他展示这个进度指示器。提前感谢您的回答！

【问题讨论】：

标签： flutter asynchronous dart progress-indicator

【解决方案1】：

你可以使用这个库https://pub.dev/packages/simpleprogressdialog

创建ProgressDialog的对象

ProgressDialog progressDialog = ProgressDialog(context: context, barrierDismissible: false);

然后在你的异步任务之前调用showMaterial

progressDialog.showMaterial(layout: MaterialProgressDialogLayout.overlayWithCircularProgressIndicator);

然后在异步任务之后，关闭对话框。

progressDialog.dismiss();

【讨论】：

【解决方案2】：

我做了一些你想要的模拟：

检查下面的代码：

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  // boolean variable to decide when to show progress indicator
  bool showProgress = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: InkWell(
          onTap: () async {
            // set the progress indicator to true so it will be visible
            setState(() {
              showProgress = true;
            });
            // perform asynchronous task here
            await Future.delayed(Duration(seconds: 4), null);

            setState(() {
              // set the progress indicator to true so it would not be visible
              showProgress = false;
              // navigate to your desired page
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => AnotherScreen()));
            });
          },
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Your widgets can stay here',
                style: TextStyle(fontSize: 20),
              ),
              SizedBox(
                height: 20,
              ),
              Container(
                height: 50,
                width: 50,
                color: Colors.blue,
                child: Center(
                  // use ternary operator to decide when to show progress indicator
                  child: showProgress
                      ? CircularProgressIndicator()
                      : Text('Tap me'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

检查下面的输出：

Output here

注意：为简单起见（使用了上面的示例）。避免多次调用setState。您可以使用Bloc 或Provider 之类的状态管理技术，并可能决定使用服务定位器进行注入。

【讨论】：