パッケージ、リポジトリ、アプリカテゴリを検索

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

カテゴリー

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。