来自 API 的数据需要很长时间才能加载到 Flutter 中的仿真器上

Question

我正在 ListView.builder 小部件中从 Coingecko 加载加密 API。

这是 API： https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false

如果我在启动模拟器时第一次加载它，数据几乎会立即显示。 这还不错。

但是，如果我对我的 UI 进行编辑并尝试进行热重新加载，通常情况下，数据需要一段时间才能出现在模拟器上，大约需要 1 分钟到 5 分钟。 有时，屏幕上没有加载任何内容，我想知道它是否真的还在幕后运行。 这让我很难进行调整/调整/设计 UI。 我要么必须：

1. 等待它出现在屏幕上或

2. 关闭模拟器并再次从虚拟设备管理器重新启动，以使数据立即出现在屏幕上。

有没有办法让来自 API 的数据加载得更快，让设计体验更流畅？ 还是我做错了？

仅供参考，我使用 Android Studio。

任何帮助将非常感激。 提前致谢。

代码如下：

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreen();
}

class _HomeScreenState extends State<HomeScreenScreen> {

  Future<List<Asset>> fetchCoin() async {
    assetList = [];
    final response = await http.get(Uri.parse(
        'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false'));

    if (response.statusCode == 200) {
      List<dynamic> values = [];
      values = json.decode(response.body);
      if (values.length > 0) {
        for (int i = 0; i < values.length; i++) {
          if (values[i] != null) {
            Map<String, dynamic> map = values[i];
            assetList.add(Asset.fromJson(map));
          }
        }
        setState(() {
          assetList;
        });
      }
      return assetList;
    } else {
      throw Exception('Failed to load coins');
    }
  }

  @override
  void initState() {
    fetchCoin();
    Timer.periodic(Duration(seconds: 1), (timer) => fetchCoin());
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Add Asset', style: TextStyle(color: Colors.black),),
        elevation: 0,
        toolbarHeight: 50,
        backgroundColor: Colors.white,
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search, color: Colors.black26),
            onPressed: () {},
          )
        ],
      ),
      body: ListView.builder(
        scrollDirection: Axis.vertical,
        itemCount: assetList.length,
        itemBuilder: (context, index) {
          return AssetCryptoCard(
            name: assetList[index].name,
            image: assetList[index].image,
          );
        },
      ),
    );
  }
}

Answer 1

应用程序在主线程上做太多工作。 这种应用程序应该在多线程概念的帮助下开发。所以 flutter 在 Isolates 的帮助下也支持多线程。 它将提供高性能。 在本教程下面可能会有所帮助

https://www.javatpoint.com/dart-isolates

https://pub.dev/documentation/flutter_isolate/

Answer 2

代码每秒调用一次限速 API。 当超过该速率时，API 会停止响应 200 个响应，直到一段时间后恢复，此时阈值被重置。

Timer.periodic(Duration(seconds: 1), (timer) => fetchCoin());