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

pulsator 封面
插件详情v1.0.0+2

pulsator

适用于 Flutter 的脉冲动画。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
23
喜欢数
53
Pub 分数
140

安装插件

flutter pub add pulsator

插件介绍

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

Pulsator 是一个 Flutter 包,为小部件提供简单且可自定义的脉冲动画。它允许开发者在任何小部件周围创建流畅的膨胀和收缩涟漪效果,非常适合突出显示元素或指示交互状态。该动画轻量且易于集成,支持所有主要平台,包括 Android、iOS、Web、macOS、Windows 和 Linux。通过最少的设置,它通过微妙的视觉反馈提升了用户体验。

适合场景

  • 突出显示按钮或可交互元素
  • 在用户界面中指示激活状态
  • 创建加载指示器
  • 添加触摸时的视觉反馈
  • 增强应用入门屏幕

主要特点

  • 简单的 API,配置最少
  • 可自定义的脉冲半径和持续时间
  • 支持同时多个脉冲
  • 跨平台的流畅动画性能
  • 可扩展以自定义样式

适合对象

  • 寻求视觉反馈的UI设计师
  • 开发交互式应用的开发者
  • 需要细微动画的项目
  • 注重用户参与的应用程序
  • 快速原型设计用户界面交互

使用建议

  • 如果过度使用,可能会影响性能
  • 超出基本属性的自定义功能有限
  • 不适合复杂的动画序列
  • 需要仔细调整以适应响应式布局
  • 建议谨慎使用,以避免视觉杂乱

原始 README

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

Pulsator for Flutter

Version GitHub license

The Pulsator Flutter package brings a captivating pulsating animation to your Flutter applications.

PulsatorPreview

Installation

To integrate the Pulsator package into your Flutter project, add the following dependency to your pubspec.yaml file:

dependencies:
  pulsator: ^1.0.0

After making the modification, run the following command in your terminal:

flutter pub get

Introduction

The Pulsator package introduces two primary widgets: Pulsator and PulseIcon.

Pulsator Widget

The Pulsator widget allows you to create pulsating animations with customizable styles. You can control the number of pulses, animation duration, repetition, and more. This widget is perfect for adding dynamic visual effects to specific areas of your app.

Pulsator(
  style: PulseStyle(color: Colors.blue),
  count: 5,
  duration: Duration(seconds: 4),
  repeat: 0,
  startFromScratch: false,
  autoStart: true,
  fit: PulseFit.contain,
  child: YourContentWidget(),
)
PulseIcon Widget

The PulseIcon widget simplifies the process of displaying an icon with a pulsing effect. It allows you to customize the pulse and icon properties effortlessly.

PulseIcon(
  icon: Icons.favorite,
  pulseColor: Colors.red,
  iconColor: Colors.white,
  iconSize: 44,
  innerSize: 54,
  pulseSize: 116,
  pulseCount: 4,
  pulseDuration: Duration(seconds: 4),
)

Features

  • Customizable Styles: Tailor the pulse animation to your preferences with adjustable color, size, and gradient configurations.
  • Dynamic Pulse Effects: Create dynamic and visually appealing pulsating animations that draw attention to specific elements in your UI.
  • Icon Integration: Easily incorporate pulsating effects into your icons using the PulseIcon widget for a more engaging user experience.
  • Flexible Configuration: Fine-tune the pulse behavior by adjusting parameters such as count, duration, repetition, and more.

Usage

Explore the various properties and customization options provided by the Pulsator and PulseIcon widgets to seamlessly integrate pulsating animations into your Flutter application. Experiment with different configurations to achieve the desired visual impact and enhance the overall user experience.

Juicy examples

Code Preview
PulseIconExampleCode PulseIconExamplePreview
SplashExampleCode SplashExamplePreview
TunnelExampleCode TunnelExamplePreview
LooneyExampleCode LooneyExamplePreview

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

Please read CONTRIBUTING.md for details on my code of conduct, and the process for submitting pull requests to me.

The docs, please!

Pulsator Widget properties
Property Type Description
style PulseStyle Pulse style configuration. Required.
count int Number of pulses visible at a time. Default is 3.
duration Duration Duration of a single pulse animation. Default is 2 seconds.
repeat int Number of times pulses will repeat. If 0, pulses will repeat forever. Default is 0.
startFromScratch bool Whether the animation should start from the beginning. Default is true.
autoStart bool Whether the animation should start automatically when the widget is created. Default is true.
fit PulseFit How the pulse should be scaled to fit the widget size. Default is PulseFit.contain.
child Widget? The child of the widget that is rendered on top of the pulses. Default is null.
Events
Event Description
onCreated Invoked when the animation controller is created.
onCompleted Invoked when the animation is completed.
PulseIcon Widget properties
Property Type Description
icon IconData The icon to display. Required.
pulseColor Color The color of the pulse. Required.
iconColor Color The color of the icon. Default is white.
iconSize double The size of the icon. Default is 24.
pulseSize double The size of the pulse. Default is 64.
innerColor Color? The color of the inner, non-pulsing circle. Default is null.
innerSize double? The size of the inner, non-pulsing circle. Default is null.
pulseCount int The number of pulses to display. Default is 3.
pulseDuration Duration The duration of a single pulse animation. Default is 4 seconds.
PulseStyle properties
Property Type Description
color Color Main pulse color. Default is Colors.red.
borderColor Color? Pulse border color. If null, no border will be rendered. Default is null.
borderWidth double? Pulse border width. If null, no border will be rendered. Default is null.
gradientStyle PulseGradientStyle? If set, the pulse will be rendered as a gradient. Default is null.
pulseCurve Curve Pulse scale animation curve. Default is Curves.linear.
opacityCurve Curve Pulse opacity animation curve. Default is Curves.linear.
fadeOpacity bool Whether the opacity should be animated from 1.0 to 0.0. Default is true.
startSize double The size of the pulse when it begins, as a fraction of the pulse radius. Default is 0.0.
PulseGradientStyle properties
Property Type Description
radius double The radius of the gradient, as a fraction pulse radius. Default is 0.5.
start double The start point of the gradient, as a fraction of the pulse radius. Default is 0.0.
end double The end point of the gradient, as a fraction of the pulse radius. Default is 1.0.
startColor Color? The start color of the gradient. If null, the pulse color will be used with the opacity set to 0.0. Default is null.
reverseColors bool Whether the gradient colors should be reversed. If true, the gradient will start from end and end at start. Default is false.
PulseFit enum
Value Description
contain The pulse will be scaled to fit the widget size.
cover The pulse will be scaled to fill the widget size.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。