flutter顶部小部件_在Flutter中获取数据并将其显示在小部件上

flutter顶部小部件

从Internet上获取数据是每个开发人员都应掌握的最常见操作之一。 在Flutter中，此操作非常简单。 在这篇文章中，我们将学习如何处理数据从获取到在我们的移动应用程序上显示。

建立

首先，我们需要知道将从何处获取数据。 我们将使用Dummy Rest API Example 。 您始终可以选择其他数据源，但是就本文而言，此API密钥已绰绰有余。 另外，我们无需注册任何内容即可对此虚拟API进行API调用。

其次，我们需要通过pubspec.yaml安装此应用程序所需的插件。

dependencies:
  json_annotation: ^2.4.0
  http: 0.12 .0 +4

dev_dependencies:
  build_runner: ^1.0.0
  json_serializable: ^3.0.0

然后运行flutter pub get

现在我们很好。

模型

就像其他OOP语言一样，我们需要为传入的数据创建模型类。 让我们从创建models.dart开始。

由于从互联网上获取数据时大多数数据都是JSON类型的，因此我们将需要处理它，因为JSON数据不会自动解析。 为此，我们将使用json_serializable插件，它将为我们完成肮脏的工作。