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 {
  @override
  Widget 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 {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
            title: Text('Flutter Image Demo'), ), body: Center(
          child: Column(
            children: <Widget>[
              Image.network(
                  'https://static.srcmini02.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 {
  @override
  Widget 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.srcmini02.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

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

import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget 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.srcmini02.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), )
            ], ), ), ), );
  }
}