Flutter 在屏幕上以flatter显示来自服务器的JSON消息

在我的flatter应用程序中，我正在调用一个函数，该函数向我的服务器发送POST请求。我希望发生的是，如果忘记了一个字段，例如，显示来自服务器的该字段的JSON消息

目前，这是可行的，但是JSON消息打印在我的终端上，但是我希望消息显示在我的屏幕上

dart文件：

import 'package:flutter/material.dart';
import 'package:http/http.dart';
import 'dart:async';
import 'dart:convert';

class Third extends StatelessWidget {
  makePostRequest() async {
    final uri = 'https://infinite-sea-61086.herokuapp.com/api/users/signup';
    final headers = {'Content-Type': 'application/json'};
    Map<String, dynamic> body = {'email': 'test550@gmail.com', 'password': 'test123456', 'confirmPassword': 'test123456'};
    String jsonBody = json.encode(body);
    final encoding = Encoding.getByName('utf-8');

    Response response = await post(
      uri,
      headers: headers,
      body: jsonBody,
      encoding: encoding,
    );

    int statusCode = response.statusCode;
    String responseBody = response.body;
    print(responseBody);
  }

  @override
  Widget build(BuildContext context) {
    makePostRequest();
    return new Center(
      child: new Container(
        child: Row(
          children: <Widget>[],
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
导入“包：http/http.dart”；
导入“dart:async”；
导入“dart:convert”；
第三类扩展了无状态小部件{
makePostRequest（）异步{
最终用户识别码https://infinite-sea-61086.herokuapp.com/api/users/signup';
最终标题={'Content-Type'：'application/json'}；
映射体={'email'：'test550@gmail.com“，”密码“：”test123456“，”确认密码“：”test123456“}；
字符串jsonBody=json.encode（body）；
最终编码=encoding.getByName（'utf-8'）；
回复=等待发帖(
乌里，
标题：标题，
body:jsonBody，
编码：编码，
);
int statusCode=response.statusCode；
字符串responseBody=response.body；
打印（应答本）；
}
@凌驾
小部件构建（构建上下文）{
makePostRequest（）；
返回新中心(
子容器：新容器(
孩子：排(
儿童：[]，
),
),
);
}
}

来自服务器的消息示例，显示在终端上（我希望显示在屏幕上）：

颤振：“用户名”是必需的

print（）

将在控制台上打印其参数。将http响应放在小部件中

---

此外，您可以将该文本小部件包装在一个文件中，并将您的

makePostRequest（）

作为将来的文件传递，以便在可用时显示响应。这可能会有帮助。

您必须使用

FutureBuilder

类在小部件之间发出请求。我刚刚更新了你的代码，一定能用

第三类扩展了无状态小部件{
Future makePostRequest（）异步{
最终用户识别码https://infinite-sea-61086.herokuapp.com/api/users/signup';
最终标题={'Content-Type'：'application/json'}；
映射体={'email'：'test550@gmail.com“，”密码“：”test123456“，”确认密码“：”test123456“}；
字符串jsonBody=json.encode（body）；
最终编码=encoding.getByName（'utf-8'）；
回复=等待发帖(
乌里，
标题：标题，
body:jsonBody，
编码：编码，
);
int statusCode=response.statusCode；
字符串responseBody=response.body；
打印（应答本）；
返回响应体；
}
@凌驾
小部件构建（构建上下文）{
makePostRequest（）；
返回新中心(
子容器：新容器(
孩子：排(
儿童：[
未来建设者(
future:makePostRequest（），
生成器：（上下文，快照）{
if（snapshot.hasData）{
返回文本（snapshot.data）；
}
返回循环ProgressIndicator（）；
},
)
],
),
),
);
}
}

我用文本（responseBody）代替了打印，但是屏幕上没有显示任何内容。我还在makePostRequest函数中尝试了new Text（），但是屏幕上没有显示任何内容。文本小部件应该放在小部件树中，在行的子列表中，例如，当我实现此代码时，我得到一个错误，说Future类型不是Future类型的子类型。我想这可能与我的函数需要返回一个异步值有关，但是我不确定。是的。函数必须具有Future作为返回类型，正如我在回答中所做的那样