blur

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

Blurは、子ウィジェットや画像にぼかし効果を適用するためのラッパーウィジェットを提供するFlutterパッケージです。ImageBlur.assetおよびImageBlur.networkを使用して、ローカルアセットまたはリモートURLからの画像をぼかすことができます。Frostウィジェットは背景ぼかしを提供し、フロストガラス効果を作成するのに最適です。クロスプラットフォーム対応で、Android、iOS、Web、macOS、Windows、Linuxをサポートしています。最小限のコードで視覚的な奥行きと現代的なUI要素を実装することが容易になります。

用途

ファストガラスUIの作成
背景のぼかし効果を追加する
アセットからの画像のぼかし
ブラー処理されたネットワーク画像
UIにおける視覚的奥行きの向上
オーバーレイブラー層の実装

主な機能

ローカル画像用の ImageBlur.asset
ImageBlur.network リモート画像用
背景ぼかし用のフロストウィジェット
クロスプラットフォーム互換性
シンプルな API とラッパー小道具
軽量で簡単に統合可能

適している対象

現代的な美学を求めるUIデザイナー
没入型インターフェースを構築する開発者
ビジュアルレイヤーが必要なアプリ
画像オーバーレイを使用するプロジェクト
複数のプラットフォームをターゲットにするチーム
ガラスモーフィズムデザインを備えたFlutterアプリ

注意事項

複雑なレイアウトへのパフォーマンスの影響
ぼかし強度のカスタマイズオプションが限られている
低性能デバイスでは最適化が必要になる場合があります
高性能アニメーションには適していません
静的または頻繁に更新されないコンテンツと併用するのが最適です
プラットフォーム固有のレンダリング機能に依存します

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

Blur is a wrapper widget that blur it's child. There are ImageBlur.asset and ImageBlur.network that blur the image. Frost is another wrapper which blurs the background.

Getting Started

To use this package, add blur as a dependency in your pubspec.yaml file.

blur

Add dependency

dependencies:
  blur: ^4.0.0

Import

import 'package:blur/blur.dart'

Usage

Blur(
  blur: 2.5,
  blurColor: Theme.of(context).primaryColor,
  child: Padding(
    padding: EdgeInsets.all(8.0),
    child: Text(
      'Blur',
      style: Theme.of(context).textTheme.headline3,
    ),
  ),
),

Output

blur_text

Normal Image

normal_image

Using extensions

Input

 Image.asset('assets/cat.png').blurred(
     colorOpacity: 0.2,
     borderRadius: BorderRadius.horizontal(right: Radius.circular(20)),
     blur: blurValue,
     overlay: Text(
       'Cat',
       style: theme.textTheme.headline2!.copyWith(color: theme.scaffoldBackgroundColor),
     ),
   ),

Output

blur_image

Frost

Stack(
  alignment: Alignment.center,
  children: [
    Image.asset(
      'assets/cat.png',
      scale: 3.5,
    ),
    Text(
      'Frost',
      style: theme.textTheme.headline4,
    ).frosted(
       blur: blurValue,
       borderRadius: BorderRadius.circular(20),
       padding: EdgeInsets.all(8),
     ),
  ],
),