颤动图像

📌 相关文章

📜 颤动图像

📅 最后修改于: 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),
              )
            ],
          ),
        ),
      ),
    );
  }
}