Flutter 图片

在本节中，我们将了解如何在 Flutter 中显示图片。当您在 Flutter 中创建应用程序时，它包含代码和资源。资源是与应用程序捆绑和部署并在运行时可访问的文件。资源可以包括静态数据、配置文件、图标和图像。 Flutter 支持许多图像格式，例如 JPEG、WebP、PNG、GIF、动画 WebP/GIF、BMP 和 WBMP。

显示图像是大多数移动应用程序的基本概念。 Flutter 有一个 Image widget，它允许在移动应用程序中显示不同类型的图像。

如何在 Flutter 中显示图像

要在 Flutter 中显示图像，请执行以下步骤

步骤 1：首先，我们需要在 Flutter 项目的根目录内创建一个新的文件夹，并将其命名为 assets。如果您愿意，我们也可以给它起任何其他名称。

步骤 2：接下来，在此文件夹内，手动添加一张图片。

步骤 3：更新 pubspec.yaml 文件。 假设图片名称为 tablet.png，那么 pubspec.yaml 文件为

如果 assets 文件夹包含多个图像，我们可以通过在目录名称后指定 斜杠 (/) 字符来包含它。

步骤 4：最后，打开main.dart文件并插入以下代码。

步骤 5：现在，运行该应用程序。 您将得到类似下面的屏幕。

从互联网显示图片

从互联网或网络显示图片非常简单。 Flutter 提供了一个内置方法 Image.network 来处理来自 URL 的图像。 Image.network 方法还允许您使用一些可选属性，例如 height、width、color、fit 等。 我们可以使用以下语法来显示来自互联网的图像。

Imag.Network 提供了一个有用的东西，它支持动画 gif。 我们可以使用以下语法从互联网显示 gif。

让我们通过以下示例了解如何从网络显示图像

输出

当您在 Android 模拟器中运行应用程序时，会出现以下屏幕。 在这里，您可以看到给定 url 的图像。

显示淡入淡出图像

当我们显示图像时，它们会在加载时简单地弹出到屏幕上。 它不会假设用户之间有任何用处。 为了解决这个问题，Image 使用了 FadeInImage widget，该 widget 在目标图像加载时显示一个占位符图像，然后在加载新图像时淡入新图像。 FadeInImage 可以与各种类型的图像一起使用，例如本地资源、内存中图像或来自互联网的图像。

来自资源包

Flutter 还允许我们使用本地资源作为占位符。 要使用本地资源，您需要在您的项目 pubspec.yaml 文件中添加该资源。

让我们看下面的例子，它可以帮助您更清楚地理解它。 打开 main.dart 文件并插入以下代码。

输出

现在，运行该应用程序，它将在显示来自给定 url 的图像之前提供笔记本电脑图像（占位符）。

内存中

让我们通过以下示例来理解它，其中 FadeInImage 与 In-Memory 一起使用。 在这里，您必须使用 transparent_image 包作为透明占位符，并如下更新 pubspec.yaml 文件的依赖项

现在，打开 main.dart 文件并插入以下代码。 当您运行该应用程序时，它将提供一个透明的图像作为占位符。