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

pro_animated_blur 封面
插件详情v0.0.2+1

pro_animated_blur

ProAnimatedBlur 是一个会模糊其子部件下方区域的组件,其工作方式类似于 AnimatedContainer 和 AnimatedOpacity。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
6
喜欢数
72
Pub 分数
160

安装插件

flutter pub add pro_animated_blur

插件介绍

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

ProAnimatedBlur 是一个 Flutter 小部件,可动态模糊其子组件下方的内容,提供类似于 AnimatedContainer 和 AnimatedOpacity 的流畅过渡效果。它使开发者能够通过随时间动画化模糊强度来创建视觉上吸引人的效果,非常适合用于覆盖层、模态框或动态 UI 元素。该小部件支持所有主要平台,包括 Android、iOS、Web、macOS、Windows 和 Linux,确保在各种设备上行为一致。该组件以性能为设计重点,可无缝集成到现有的 Flutter 应用中。

适合场景

  • 创建动态背景模糊效果
  • 设计具有动态模糊的浮动UI元素
  • 在模态框中实现平滑过渡
  • 增强分层界面的视觉深度
  • 使用模糊动画构建响应式覆盖层

主要特点

  • 类似 AnimatedContainer 的平滑模糊动画
  • 支持所有 Flutter 平台
  • 高效渲染,性能影响最小
  • 与现有控件的轻松集成
  • 可自定义的模糊半径和持续时间

适合对象

  • 寻求高级视觉效果的UI设计师
  • 开发现代动画界面的开发者
  • 需要动态背景模糊的应用程序
  • 团队致力于跨平台一致性
  • 强调视觉美感和交互性的项目

使用建议

  • 可能会影响低端设备的性能
  • 模糊质量取决于设备功能
  • 需要仔细调整动画持续时间
  • 不适用于高频更新
  • 超出模糊半径和定时之外的自定义功能有限

原始 README

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

ProAnimatedBlur

  • pub.dev page: https://pub.dev/packages/pro_animated_blur

  • ProAnimatedBlur is a Flutter package that is very similar to other 'Animated' widgets such as AnimatedContainer, AnimatedOpacity, etc. *

  • Animates between different blur properties without needing a dedicated animation controller because it is auto-handled*

  • It blurs the background of the child widget.

Some usecases:

  • When a modal (popup window) is used, wrap the route with ProAnimatedBlur in order to blur the rest of the screen (you can blur the dark shaded dismissible barrier area)
  • Wrap any of your containers to make a frosted glass style.

Features

The example app looks like this:

ProAnimatedBlur_short_gif

Getting started

Add the dependency in pubspec.yaml:

dependencies:
  pro_animated_blur: ^0.0.1

  # It is recommended to use latest version.

Import it:

Now in your Dart code, you can use:

import 'package:pro_animated_blur/pro_animated_blur.dart';

Usage

  return Container(
    clipBehavior: Clip.antiAlias, // Use a clip  option.
    child: ProAnimatedBlur(
      blur: _isBlurred ? 20 : 0,
      duration: Duration(milliseconds: 200),
      curve: Curves.linear,
      child: Container(
        height: 200,
        width: 200,
      ),
    ),
  );

Author

Yasin Arık

Email: [yasin.ariky@gmail.com](mailto:yasin.ariky@gmail.com)

GitHub: github.com/yasinarik

LinkedIn: linkedin.com/in/yasinarik

所属分类

源码仓库

使用此插件的项目

暂无相关数据。