Flutter - 在 FutureBuilder 中使用 RefreshIndicator 拉动刷新

Question

编辑：Minimal reproducible example。请查看main.dart中的刷新方法。

我使用FutureBuilder 来显示网络请求的结果。我在initstate 中调用我的 fetch 方法（如建议的here）：

Future<List<CheckIn>> futureCheckIn;

@override
void initState() {
  super.initState();
  _eventArg = Provider.of<EventArg>(context, listen: false);

  _helper = ApiHelper(context);
  futureCheckIn = _helper.fetchCheckIns(_eventArg.getEvent().id.toString());
}

我现在想使用RefreshIndicator 来允许用户刷新屏幕。 这很好用，直到我的网络请求以异常结束（例如 404）。通常，异常会被FutureBuilder 捕获，但在执行RefreshIndicator 中的请求后，异常未处理...

这是我的代码：

RefreshIndicator buildResult(List<CheckIn> checkIns, BuildContext context) {
return RefreshIndicator(
  key: _refreshKey,
  onRefresh: () async {
    setState(() {});
    futureCheckIn =
        _helper.fetchCheckIns(_eventArg.getEvent().id.toString()); // this could end with an exception
  },
  child: Container(
    height: MediaQuery.of(context).size.height,
    child: SingleChildScrollView(
      physics: AlwaysScrollableScrollPhysics(),
      scrollDirection: Axis.vertical,
      child: Column(
        children: [
          Container(
            margin: EdgeInsets.all(10),
            child: Text(
              constants.CHECK_IN_SCREEN_DESCRIPTION,
              style: TextStyle(fontSize: 16),
              textAlign: TextAlign.justify,
            ),
          ),
          ListView(
            physics: NeverScrollableScrollPhysics(),
            padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
            scrollDirection: Axis.vertical,
            shrinkWrap: true,
            children: checkIns.map((el) {
              return Card(
                elevation: 4,
                child: ListTile(
                  title: Text(el.name),
                  onTap: () async {
                   ...
                  },
                  trailing: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.arrow_forward_ios,
                        color: Colors.black,
                      )
                    ],
                  ),
                ),
              );
            }).toList(),
          )
        ],
      ),
    ),
  ),
);

}

如何正确使用RefreshIndicator 和FutureBuilder？

编辑@Shri Hari：抛出此异常

class AppException implements Exception {
 final _message;
 final _prefix;

 AppException([this._message, this._prefix]);

 String toString() {
   return "$_prefix$_message";
 }
}

class NotFoundException extends AppException {
  NotFoundException([String message]) : super(message, "Data not found: ");
}

编辑@Mhark Ba​​toctoy：是的，它是FutureBuilder的一部分：

@override
Widget build(BuildContext context) {
return FutureBuilder(
  future: futureCheckIn,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      List<CheckIn> checkIns = snapshot.data;

      return buildResult(checkIns, context); // RefreshIndicator is nested in here
    } else if (snapshot.hasError) {
      // Error handling
      ... 
    }

    // Spinner während der Datenabfrage
    return Center(
      child: CircularProgressIndicator(),
    );
  },
);

不幸的是，将 onRefresh-Method 更改为

 onRefresh: () async {
  setState(() {});
  futureCheckIn =
    _helper.fetchCheckIns(_eventArg.getEvent().id.toString()); // this could end with an exception
  },

到

onRefresh: () async {
  setState(() {});
  return futureCheckIn =
    _helper.fetchCheckIns(_eventArg.getEvent().id.toString()); // this could end with an exception
  },

或

onRefresh: () async {
  setState(() {});
  return _helper.fetchCheckIns(_eventArg.getEvent().id.toString()); // this could end with an exception
  },

不改错误...

Answer 1

不确定这是否是最佳答案，但我遇到了同样的问题，必须继续前进。所以，这就是我学到和做的。

RefreshIndicator 不喜欢异常。即使在将它们移动到 try / catch 或 onError 下并成功处理异常之后，RefreshIndicator 仍然会为未处理的异常而哭泣（有点奇怪，但我将不得不进行更多调查）。

我所做的是确保我的 API 调用不会引发任何异常。这意味着，API 调用本身（在本例中为 fetchCheckIns() 函数调用）捕获所有类型的已知/未知异常 [catch (e)] 并在您从 API 返回的响应对象中设置一个标志（在本例中为fetchCheckIns()) 的返回类型对象。

现在，在您的FutureBuilder 中，当您调用buildResult(checkIns, context) 时，检查snapshot.data 并查找任何失败标志。如果失败，请以不同的方式渲染屏幕。那就是：

    if (snapshot.hasData) {
      if (snapshot.data.error == true) {
         return ...; // Render error message
      } else {
         return buildResult(snapshot.data, context);
      }
    }

这也意味着，您可能无法返回对象列表，并且可能必须将其包装在一个包含对象列表的对象中。

意味着，您的 CheckIn 对象可能会被类似

class AllCheckIn {
   List<CheckIn> checkIns;
   bool error;
   String errorMsg;
}

或者，您还可以根据您在 API 调用中接收和捕获的异常添加更多错误消息描述，并在您的 FutureBuilder 中使用。

希望这有帮助。

Answer 2

 _helper.fetchCheckIns(_eventArg.getEvent().id.toString()); 

它返回一个未来。您需要的data 或error。您可以在try catch finally 块内使用async await，也可以使用Future.then() / Future.catchError / Future.whenComplete()。

例子：

onRefresh: () async {
try {
   //You can use the await keyword here.
   return futureCheckIn =
    await _helper.fetchCheckIns(_eventArg.getEvent().id.toString());
}catch (err){
  //You can display the error here using a snackbar.
  }finally {
    //This executes whether there is an error or not. 
 }

},