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

ducafecatFlutter エコシステムナビ
パッケージ詳細v1.1.0

blurred

blurred - Flutter のウィジェットや画像をぼかす最も簡単な方法。

pub.dev API ドキュメント ソースコード
30日間ダウンロード
46
いいね数
10
Pub ポイント
40

パッケージをインストール

flutter pub add blurred

パッケージ概要

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

ブラー パッケージは、Flutter でウィジェットや画像にぼかし効果を適用するためのシンプルかつ効率的な方法を提供します。ShaderMask や CustomPaint の複雑さを抽象化し、スムーズでリアルタイムのぼかしを実現するための明確な API を提供します。UI コンポーネントの視覚的な奥行きを強調したり、バックドロップ効果やオーバーレイを作成するのに最適です。パッケージは軽量で、インポートが1つだけ必要で、最小限のコードで簡単に統合できます。画像およびウィジェットのぼかしに対応し、カスタマイズ可能なぼかし強度もサポートしています。

用途

  • ぼかされた背景の作成
  • ブル効果によるUIの奥行きの向上
  • モーダルオーバーレイの実装
  • カードまたはコンテナのハイライトを設計する
  • 画像に繊細な視覚効果を追加する
  • ユーザーインターフェースの美しさの向上

主な機能

  • ぼかしアプリケーション用のシンプルなAPI
  • ウィジェットと画像の両方をサポートしています
  • カスタマイズ可能なぼかし強度
  • 軽量でパフォーマンスに優れる
  • Flutter プロジェクトとの簡単な統合
  • リアルタイムのぼかしレンダリング

適している対象

  • 視覚的な向上を求めるUIデザイナー
  • 現代のアプリインターフェースを構築する開発者
  • 背景のぼかし効果を必要とするプロジェクト
  • 動的またはインタラクティブな背景を持つアプリ
  • 視覚的に豊かな画面のプロトタイピング

注意事項

  • 低価格端末でのパフォーマンスに影響する可能性があります
  • ぼかしの品質は、元画像の解像度に依存します
  • ぼかし半径を超えるカスタマイズは限られている
  • 非常に大きなウィジェットには最適化されていません
  • 中程度のぼかし強度に最適

元の README

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

blurred

An easy way to blur your widgets and images.

blurred example

Usage

Blurred(
  Text(
    "Hello World!",
    style: TextStyle(
      fontSize: 72,
    ),
  ),
  blurValue: 3,
)

Output:

Hello World

Check the example for BlurredImage example

Acrylic

Acrylic

To easily create a container with an acrylic effect.

Example
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Acrylic Header',
      theme: ThemeData.dark(),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(12, 10, 30, 1),
      body: Stack(
        children: [
          ListView.builder(
            itemBuilder: (_, __) => ListTile(
              leading: Icon(Icons.ac_unit_rounded, size: 30),
              title: Text('Lorem Ipsum'),
            ),
          ),
          SizedBox(
            height: 80,
            child: Acrylic(
              child: Center(
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    FlutterLogo(size: 40),
                    SizedBox(width: 10),
                    Text('Acrylic Header', style: TextStyle(fontSize: 40)),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
Output

Acrylic Example

カテゴリー

画像

ソースリポジトリ

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

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