Flutter：在异步 Api 调用后显示警报对话框

Question

这是获取登录响应的代码。如果出现错误，我想显示一个警告对话框，说明登录期间出现错误。

Future<String> login(String username, String password) async {
    Map<String, dynamic> params = {
       'username': username,
       'password': password,
    };

    final response = await http.post('apiurl', body: params);

    if (response.statusCode != 200)
       throw Exception(response.body);

    return response.body;
}

我正在添加调用 login 的代码。 _loginController 中有一个 TODO，我想在其中显示一个显示错误的警报对话框。

class LoginWidgetState extends State<LoginWidget> {
  var _usernameController = new TextEditingController();

  var _passwordController = new TextEditingController();

  void _loginButtonClickHandler() {
    var username = _usernameController.text;
    var password = _passwordController.text;

    login(username, password).then((response) {

    }).catchError((e) {
      //TODO : show an Alert Here
    });
  }

  @override
  Widget build(BuildContext context) {
    var container = Center(
      child: Container(
    child: Column(
      children: <Widget>[
        TextField(
          decoration: InputDecoration(
            hintText: "username",
          ),
          controller: _usernameController,
        ),
        TextField(
          obscureText: true,
          decoration: InputDecoration(hintText: "password"),
          controller: _passwordController,
        ),
        RawMaterialButton(
          onPressed: _loginButtonClickHandler,
          child: Text("Login"),
        )
       ],
     ),
    ),
   );

   return container;
  }

}

Answer 1

为已接受的答案提供更多上下文...

如果您进行远程 API 调用，例如 this：

login(username, password).then((response) {

}).catchError((e) {
  //TODO : show an Alert Here
});

然后您可以用这个替换 TODO（如果您通过单击按钮调用它）：

_showAlertDialog(context);

或者这个（如果你在 build() 方法或 initState() 中调用它：

WidgetsBinding.instance.addPostFrameCallback((_) => _showAlertDialog(context));

其中方法定义为

void _showNewVersionAvailableDialog(BuildContext context) {
  final alert = AlertDialog(
    title: Text("Error"),
    content: Text("There was an error during login."),
    actions: [FlatButton(child: Text("OK"), onPressed: () {})],
  );

  showDialog(
    context: context,
    builder: (BuildContext context) {
      return alert;
    },
  );
}

注意事项

• 您需要引用BuildContext。
• 有关 addPostFrameCallback 的更多信息，请阅读this article。

Answer 2

请参阅here 以显示对话框。

发送context 到_loginButtonClickHandler 就完成了。干杯

Answer 3

您可以为此使用 RFlutter Alert 库。它是 Flutter 易于定制且易于使用的警报/弹出对话框库。希望对你有帮助。

使用 RFlutter Alert 的示例警报：

Alert(context: context, title: "RFLUTTER", desc: "Flutter is awesome.").show();

*我是 RFlutter Alert 的开发者之一。

Answer 4

这对你有帮助！

  Future<String> login(String username, String password) async {
    Map<String, dynamic> params = {
       'username': username,
       'password': password,
    };

    final response = await http.post('apiurl', body: params);

    if (response.statusCode != 200)
    {
      throw Exception(response.body);
    }
    else 
    {
      showWhateverFunction();
    }
    return response.body;
}