搜索分类、插件与代码仓

animated_shimmer 封面
插件详情v1.0.0

animated_shimmer

一个简单且轻量的 widget,用于显示动画闪烁效果。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
176
喜欢数
67
Pub 分数
140

安装插件

flutter pub add animated_shimmer

插件介绍

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

Animated Shimmer 是一个轻量级的 Flutter 包,提供了一个简单的 widget 来创建流畅的动画闪烁效果——常用于用户界面中的加载占位符。它通过在容器上动画渐变来模拟内容加载的外观,为用户提供数据获取过程中的视觉反馈。该包易于集成,并支持所有主要平台,包括 Android、iOS、Web、macOS、Windows 和 Linux。非常适合用于改善延迟内容渲染的应用程序的感知性能。

适合场景

  • 列表中的加载占位符
  • 产品卡片的骨架屏
  • 数据获取期间的视觉反馈
  • 在加载缓慢的区域提升用户体验
  • 个人资料视图中的占位符动画

主要特点

  • 简单的 API,设置简单
  • 平滑渐变动画
  • 跨平台兼容性
  • 轻便尺寸
  • 可自定义的闪烁方向和颜色
  • 支持任何子部件

适合对象

  • 使用加载状态构建UI的开发人员
  • 需要骨架屏的应用
  • 注重性能和简洁性的项目
  • 设计师通过微妙的动画提升用户体验
  • 带有动态内容的移动和网页应用

使用建议

  • 不适合复杂动画
  • 超出基本属性的自定义功能有限
  • 可能会影响非常大的列表的性能
  • 需要手动处理状态管理
  • 最好少量使用,以避免视觉杂乱

原始 README

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

Animated Shimmer

pub package Libraries.io dependency status for latest release License

Supports Null Safety

A simple & lightweight widget to display an animated shimmer effect.

Making a skeleton of a widget with shimmer effect while loading data from server or any other source is a common task that can be easily done with AnimatedShimmer widget. AnimatedShimmer is a simple yet very useful Widget that developers can use it to create an awesome animated shimmer effect for any widget skeleton loading.

Examples

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

More examples will be added soon!

Loading List

How to use

Add animated_shimmer to pubspec.yaml of your project:

dependencies:
  animated_shimmer: ^1.0.0

Import it in your Dart code:

import 'package:animated_shimmer/animated_shimmer.dart';

Declare AnimatedShimmer widget with required height and width:

  AnimatedShimmer(
    height: 10,
    width: 120,
  ),

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

  AnimatedShimmer(
    height: 10,
    width: 120,
    borderRadius: const BorderRadius.all(Radius.circular(16)),
    delayInMilliSeconds: Duration(milliseconds: index * 500),
  ),

To create round AnimaiedShimmer :

  AnimatedShimmer.round(
    size: 50,
  ),
Parameters:
  • @required height : accepts a double to set height of the shimmer effect
  • @required width : accepts a double to set width of the shimmer effect
  • startColor : accepts a Color and sets the start color of the shimmer effect from which animation will start
  • endColor : accepts a Color and sets the end color of the shimmer effect to which animation will end
  • borderRadius : accepts a borderRadius and sets the border radius of the animated shimmer widget
  • delayInMilliSeconds : accepts a Duration that would be the delay in starting the animation. Default value is Duration(milliseconds: 0)

A detailed API Reference can be found on pub.dev

License

MIT License

Copyright (c) 2022 Shubham Soni

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。