FadeOverlay

Giriş

FadeOverlay widget'ı, alt widget'ına bir gradyan solma efekti uygular. Bu, görsel derinlik oluşturmak, görseller üzerinde metin okunabilirliğini artırmak veya arayüzünüze stilistik efektler eklemek için kullanışlıdır.

Temel Kullanım

Gradyan solma uygulamak için herhangi bir widget'ı FadeOverlay ile sarın:

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

Bu, üstte şeffaftan alta doğru koyu bir kaplama oluşturur.

Görsel Üzerinde Metin

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

Yönlü Kurucular

FadeOverlay, yaygın solma yönleri için adlandırılmış kurucular sağlar:

FadeOverlay.top

Alttan (şeffaf) üste (renk) doğru solar:

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

FadeOverlay.bottom

Üstten (şeffaf) alta (renk) doğru solar:

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

FadeOverlay.left

Sağdan (şeffaf) sola (renk) doğru solar:

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

FadeOverlay.right

Soldan (şeffaf) sağa (renk) doğru solar:

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

Özelleştirme

Güç Ayarı

strength parametresi solma efektinin yoğunluğunu kontrol eder (0.0 ile 1.0 arası):

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

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

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

Özel Renk

Tasarımınıza uygun kaplama rengini değiştirin:

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

Özel Gradyan Yönü

Standart olmayan yönler için begin ve end hizalamalarını belirtin:

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

Parametreler

Örnek: Solmalı Kart

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