Flutter图片加载动画插件image_loading_animation的使用

Flutter图片加载动画插件image_loading_animation的使用

这是一个简单的包，用于将图像用作自定义加载动画。

特性

您可以使用任何资源图像或网络图像来创建自定义加载动画。

开始使用

  1. 导入该包。
  2. 调用 ImageLoadingAnimation()。
  3. 通过 assetImage 或 networkImage 传递任何图像。
  4. 如果您想使用 networkImage，别忘了将 usingNetworkImage 设置为 true。

使用示例

ImageLoadingAnimation(
  assetImage: 'assets/download.png',
)

其他信息

您可以使用以下可选参数：

Color? backgroundColor,
String? networkImage,
bool? usingNetworkImage,
double? imageWidth,
double? imageHeight,
Duration? animationDuration,
bool? reverseAnimation,
double? containerWidth,

贡献

欢迎您进行任何出色的更改。

// custom_loading_animation 是 Tahmeed’s Lab 的一部分

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 image_loading_animation 插件。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Image Loading Animation Example'),
        ),
        body: Center(
          child: ImageLoadingAnimation(
            assetImage: 'assets/download.png', // 使用资源图像
            imageWidth: 100, // 图像宽度
            imageHeight: 100, // 图像高度
            backgroundColor: Colors.grey[200], // 背景颜色
            animationDuration: Duration(milliseconds: 500), // 动画持续时间
            containerWidth: 150, // 容器宽度
          ),
        ),
      ),
    );
  }
}

更多关于Flutter图片加载动画插件image_loading_animation的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图片加载动画插件image_loading_animation的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter中使用image_loading_animation插件来加载图片并显示加载动画的示例代码。

首先，确保你已经在pubspec.yaml文件中添加了image_loading_animation依赖：

dependencies:
  flutter:
    sdk: flutter
  image_loading_animation: ^3.0.0  # 请检查最新版本号

然后运行flutter pub get来安装依赖。

接下来，在你的Flutter项目中，你可以按照以下方式使用ImageLoadingAnimation小部件：

import 'package:flutter/material.dart';
import 'package:image_loading_animation/image_loading_animation.dart';
import 'package:cached_network_image/cached_network_image.dart'; // 用于网络图片加载

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Image Loading Animation Example'),
        ),
        body: Center(
          child: ImageLoadingAnimation(
            // 使用CachedNetworkImageProvider来加载网络图片
            imageProvider: CachedNetworkImageProvider(
              'https://via.placeholder.com/600x400', // 替换为你的图片URL
            ),
            placeholder: CircularProgressIndicator(
              strokeWidth: 2.0,
            ), // 占位符动画，这里使用了CircularProgressIndicator
            imageAnimationBuilder: (context, child, animationController) {
              return FadeTransition(
                opacity: animationController,
                child: SlideTransition(
                  position: Tween<Offset>(
                    begin: Offset(0, 0.5),
                    end: Offset(0, 0),
                  ).animate(animationController),
                  child: child,
                ),
              );
            },
            loadingWidgetBuilder: (context, child, animationController) {
              return Center(
                child: CircularProgressIndicator(
                  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
                ),
              );
            },
            errorWidget: (context, error, stackTrace) => Icon(Icons.error),
          ),
        ),
      ),
    );
  }
}

代码解释：

  1. 依赖导入：

    • image_loading_animation：用于显示加载动画。
    • cached_network_image：用于从网络加载图片，并缓存它们。

  2. ImageLoadingAnimation 小部件：

    • imageProvider：使用CachedNetworkImageProvider来加载网络图片。
    • placeholder：在图片加载之前显示的占位符动画，这里使用了CircularProgressIndicator。
    • imageAnimationBuilder：定义图片加载完成后的动画。这里使用了FadeTransition和SlideTransition来创建淡入和滑动的动画效果。
    • loadingWidgetBuilder：定义图片正在加载时的动画。这里同样使用了CircularProgressIndicator，但颜色不同。
    • errorWidget：定义图片加载失败时显示的组件。这里简单地显示了一个错误图标。

通过这种方式，你可以轻松地在Flutter应用中实现图片加载动画效果。记得根据你的实际需求调整动画和组件的样式。

回到顶部