Question

我已登陆Flutter页面（main.dart）。我有json数据，我正在使用Future来获取它。我的问题是，如果数据为null或json链接已死，我怎么能用空数据显示应用程序。

我的问题是我的Flutter应用程序Strats白色屏幕比黑色显示CircularProgressIndicator。如果存在上述错误，则使用CircularProgressIndicator继续运行黑屏。

当我的应用程序从第二个开始时，我需要显示CircularProgressIndicator并完成剩下的工作。如果json数据为null或链接已死，我仍然需要向我的应用程序显示空数据并显示一些警告。

// TODO: 4) _MyHomePageState Class
class _MyHomePageState extends State<MyHomePage> {

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    this.getCurrencyJsonData();
  }

  Future<String> getCurrencyJsonData() async {
    var response = await http.get(
        Uri.encodeFull("https://secure.*****************fx.jsp"),
        headers: {'Accept': 'application/json'});

    setState(() {
      var resBody = json.decode(response.body);
      currencyData = resBody["currency"];
      stgBuy = currencyData["sterling"]["buy"];
      print("STG: $stgBuy");
    });

    return "Success!";
  }


// TODO: BUILD WIDGET
  @override
  Widget build(BuildContext context) {
    if (currencyData == null){
      return new Center(
          child: new CircularProgressIndicator(
            backgroundColor: lightMainGreen,
          )
      );
    } else {

      return new Scaffold(
        // APPBAR
        appBar: new AppBar(
          title: new Text(
    …… 
    ……
    ……

Answer 1

好的，基于@günter-zöchbauer建议，我使用FutureBuilder并解决了我的问题。这是完整的代码部分：

// TODO: 4) _MyHomePageState Class
class _MyHomePageState extends State<MyHomePage> {


// TODO: BUILD WIDGET
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        // APPBAR
        appBar: new AppBar(
          title: new Text("main.appTitle"),
            style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w500),
          ),
          backgroundColor: midMainGreen,
        ),
        drawer: new DrawerMenu(),

        // BODY
        body: new Center(
          child: new FutureBuilder(
              future: getCurrencyJsonData(),
              builder: (context, snaphot) {
                if (snaphot.hasData) {
                  return new ListView(
                    padding: const EdgeInsets.all(0.0),
                    children: <Widget>[
                      new MainHeader(),
                      new Padding(
                          padding: EdgeInsets.fromLTRB(3.0, 4.0, 3.0, 4.0)),
                      new CurrencyCard(),
                      new LandingListMenu(),
                    ],
                  );
                }
                return new CircularProgressIndicator();
              }),
        ));
  } // build Widget
} // 4) _MyHomePageState Class


    Future<String> getCurrencyJsonData() async {

  var response = await http.get(
      Uri.encodeFull("https://secure.*****************fx.jsp"),
      headers: {'Accept': 'application/json'});

  if (response.statusCode == 200) {
     var resBody = json.decode(response.body);
     currencyData = resBody["currency"];
     if (currencyData != null) {
        stgBuy = currencyData["sterling”][“alis"];

     } else {
        stgBuy = "0.0000";
     }
  } else {
    stgBuy = "0.0000";
  }


  return "Success!";
}

Answer 2

您可以处理getCurrencyData()中的错误。然后在build()中，您可以检查是否收到了错误。

Future<Map<String, dynamic>> getCurrencyJsonData() async (
  try {
    http.Response response = await http.get(url);
    if (response.statusCode == 200) {
      return {"success": json.decode(response.body)};
    }
    // Bad Request
    else if (response.statusCode == 400) {
      return {"error": "Bad request"};
    } else if (response.statusCode == 401) {
      return {"error": "Unauthorized"};
    }
  } on Exception {
    return {"error": "Some exception"};
  }
  setState(() {});
}

@override
Widget build(BuildContext context) {
if (currencyData == null){
  return new Center(
      child: new CircularProgressIndicator(
        backgroundColor: lightMainGreen,
      )
  );
} else if (currencyData.containsKey("error")){
  return new ErrorScaffold(
  ...)
} else {

  return new Scaffold(
  .....

如果json数据为null或json链接已死，我如何显示Flutter应用程序

2 个答案: