搜索插件、代码仓与 APP 分类

shimmer_animation 封面
插件详情v2.2.2+1

shimmer_animation

此闪烁动画小部件可帮助您轻松地为项目添加简单而美观的骨架加载器。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
1.2万
喜欢数
517
Pub 分数
160

安装插件

flutter pub add shimmer_animation

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

ShimmerAnimation 是一个 Flutter 包,提供了一种简单而优雅的方式来实现应用中的骨架加载器。它使开发者能够创建流畅、动画化的占位符 UI,模拟真实内容加载的外观,从而提升感知性能和用户体验。通过最少的设置,它支持 Android、iOS、Web、macOS、Windows 和 Linux 等多个平台。该组件高度可定制,并能无缝集成到现有的 Flutter 项目中。

适合场景

  • 加载列表的占位符
  • 防止数据获取期间出现空白屏幕
  • 在加载缓慢的界面中提升用户体验
  • 创建现代、动态的用户界面
  • 在网格中显示内容骨架
  • 模拟实时数据加载

主要特点

  • 平滑闪烁动画效果
  • 跨平台兼容性
  • 与 Flutter 的轻松集成
  • 可自定义的颜色和渐变
  • 支持多种容器形状
  • 轻量且高效

适合对象

  • 寻求视觉精炼的UI/UX设计师
  • 开发数据密集型应用程序的开发者
  • 专注于感知性能的团队
  • 需要现代加载状态的项目
  • 具有动态或异步内容的应用程序
  • 原型设计交互界面

使用建议

  • 可能需要额外的样式才能实现复杂的布局
  • 不适合静态占位内容
  • 对超大列表的性能影响
  • 超出基本动画之外的自定义功能有限
  • 最好与适当的加载状态管理一起使用
  • 需要理解 Flutter 的 widget 树

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

Shimmer Animation

pub package Libraries.io dependency status for latest release License

Supports Null Safety

This shimmer animation widget can help you bring simple yet beautiful skeleton loaders to your project with ease.

Shimmer is very widely used as the default animation for skeleton loaders or placeholder widgets throughout the development community. Therefore, having an easy to use, yet customizable widget ready to use for Android, iOS and Web, gives developers an advantage to focus on their actual functionality, let shimmer make the loading experience smoother.

Examples

An example can be found in the example directory of this repository.

A list of detailed examples can be found in this Examples Repository

Full Screen Loading Widgets Loading Buttons

How to use

Add shimmer_animation to pubspec.yaml of your project:

dependencies:
  shimmer_animation: ^2.1.0

Import it in your Dart code:

import 'package:shimmer_animation/shimmer_animation.dart';

Wrap any widget with Shimmer() widget to apply animaton:

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

A number of parameters can be passed to customise the look and feel of this animation:

  Shimmer(
    duration: Duration(seconds: 3), //Default value
    interval: Duration(seconds: 5), //Default value: Duration(seconds: 0)
    color: Colors.white, //Default value
    colorOpacity: 0, //Default value
    enabled: true, //Default value
    direction: ShimmerDirection.fromLTRB(),  //Default Value
    child: Container(
      color: Colors.deepPurple,
    ),
  ),
Parameters:
  • @required child : accepts a child Widget over which the animation is to be displayed
  • color : accepts a parameter of type Color and sets the color of the animation overlay. Default value is Colors.white
  • color : accepts a parameter of type double and sets the Opacity of the color of the animation overlay. Default value is 0.3
  • enabled : accepts a bool which toggles the animation on/off. Default value is true
  • duration : accepts a Duration that would be the time period of animation. Default value is Duration(seconds: 3)
  • interval : accepts a Duration that would be the interval between the repeating animation. Default value is Duration(seconds: 0) i.e. no interval
  • direction : accepts a ShimmerDirection and aligns the animation accordingly. Default value is ShimmerDirection.fromLBRT()

A detailed API Reference can be found here.

License

MIT License.

所属分类

源码仓库

使用此插件的项目