在 Flutter 中管理帖子中的错误

Question

I made an application for the company that i work, the app its working and solved some problems, but the code is a mess, since i'm not a official programmer and this is my very first application. Now i'm trying to improve the code.

The problem here is that i dont know how to check if the http post was successful.

In the code below you can see that i made some error treatment but its not working properly. For example, if the app doesnt receive the "ok" message from the server it will return a error, but if the internet isnt working it will not return the error because it will be trying forever to send the post. I would like to always check if the post was successfull and notify the user, or show a error after a time of trying (like 2 seconds, i dont know), whats the best way to solve this?

Any other tips to improve the code are welcome.

    if ((_usuarioController.text.isEmpty) ||
        (_placaController.text.isEmpty) ||
        (_boxController.text.isEmpty) ||
        (dropdownValue1 == "Vehicle type")) {
      Toast.show(
        "\n  Complete all fields  \n",
        context,
        duration: Toast.LENGTH_LONG,
        gravity: Toast.CENTER,
        backgroundRadius: 5.0,
      );
    } else if (_pecasList.length < 1) {
      showDialog(
          context: context,
          builder: (BuildContext context) {
            return AlertDialog(
                title: new Text("Empty List"),
                actions: <Widget>[
                  new FlatButton(
                      child: new Text("Close"),
                      onPressed: () {
                        Navigator.of(context).pop();
                      }),
                ]);
          });
    } else {
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: new Text("Send the items?"),
            actions: <Widget>[
              new FlatButton(
                  child: new Text("Close"),
                  onPressed: () {
                    Navigator.of(context).pop();
                  }),
              new FlatButton(
                  child: new Text("Send"),

                  onPressed: () async {
                    Map<String, dynamic> newDados = Map(); 
                    newDados["usuario"] = _usuarioController.text.trimLeft();
                    newDados["placa"] = _placaController.text.trimLeft();
                    newDados["box"] = _boxController.text.trimLeft();
                    newDados["tipo_veiculo"] = dropdownValue1;
                    _dadosList.add(newDados);
                    print(_pecasList + _dadosList);

                    Map<String, String> headers = new Map<String, String>();
                    headers["Content-type"] = "application/json";
                    headers["Accept"] = "application/json";
                    //String str = '{"take":55, "skip":"0"}';
                    final resp = await http.post('http://' + ipServidor,
                        body: jsonEncode(_dadosList +
                            _pecasList), //+ jsonEncode(_pecasList),
                        headers: headers);

                    print(resp.statusCode);

                    _dadosList
                        .clear(); //Cleans the list
                    print(resp.body);
                    if (resp.statusCode == 200) {
                      if (resp.body == "ok") {
                        setState(() {
                          print(_pecasList);
                          _pecasList.clear();
                          _placaController.clear();
                          _boxController.clear();
                          dropdownValue1 = "Vehicle type";

                          Navigator.of(context).pop();
                        });
                      } else {
                        showDialog(
                            context: context,
                            builder: (BuildContext context) {
                              return AlertDialog(
                                  title: new Text(
                                      "Error"),
                                  actions: <Widget>[
                                    new FlatButton(
                                        child: new Text("Close"),
                                        onPressed: () {
                                          Navigator.of(context).pop();
                                          Navigator.of(context).pop();
                                        }),
                                  ]);
                            });
                      }
                    } else {
                      print("communication error");
                      Navigator.of(context).pop();
                      showDialog(
                          context: context,
                          builder: (BuildContext context) {
                            return AlertDialog(
                                title: new Text("communication error"),
                                actions: <Widget>[
                                  new FlatButton(
                                      child: new Text("Close"),
                                      onPressed: () {
                                        Navigator.of(context).pop();
                                      }),
                                ]);
                          });
                    }
                  })
            ],
          );
        },
      );
    }
  }```

Answer 1

but if the internet isnt working it will not return the error because it will be trying forever to send the post.

To solve that what you wanna do is to add timeout to your http calls.

int timeout = 10;
try {
  http.Response response = await http.post('http://' + ipServidor,
      headers: headers,
      body: jsonEncode(_dadosList + _pecasList), encoding: utf8).
      timeout(Duration(seconds: timeout));
  if (response.statusCode == 200) {
    // do something
  } else {
    // handle it
  }
} on TimeoutException catch (e) {
  print('Timeout Error: $e');
} on SocketException catch (e) {
  print('Socket Error: $e');
} on Error catch (e) {
  print('General Error: $e');
}

Any other tips to improve the code are welcome.

I suggest making a separate dart files with methods for different parts of the code that will be recurring in your app.

1) Create something like http_handler.dart that will have async methods httpPost and httpGet. Example:

httpGet(String url, int attempts, int timeout) async {
  var parsedJson;
  bool success = false;
  int attempt=0;
  while(!success && attempt<attempts) {
    attempt++;
    // your httpGet try catch block
    // inside of it -> if response == 200 then success = true
    // also parse your json here
    if(!success) {
      sleep(const Duration(milliseconds: 500)); //sleep a bit between attempts
    }
  } 
  return parsedJson;
}

2) Create something like confirm_dialog.dart

import 'package:flutter/material.dart';

enum ConfirmAction { CANCEL, ACCEPT }

    Future<ConfirmAction> ConfirmDialog(BuildContext context, String title, String content) async {
      return showDialog<ConfirmAction>(
        context: context,
        barrierDismissible: false, // user must tap on a button to close the dialog!
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text(title),
            content: Text(content),
            actions: <Widget>[
              FlatButton(
                child: Text("NO"),
                onPressed: () {
                  Navigator.of(context).pop(ConfirmAction.CANCEL);
                },
              ),
              FlatButton(
                child: Text("YES"),
                onPressed: () {
                  Navigator.of(context).pop(ConfirmAction.ACCEPT);
                },
              )
            ],
          );
        },
      );
    }

Then when you need your user to confirm or cancel an action you can use it like this:

  ConfirmAction action = await ConfirmDialog(context, "Dialog Title", "Dialog Content");
  if (action == ConfirmAction.ACCEPT) {
     //do something
  }

Answer 2

I have created sample project for to such thing , its highly maintainable and clean copy the code here is the link

In case if you don't want the whole project structure.you can use this for having clean and structured code