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

【问题标题】：Flutter - How to give progress bar to on:Pressed() function of a button?Flutter - 如何为按钮的 on:Pressed() 功能提供进度条？
【发布时间】：2020-07-22 10:37:59
【问题描述】：

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

这是我的代码：

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

【问题讨论】：

标签： flutter asynchronous dart progress-bar flutter-layout

【解决方案1】：

您可以从创建一个名为 loading 的变量开始。

bool loading = false;

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

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

【讨论】：