Flutter动画效果插件shimmer_animation的使用

发布于 1周前 作者 caililin 来自 Flutter

Flutter动画效果插件shimmer_animation的使用

Shimmer Animation

pub package Libraries.io dependency status for latest release License

Supports Null Safety

此shimmer动画组件可以帮助你轻松地为项目带来简单而美丽的骨架加载器。

Shimmer在开发社区中被广泛用作骨架加载器或占位符小部件的默认动画。因此,拥有一个易于使用且可自定义的小部件,可以为Android、iOS和Web提供优势,使开发人员能够专注于其实际功能,让shimmer使加载体验更加流畅。

Examples 示例

一些示例可以在本仓库的example目录下找到。

更多详细的示例可以在Examples Repository中找到。

Full Screen 全屏 Loading Widgets 加载组件 Loading Buttons 加载按钮
Full Screen Loading Widgets Loading Buttons

How to use 使用方法

添加依赖

在项目的pubspec.yaml文件中添加shimmer_animation依赖:

dependencies:
  shimmer_animation: ^2.1.0

导入包

在Dart代码中导入shimmer_animation

import 'package:shimmer_animation/shimmer_animation.dart';

应用动画

将任何组件包裹在Shimmer()组件中以应用动画:

Shimmer(
  child: Container(
    color: Colors.deepPurple,
  ),
),

可以通过传递参数来自定义动画的外观和感觉:

Shimmer(
  duration: Duration(seconds: 3), // 默认值
  interval: Duration(seconds: 5), // 默认值: Duration(seconds: 0)
  color: Colors.white, // 默认值
  colorOpacity: 0, // 默认值
  enabled: true, // 默认值
  direction: ShimmerDirection.fromLTRB(),  // 默认值
  child: Container(
    color: Colors.deepPurple,
  ),
),

参数说明

  • @required child:接受一个子Widget,在其上显示动画。
  • color:接受一个Color类型的参数,设置动画覆盖层的颜色,默认值为Colors.white
  • colorOpacity:接受一个double类型的参数,设置动画覆盖层颜色的透明度,默认值为0.3
  • enabled:接受一个bool值,开启或关闭动画,默认值为true
  • duration:接受一个Duration,设置动画周期,默认值为Duration(seconds: 3)
  • interval:接受一个Duration,设置重复动画之间的间隔,默认值为Duration(seconds: 0)即无间隔。
  • direction:接受一个ShimmerDirection,对齐动画方向,默认值为ShimmerDirection.fromLBRT()

详细API文档见这里

License 许可证

MIT License.

完整示例demo

下面是一个完整的示例demo,展示了如何在一个全屏页面中使用shimmer_animation创建一个带有闪烁效果的紫色背景。

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

void main() {
  runApp(const FullPageShimmerExample());
}

class FullPageShimmerExample extends StatelessWidget {
  const FullPageShimmerExample({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: ShimmerPage(),
    );
  }
}

class ShimmerPage extends StatelessWidget {
  const ShimmerPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Shimmer(
        // 动画持续时间,这是唯一必需的参数
        duration: const Duration(seconds: 3),
        // 动画之间的间隔时间,这不是默认值,默认是 Duration(seconds: 0)
        interval: const Duration(seconds: 5),
        // 动画覆盖层颜色,这是默认值
        color: Colors.white,
        // 动画覆盖层颜色透明度,这是默认值
        colorOpacity: 0.3,
        // 是否启用动画,这是默认值
        enabled: true,
        // 动画方向,这是默认值
        direction: const ShimmerDirection.fromLTRB(),
        // 子组件,这是唯一必需的参数
        child: Container(
          color: Colors.deepPurple,
        ),
      ),
    );
  }
}

这个例子创建了一个简单的Flutter应用程序,在主屏幕上展示了一个全屏的紫色容器,并应用了shimmer动画效果。你可以根据需要调整Shimmer组件的参数来改变动画的效果。


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

1 回复

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


当然,以下是如何在Flutter项目中使用shimmer_animation插件来实现Shimmer效果的代码示例。shimmer_animation插件通常用于在加载内容时显示占位符动画,以提供视觉反馈,让用户知道内容正在加载。

1. 添加依赖

首先,你需要在pubspec.yaml文件中添加shimmer_animation的依赖:

dependencies:
  flutter:
    sdk: flutter
  shimmer_animation: ^x.y.z  # 请替换为最新版本号

2. 导入包

在你的Dart文件中导入shimmer_animation包:

import 'package:shimmer_animation/shimmer_animation.dart';

3. 使用Shimmer效果

以下是一个简单的示例,展示如何使用ShimmerAnimation来创建一个Shimmer效果的列表项占位符:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shimmer Animation Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ShimmerScreen(),
    );
  }
}

class ShimmerScreen extends StatefulWidget {
  @override
  _ShimmerScreenState createState() => _ShimmerScreenState();
}

class _ShimmerScreenState extends State<ShimmerScreen> with SingleTickerProviderStateMixin {
  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    // 模拟数据加载
    Future.delayed(Duration(seconds: 2), () {
      setState(() {
        isLoading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Shimmer Animation Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: isLoading
            ? ShimmerEffect(
                child: Column(
                  children: <Widget>[
                    Container(
                      height: 20,
                      decoration: BoxDecoration(
                        color: Colors.grey[300]!,
                        borderRadius: BorderRadius.circular(8),
                      ),
                    ),
                    SizedBox(height: 8),
                    Container(
                      width: double.infinity,
                      height: 16,
                      decoration: BoxDecoration(
                        color: Colors.grey[300]!,
                        borderRadius: BorderRadius.circular(8),
                      ),
                    ),
                    SizedBox(height: 8),
                    Container(
                      width: 60,
                      height: 16,
                      decoration: BoxDecoration(
                        color: Colors.grey[300]!,
                        borderRadius: BorderRadius.circular(8),
                      ),
                    ),
                  ],
                ),
                baseColor: Colors.grey[300]!,
                highlightColor: Colors.grey[100]!,
              )
            : ListView.builder(
                itemCount: 10,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text('Item ${index + 1}'),
                  );
                }),
      ),
    );
  }
}

解释

  1. 依赖添加:在pubspec.yaml文件中添加shimmer_animation依赖。
  2. 导入包:在Dart文件中导入shimmer_animation
  3. 创建Shimmer效果
    • 使用ShimmerEffect包裹一个列(Column),列中包含几个容器(Container),这些容器模拟了列表项的占位符。
    • baseColorhighlightColor分别定义了Shimmer动画的基础颜色和高亮颜色。
  4. 模拟数据加载:使用Future.delayed模拟数据加载过程,加载完成后更新isLoading状态。
  5. 条件渲染:根据isLoading状态决定是显示Shimmer效果还是真实数据。

这个示例展示了如何在Flutter中集成和使用shimmer_animation插件来创建Shimmer效果的占位符动画。希望这个示例对你有所帮助!

回到顶部