当我们在执行Flutter app时, 我们无法控制一切因素, 所以一定会有错误的出现, 那如何处理错误就成了一门必学的课程了!

基本的错误处理

Future<Response> getNetworkResponse() async {  try {    final uri = uri.parse('http://.....');    final response = await.http.get(uri);    switch(response.statusCode) {      case 200:        final data = json.decode(response.body);        return Response.fromJson(data);     default:       throw Exception(response.reasonPhrase);    }  } catch(_) {    rethrow;  }}

上方的程式码是在透过 http package 去得做一个 GET 的请求, 拿到一份资料.

如果成功得到并拆解成功就会回传一个 Response.

但当发生错误时我们就会抛出一个错误讯息

基本的使用如下:

try {  final response = await getNetworkResponse();  print(response);} catch (e) {  // 做错误处理}

但是我们的 getNetworkResponse 并没有特意提及到需要做错误处理, 所以常常会有人忘记加 try/catch, 导致网路有问题时 app 就会坏掉！

因此我们可以透过一些办法来提醒需要使用这个 Function 的人来做处理.

最基本的方法就是 加注解, 当你的滑鼠移到Function上时会出现这些提示

但是！有些人是不会去看这些的, 所以我们要使用更强硬的方式！

MultipleResult

MultipleResult 是一个 pub.dev的套件, 可以提供多个回传值, 我们可以用下面的方式来限制使用这个function必须要处理error

Future<Result<Response, Exception>> getNetworkResponse() async {  try {    final uri = uri.parse('http://.....');    final response = await.http.get(uri);    switch(response.statusCode) {      case 200:        final data = json.decode(response.body);        final res = Response.fromJson(data)        return Success(res);     default:       return Error(Exception());    }  } catch(_) {     return Error(Exception());  }}

接着使用 when 来处理回传的资料:

final response = getNetworkResponse();response.when(  (success) {    // 处理结果  },  (exception) {    // 错误处理  },);

其他更详细的使用方法可以到他的网站去查看网站去查看, 里面有更详细的说明跟範例

客製化错误讯息

说完了一般的错误处理, 但是总是可能会有意外的发生, 因此我们可以在app的最外层加上一层保险,

一般如果没有特别处理错误的话, 画面会长成下面这个样子

使用者看到就会觉得 ??? 发生什么事情了?!

但是如果能放上自己客製化的Widget, 虽然还是遇到了错误, 但是对使用者来说就会觉得比较没什么, 而且还能即时处理.

下面我们就来讲解该如何加入自己客製化的错误处理 Widget

void main() {  ErrorWidget.builder = (details) {    return CustomErrorWidget();  };  runApp(const MyApp());}

只要将 CustomErrorWidget 改成自己想要的 Widget, 就可以在有错误没有被catch时跑到这个画面, 然后再做自己想要的处理！

今天就介绍到了这里了,我的部落格还有其他Flutter的教学文 大家可以去看看！