如何在 flutter Firestore 數據更新期間顯示成功消息並捕獲錯誤

Question

我有這個 function

Future updateMember(Member member) async {
  final User? user = Auth().currentUser;
  final docMember =
      FirebaseFirestore.instance.collection('users').doc(user?.uid);
  member.id = docMember.id;

  final json = member.toJson();
  final response = await docMember
      .update(json)
      .then((value) => {print("done")})
      .catchError((e) => (e));

  return response;
}

然后我想在這里捕獲錯誤並在此處捕獲成功消息

  final response = updateMember(member);
              if (response.then((value) => 'done') == true) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text('success'),
                    backgroundColor: Colors.green,
                  ),
                );
              } else {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text(catchError(onError)),
                    backgroundColor: Colors.red,
                  ),
                );
              }

請我需要有關如何實現此功能的幫助

Answer 1

出於這種目的，您可以使用 BLoC 模式，它划分 ui 層和域層（與服務器通信），您可以閱讀更多關於 bloc 庫的官方文檔： Bloc 庫它可能對 flutter 中的新手來說很復雜，所以，在您的情況下，您還可以自己在單個小部件中實現 state 管理。

1. 定義 stream 並訂閱它。

  late StreamController _controller;
  late StreamSubscription _subscriber;

  @override
  void initState() {
    _controller = StreamController<http.Response>();
    _subscriber = _controller.stream.listen((event) {
    });
    super.initState();
  }

在控制器的 stream 中，我們將添加所有服務器響應並使用 _subscriber 處理這些響應；

2. 添加到 stream 值以使用

 final response = await docMember
      .update(json)
      .then((value) => {print("done")})
      .catchError((e) => (e));
      _controller.add(response);

每當您收到來自服務器的響應時，您應該調用 _controller.add(response)，向我們的 stream 添加一個新值。

3. 處理 stream 中的響應

  @override
  void initState() {
    _controller = StreamController<http.Response>();
    _subscriber = _controller.stream.listen((event) {
      if (event.statusCode < 200 || event.statusCode > 299)
      {
 ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text('error'),
                    backgroundColor: Colors.red,
                  ),
                );
       
      }
      else
      {
         ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text('success'),
                    backgroundColor: Colors.green,
                  ),
                );
      }
    });

    final response = await docMember
      .update(json)
      .then((value) => {print("done")})
      .catchError((e) => (e));
      _controller.add(response);
    super.initState();
  }

在 stream 中，您將檢查代碼是否“OK”，然后顯示成功消息，否則 - 錯誤。

截取的所有代碼如下所示：

class ParentWidget extends StatefulWidget {
  ParentWidget({Key? key}) : super(key: key);

  @override
  State<ParentWidget> createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  late StreamController<http.Response> _controller;
  late StreamSubscription _subscriber;

  @override
  void initState() {
    _controller = StreamController<http.Response>();
    _subscriber = _controller.stream.listen((event) {
      if (event.statusCode < 200 || event.statusCode > 299)
      {
         ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text('success'),
                    backgroundColor: Colors.green,
                  ),
                );
      }
      else
      {
        ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text('error'),
                    backgroundColor: Colors.red,
                  ),
                );
      }
    });

    final response = await docMember
      .update(json)
      .then((value) => {print("done")})
      .catchError((e) => (e));
      _controller.add(response);
    super.initState();
  }

  @override
  void dispose() {
    _subscriber.cancel();
    _controller.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("Any widget")
    );
  }
}

Answer 2

這解決了問題

updateMember(member)
              .whenComplete(
                  () => ScaffoldMessenger.of(context).showSnackBar(
                        const SnackBar(
                          content: Text('succes'),
                          backgroundColor: Colors.green,
                        ),
                      ))
              .onError((error, stackTrace) =>
                  ScaffoldMessenger.of(context).showSnackBar(
                     SnackBar(
                      content: Text(error.toString()),
                      backgroundColor: Colors.red,
                    ),
                  ));
        });