blur

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Blur ist ein Flutter-Paket, das Wrapper-Widgets bereitstellt, um Blur-Effekte auf Kind-Widgets oder Bilder anzuwenden. Es enthält ImageBlur.asset und ImageBlur.network zum Blenden von Bildern aus lokalen Ressourcen oder Remote-URLs. Das Frost-Widget bietet Hintergrund-Blurring und ist ideal für die Erstellung von gefrorenem Glas-Effekten. Für den Einsatz auf mehreren Plattformen entwickelt, unterstützt es Android, iOS, Web, macOS, Windows und Linux. Das Paket vereinfacht die Implementierung visueller Tiefe und moderner UI-Elemente mit minimalem Code.

Anwendungsfälle

Erstellen von milchglasartigen Benutzeroberflächen
Hinzufügen von Hintergrundunschärfeeffekten
Bilder aus Assets verwischen
Verschwommene Netzwerkbilder
Visuelle Tiefe in Benutzeroberflächen verbessern
Implementierung von Overlay-Blur-Ebenen

Hauptmerkmale

ImageBlur.asset für lokale Bilder
ImageBlur.network für Remote-Bilder
Frost-Widget für Hintergrundunschärfe
Plattformübergreifende Kompatibilität
Einfache API mit Wrapper-Widgets
Leichtgewichtig und einfache Integration

Geeignet für

UI-Designer, die moderne Ästhetik suchen
Entwickler, die immersiven Schnittstellen bauen
Apps, die visuelle Ebenen erfordern
Projekte mit Bildüberlagerungen
Teams, die mehrere Plattformen ansprechen
Flutter-Apps mit Glas-Morphismus-Designs

Hinweise

Leistungsbeeinflussung bei komplexen Layouts
Begrenzte Anpassungsmöglichkeiten für die Unschärfestärke
Kann eine Optimierung auf Geräten mit geringer Leistung erfordern
Nicht geeignet für High-Performance-Animationen
Am besten mit statischem oder selten aktualisiertem Inhalt verwenden
Abhängig von plattformspezifischen Rendering-Funktionen

Original-README

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

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