仅当API响应出现抖动时如何加载UI？

Question

如何在创建UI之前调用API，并且仅当API响应出现波动时才加载UI。

[基本上，我只想在API响应到来时才加载UI，否则我想显示错误消息，那么有人可以帮我吗？如何做到这一点？

Answer 1

使用FutureBuilder：

基于交互的最新快照自行构建的小部件与未来。

完整示例：

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

import 'package:flutter/foundation.dart';
import 'package:http/http.dart' as http;

// podo class
class ObjectClass {
  String name;

  ObjectClass({this.name});

  ObjectClass.fromJson(Map<String, dynamic> json) {
    name = json['name'];
  }
}

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => new _DemoState();
}

class _DemoState extends State<Demo> {
  Future<List<ObjectClass>> fetchJson() async {
    final response = await http.Client().get('your json url');
    return compute(parseJson, response.body);
  }

// A function that converts a response body into a List<ObjectClass>.
  List<ObjectClass> parseJson(String responseBody) {
    final parsed = json.decode(responseBody).cast<Map<String, dynamic>>();
    return parsed
        .map<ObjectClass>((json) => ObjectClass.fromJson(json))
        .toList();
  }

  Widget _bodyBuild({List<ObjectClass> data}) {
    return Container(); // make your ui here and use the 'data' variable
  }

  Widget demoBody() {
    return FutureBuilder<List<ObjectClass>>(
      future: fetchJson(), // api call method here, to fetch json/data
      builder: (context, snapshot) {
        if (snapshot.hasError) {
          return Container(); // widget to be shown on any error
         } 

        return snapshot.hasData
            ? _bodyBuild(data: snapshot.data)
            : Text("Loading"); // widget to be shown while data is being loaded from api call method
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: Text("DEMO")), body: demoBody());
  }
}