搜尋套件、儲存庫與 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 widget,能動態模糊其子組件下方的內容,提供類似於 AnimatedContainer 和 AnimatedOpacity 的流暢過渡效果。它讓開發者能夠透過隨時間動畫化模糊強度來創造視覺上吸引人的效果,非常適合用於覆蓋層、對話框或動態 UI 元件。此 widget 支援所有主要平台,包括 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

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。