Flutter

Question

我在 async 函数中从 firebase 数据库 获取数据，该函数在按下按钮时触发。数据获取完成后，它会移至下一页（下一个活动）。因此，在整个过程中，async on pressed 函数需要时间来执行整个代码。所以，我想在执行整个代码之前显示一个进度条。谁能建议我如何在新 activity 开始之前显示进度条。

这是我的代码：

FlatButton(

              child: Text("Next",style: TextStyle(
              color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontFamily: "Calibri",
                  fontSize: 20)),
              color: Colors.blue,
              onPressed:() {
                elist.then((value)
             async {



                 for (var item in value) {
                   alleyes.add(new facial(criminal_id: item.criminal_id,
                       part_size: item.part_size,
                       link: item.link));
                   Uint8List bytes = (await NetworkAssetBundle(Uri.parse(item.link)).load(item.link)).buffer.asUint8List();
                   eye_str.add(String.fromCharCodes(bytes));




                 }
                 Navigator.push(context,
                     MaterialPageRoute(builder: (context)=>App()));
             }
                );
              },
            )

Answer 1

您可以先创建一个名为 loading 的变量。

bool loading = false;

在此之后，您可以在点击按钮时将 loading 设置为 true，并在加载 variable 为 true[=16 时显示进度指示器=]

loading
      ? Center(child: CircularProgressIndicator())
      : FlatButton(
    child: Text("Next",style: TextStyle(
        color: Colors.white,
        fontWeight: FontWeight.bold,
        fontFamily: "Calibri",
        fontSize: 20)),
    color: Colors.blue,
    onPressed:() {
      setState((){
        loading = true;
      }); // set loading to true here
      elist.then((value)
      async {
        for (var item in value) {
          alleyes.add(new facial(criminal_id: item.criminal_id,
              part_size: item.part_size,
              link: item.link));
          Uint8List bytes = (await NetworkAssetBundle(Uri.parse(item.link)).load(item.link)).buffer.asUint8List();
          eye_str.add(String.fromCharCodes(bytes));
        }

        setState((){
          loading = false;
        }); // set it to false after your operation is done
        Navigator.push(context,
            MaterialPageRoute(builder: (context)=>App()));
      }
      );
    },
  )

Flutter - 如何为按钮的 on:Pressed() 功能提供进度条？

Flutter - How to give progress bar to on:Pressed() function of a button?

asynchronous

dart

progress-bar

flutter-layout