FadeOverlay

Einleitung

Das FadeOverlay-Widget wendet einen Verlaufs-Fade-Effekt über sein Kind-Widget an. Dies ist nützlich, um visuelle Tiefe zu erzeugen, die Lesbarkeit von Text über Bildern zu verbessern oder stilistische Effekte zu Ihrer UI hinzuzufügen.

Grundlegende Verwendung

Umschließen Sie jedes Widget mit FadeOverlay, um einen Verlaufs-Fade anzuwenden:

FadeOverlay(
  child: Image.asset('assets/images/background.jpg'),
)

Dies erzeugt einen subtilen Fade von transparent oben zu einem dunklen Overlay unten.

Mit Text über Bild

Stack(
  children: [
    FadeOverlay(
      child: Image.network(
        'https://example.com/image.jpg',
        fit: BoxFit.cover,
      ),
      strength: 0.5,
    ),
    Positioned(
      bottom: 16,
      left: 16,
      child: Text(
        "Photo Title",
        style: TextStyle(color: Colors.white, fontSize: 24),
      ),
    ),
  ],
)

Richtungskonstruktoren

FadeOverlay bietet benannte Konstruktoren für gängige Fade-Richtungen:

FadeOverlay.top

Fadet von unten (transparent) nach oben (Farbe):

FadeOverlay.top(
  child: Image.asset('assets/header.jpg'),
  strength: 0.3,
)

FadeOverlay.bottom

Fadet von oben (transparent) nach unten (Farbe):

FadeOverlay.bottom(
  child: Image.asset('assets/card.jpg'),
  strength: 0.4,
)

FadeOverlay.left

Fadet von rechts (transparent) nach links (Farbe):

FadeOverlay.left(
  child: Image.asset('assets/banner.jpg'),
  strength: 0.3,
)

FadeOverlay.right

Fadet von links (transparent) nach rechts (Farbe):

FadeOverlay.right(
  child: Image.asset('assets/banner.jpg'),
  strength: 0.3,
)

Anpassung

Stärke anpassen

Der Parameter strength steuert die Intensität des Fade-Effekts (0.0 bis 1.0):

// Subtle fade
FadeOverlay(
  child: myImage,
  strength: 0.1,
)

// Medium fade
FadeOverlay(
  child: myImage,
  strength: 0.5,
)

// Strong fade
FadeOverlay(
  child: myImage,
  strength: 1.0,
)

Benutzerdefinierte Farbe

Ändern Sie die Overlay-Farbe passend zu Ihrem Design:

// Dark blue overlay
FadeOverlay(
  child: Image.asset('assets/photo.jpg'),
  color: Colors.blue.shade900,
  strength: 0.6,
)

// White overlay for light themes
FadeOverlay.bottom(
  child: Image.asset('assets/photo.jpg'),
  color: Colors.white,
  strength: 0.4,
)

Benutzerdefinierte Verlaufsrichtung

Für nicht-standardmäßige Richtungen geben Sie die begin- und end-Ausrichtungen an:

// Diagonal fade (top-left to bottom-right)
FadeOverlay(
  child: Image.asset('assets/photo.jpg'),
  begin: Alignment.topLeft,
  end: Alignment.bottomRight,
  strength: 0.5,
)

// Center outward fade
FadeOverlay(
  child: Image.asset('assets/photo.jpg'),
  begin: Alignment.center,
  end: Alignment.bottomCenter,
  strength: 0.4,
)

Parameter

Beispiel: Karte mit Fade

Container(
  height: 200,
  width: double.infinity,
  child: ClipRRect(
    borderRadius: BorderRadius.circular(12),
    child: Stack(
      fit: StackFit.expand,
      children: [
        FadeOverlay.bottom(
          strength: 0.6,
          child: Image.network(
            'https://example.com/product.jpg',
            fit: BoxFit.cover,
          ),
        ),
        Positioned(
          bottom: 16,
          left: 16,
          right: 16,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                "Product Name",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
              Text(
                "\$29.99",
                style: TextStyle(color: Colors.white70),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
)