关注我们

Flutter - Images

在本节中，无涯教程将看到如何在Flutter中显示图像。在Flutter中创建应用程序时，它同时包含代码和assets(资源)。asset是一个文件，与应用程序捆绑和部署，并且可以在运行时访问。asset可以包括静态数据，配置文件，图标和图像。 Flutter支持许多图像格式，例如JPEG，WebP，PNG，GIF，动画WebP/GIF，BMP和WBMP。

加载本映图片

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

步骤1:首先，无涯教程需要在Flutter项目的根目录下创建一个新文件夹，并将其命名为asset。如果您愿意，无涯教程也可以给它起任何其他名字。

步骤2:接下来，在此文件夹中，手动添加一个图像。

步骤3:更新 pubspec.yaml 文件。假设图像名称是 tablet.png，然后pubspec.yaml文件是:

复制代码

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

如果asset文件夹包含多个图像，无涯教程可以通过在最后指定 slash(/)字符的目录名来包含它。

复制代码

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方法还允许您使用一些可选属性，例如高度(height)，宽度(width)，颜色(color)，适合度(fit)等。无涯教程可以使用以下语法来显示来自互联网的图像。

复制代码

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.learnfk.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 模拟器中运行应用程序时，会出现以下屏幕。在这里，您可以看到给定URL的图像。

加载图片动画

当无涯教程显示图像时，它只是在加载时弹出到屏幕上。解决此问题，该Image使用FadeInImage小部件，该小部件在加载目标图像时显示一个占位符图像，然后在加载新图像时淡入。 FadeInImage可以处理各种类型的图像，例如asset，内存中或来自远程的图像。

从本地资源(asset)加载

Flutter还允许无涯教程将本地asset资源用作占位符。要使用asset资源，您需要在项目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.learnfk.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.learnfk.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),
              )
            ],
          ),
        ),
      ),
    );
  }
}

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

李智慧 · 高并发架构实战课 -〔李智慧〕

超级访谈：对话汤峥嵘 -〔汤峥嵘〕

高并发系统实战课 -〔徐长龙〕

结构写作力 -〔李忠秋〕

好记忆不如烂笔头。留下您的足迹吧 :)