Flutter图像 Flutter图像|Flutter

在本节中, 我们将看到如何在Flutter中显示图像。在Flutter中创建应用程序时, 它同时包含代码和资产（资源）。资产是一个文件, 与应用程序捆绑和部署, 可以在运行时访问。资产可以包括静态数据, 配置文件, 图标和图像。 Flutter支持许多图像格式, 例如JPEG, WebP, PNG, GIF, 动画WebP / GIF, BMP和WBMP。
显示图像是大多数移动应用程序的基本概念。 Flutter有一个Image小部件, 允许在移动应用程序中显示不同类型的图像。
如何在Flutter中显示图像要在Flutter中显示图像, 请执行以下步骤：
步骤1：首先, 我们需要在Flutter项目的根目录下创建一个新文件夹, 并将其命名为资产。如果你愿意, 我们也可以给它起任何其他名字。
步骤2：接下来, 在此文件夹中, 手动添加一张图像。
步骤3：更新pubspec.yaml文件。假设图片名称为tablet.png, 则pubspec.yaml文件为：

assets:- assets/tablet.png- assets/background.png

如果assets文件夹包含多个图像, 则可以通过在目录名称的末尾加上斜杠（/）来包括它。

flutter:assets:- assets/

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

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Flutter Image Demo'), ), body: Center(child: Column(children: < Widget> [Image.asset('assets/tablet.png'), Text('A tablet is a wireless touch screen computer that is smaller than a notebook but larger than a smartphone.', style: TextStyle(fontSize: 20.0), )], ), ), ), ); }}

步骤5：现在, 运行应用程序。你将看到类似下面的屏幕。

文章图片
显示来自互联网的图像
从互联网或网络显示图像非常简单。 Flutter提供了内置的Image.network方法来处理来自URL的图像。 Image.network方法还允许你使用一些可选属性, 例如高度, 宽度, 颜色, 适合度等。我们可以使用以下语法来显示来自互联网的图像。

Image.network('https://picsum.photos/250?image=9', )

Imag.Network提供了一种支持动画gif的有用功能。我们可以使用以下语法从互联网显示gif。

Image.network('https://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true', );

让我们通过以下示例了解如何显示来自网络的图像：

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Flutter Image Demo'), ), body: Center(child: Column(children: < Widget> [Image.network('https://static.srcmini.com/tutorial/flutter/images/flutter-creating-android-platform-specific-code3.png', height: 400, width: 250), Text('It is an image displays from the given url.', style: TextStyle(fontSize: 20.0), )], ), ), ), ); }}

输出量
在Android Emulator中运行该应用程序时, 将显示以下屏幕。在这里, 你可以看到给定URL的图像。

文章图片
显示淡入图像
当我们显示图像时, 它只是在加载时弹出到屏幕上。假定用户之间没有用处。为解决此问题, 图像使用FadeInImage小部件, 该小部件在加载目标图像时显示占位符图像, 然后在加载新图像时淡入。 FadeInImage可以处理各种类型的图像, 例如本地资产, 内存中或来自Internet的图像。
来自资产捆绑
Flutter还允许我们将本地资产用作占位符。要使用本地资产, 你需要在项目pubspec.yaml文件中添加资产。

flutter:assets:- assets/loading.gif

让我们看下面的示例, 它可以帮助你更清楚地理解它。打开main.dart文件, 然后插入以下代码。

import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Flutter FadeInImage Demo'), ), body: Center(child: Column(children: < Widget> [FadeInImage.assetNetwork(placeholder: 'assets/tablet.png', image: 'https://static.srcmini.com/tutorial/flutter/images/flutter-creating-android-platform-specific-code3.png', height: 400, width: 250), Text('It is an image displays from the given url.', style: TextStyle(fontSize: 20.0), )], ), ), ), ); }}

输出量
现在, 运行该应用程序, 它将在从给定URL显示的图像之前给出膝上型计算机图像（占位符）。

文章图片

文章图片
在记忆中
让我们通过以下示例了解它, 其中FadeInImage与In-Memory一起使用。在这里, 你必须使用transparent_image包作为透明占位符, 并更新pubspec.yaml文件的依赖项, 如下所示：

transparent_image: ^1.0.0

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

import 'package:flutter/material.dart'; import 'package:transparent_image/transparent_image.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Flutter FadeInImage Demo'), ), body: Center(child: Column(children: < Widget> [FadeInImage.memoryNetwork(placeholder: kTransparentImage, image: 'https://static.srcmini.com/tutorial/flutter/images/flutter-creating-android-platform-specific-code3.png', height: 400, width: 250), Text('It is an image displays from the given url.', style: TextStyle(fontSize: 20.0), )], ), ), ), ); }}