📜  颤动图像

📅  最后修改于: 2021-01-02 05:04:59             🧑  作者: Mango

颤动图像

在本节中,我们将看到如何在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

如果文件夹中包含一个以上的图像资产,我们可以通过在最后的斜杠(/)字符指定目录名包括它。

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: [
              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: [
              Image.network(
                  'https://static.javatpoint.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可以处理各种类型的图像,例如本地资产,内存中或来自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: [
              FadeInImage.assetNetwork(
                placeholder: 'assets/tablet.png',
                image: 'https://static.javatpoint.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: [
              FadeInImage.memoryNetwork(
                placeholder: kTransparentImage,
                image: 'https://static.javatpoint.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),
              )
            ],
          ),
        ),
      ),
    );
  }
}