blurred

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Das Blur-Paket bietet eine einfache und effiziente Möglichkeit, Blureffekte auf Widgets und Bilder in Flutter anzuwenden. Es vereinfacht die Komplexität der Verwendung von ShaderMask und CustomPaint und bietet eine saubere API zur Erzielung glatter, Echtzeit-Verzerrungen. Ideal für Hintergrundeffekte, Überlagerungen oder die Verbesserung der visuellen Tiefe in Benutzeroberflächenkomponenten. Das Paket ist leichtgewichtig und einfach zu integrieren, erfordert nur einen einzigen Import und minimale Codeänderungen. Es unterstützt sowohl Bild- als auch Widget-Blurring mit anpassbarer Unschärfeintensität.

Anwendungsfälle

Erstellen von verschwommenen Hintergründen
Verbesserung der UI-Tiefe mit Blur-Effekten
Modale Überlagerungen implementieren
Entwurf von Karten- oder Container-Hervorhebungen
Subtile visuelle Effekte zu Bildern hinzufügen
Verbesserung der Benutzeroberflächengestaltung

Hauptmerkmale

Einfache API für die Anwendung von Verschmierung
Unterstützt sowohl Widgets als auch Bilder
Anpassbare Unschärfeintensität
Leicht und leistungsstark
Einfache Integration in Flutter-Projekte
Echtzeit-Blur-Rendering

Geeignet für

UI-Designer, die visuelle Verbesserungen suchen
Entwickler, die moderne App-Oberflächen erstellen
Projekte, die Hintergrund-Weichzeichnungseffekte erfordern
Apps mit dynamischen oder interaktiven Hintergründen
Prototyping visuell reicher Bildschirme

Hinweise

Kann die Leistung auf Low-End-Geräten beeinträchtigen
Die Blur-Qualität hängt von der Auflösung des Quellbildes ab
Eingeschränkte Anpassung über den Blur-Radius hinaus
Nicht für sehr große Widgets optimiert
Am besten geeignet für moderate Unschärfestärken

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

An easy way to blur your widgets and images.

Usage

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

Output:

Check the example for BlurredImage example

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)),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Pakete, Repositories und App-Kategorien suchen

blurred

Paket installieren

Paketübersicht

Anwendungsfälle

Hauptmerkmale

Geeignet für

Hinweise

Original-README

blurred

Usage

Acrylic

Example

Output

Kategorien

Quell-Repository

verschwommen

Projekte, die dieses Paket verwenden