AdvStory
AdvStory Dokumantasyon
Search
K
Comment on page

Gelişmiş Kullanım

Bu sayfa, `AdvStory` widget'ının gelişmiş kullanım örneğini içerir.
AdvStory(
storyCount: 5,
storyBuilder: (index) async {
// Hikaye döndürün, hikaye ileriki bölümlerde açıklanacak.
},
trayBuilder: (index) {
// Herhangi bir widget döndürün. AdvStoryTray ön tanımlı
// özelleştirilebilir bir hikaye tepsisidir, bunu kullanabilir
// veya kendi animasyonlu/animasyonsuz hikaye tepsilerinizi
// oluşturabilirsiniz.
// Tepsi oluşturma ileriki bölümlerde açıklanacak.
},
controller: AdvStoryController(),
buildStoryOnTrayScroll: true,
preloadStory: true,
preloadContent: true,
style: const AdvStoryStyle(),
)
  • storyCount: hikaye sayısı. trayBuilder ve storyBuilder bu int değere göre çalıştırılır.
  • controller: AdvStoryController, hikaye akışını dinlemek ve yönetmek için metotlar sağlar.
  • buildStoryOnTrayScroll: Hikayelerin dokunulduğunda veya tepsi listesi kaydırıldığında oluşturulmasını ayarlar. true olarak ayarlandığında hikaye ekranının açılmasını hızlandırır ancak storyBuilder fonksiyonun çalıştırılma sıklığını arttırır. storyBuilder içerisinde sunucunuza istekler gönderiyorsanız, rate limit için bunu false olarak ayarlamak isteyebilirsiniz.
  • preloadStory: hikaye önyüklemenin etkin olup olmamasını ayarlar. true olarak ayarlandığında 3 hikaye ve bu hikayelerin içeriklerinin bir bölümünü aynı anda hafızada tutar, aksi takdirde sadece bir hikayeyi hafızada tutar. İçeriklerinizin çoğu video ise ve performans problemleri görüyorusanız bunu false olarak ayarlayabilirsiniz. Ancak, bunu yapmadan önce video dosyalarının boyutlarını kontrol edin.
  • preloadContent: içerik ön yüklemenin etkin olup olmamasını ayarlar. true olarak ayarlandığında bir hikayeye ait 3 içeriği aynı anda hafızada tutar, aksi takdirde sadece bir içeriği hafızada tutar. Çoğu zaman bunu false olarak ayarlamanıza gerek yoktur. Bu, performansı ciddi şekilde azaltır. Yalnızca kaynaklarınız gerçekten çok büyük boyutlardaysa bunu devre dışı bırakmak isteyebilirsiniz.

StoryBuilder

Hikayeleri oluştururken çalıştırılan builder fonksiyonu, Story döndürür. Her hikaye için yalnızca bir defa çalışır, AdvStory widget'ı hafızadan kaldırılana kadar hikayeleri tutar ve asenkron olabilir.
Hikaye bir içerik grubudur ve AdvStory içerikleri contentBuilder fonksiyonunu çalıştırarak oluşturur. İçerik, ön tanımlı içeriklerden biri olabilir veya kendi içeriklerinizi oluşturabilirsiniz.
Ön tanımlı içerikler çoğu durumu kapsar, ancak AdvStory geliştiricilerin daha özel durumlar için kendi içeriklerini oluşturmasına izin verir. Geliştirici, herhangi bir şeyi hikaye içeriği olarak oluşturabilir. Örneğin, ses içeriği, birden fazla video içeren içerikler, fotoğraf ve videonun beraber olduğu içerikler, reklamlar...
contentBuilder'dan sadece içerik döndürmeyi ve başka bir işlem yapmamayı tercih edin. AdvStory hafıza kullanımını azaltmak için içerikleri saklamaz, sadece medya dosyalarını geçiçi belleğe kayıt eder ve bu fonksiyonu aynı içerik için birden fazla defa çalıştırabilir.
Örneğin, içerik 4 görüntülenirken AdvStory 2. içeriği hafızadan kaldırır ve eğer kullanıcı tekrar içerik 3'e giderse 2. içeriği oluşturmak için storyBuilder tekrar çalıştırılır.
Story({
required int contentCount,
required AdvStoryContent Function(int index) contentBuilder,
Widget? header,
Widget? footer,
})
  • header: hikayenin üst bölümü. Bu varsayılan hikaye başlığıdır ve içerikler için özelleştirilebilir. Bu başlık ImageContent, VideoContent ve SimpleCustomContent tiplerine uygulanabilir. AdvStory StoryHeader adında, bir satırda fotoğraf ve yazı görüntüleyen bir ön tanımlı başlığa sahiptir.
  • footer: hikaye alt bölümü. Bu varsayılan hikaye alt bölümüdür ve içerikler için özelleştirilebilir. Bu alt bölüm ImageContent, VideoContent ve SimpleCustomContent tiplerine uygulanabilir.

TrayBuilder

AdvStory({
required Widget Function(int index) trayBuilder,
....
})
Hikaye tepsilerini oluşturmak için çalıştırılan builder fonksiyonu. AdvStory'de iki tip tepsi vardır, animasyonlu ve animasyonsuz tepsiler.
Animasyonlu ve animasyonsuz tepsiler arasındaki fark şudur, trayBuilder fonksiyonundan animasyonlu bir tepsi döndürüldüğünde AdvStory animasyonu başlatır, hikayeyi ve içeriği göstermek için hazırlar ve hikaye görünümü açar. Bu, kullanıcıya açılan ilk ekranda bir yükleniyor ekranı gösterilmesini engeller. Animasyonsuz tepsilerde tepsiye dokunulduğunda hikaye görünümü hemen açılır ve AdvStory hikaye ve içeriği hazırlanana kadar bir yükleniyor ekranı gösterir.
Animasyonsuz tepsiler herhangi bir widget olabilir ancak animasyonlu tepsiler bazı kurallara sahiptir. Kendi animasyonlu tepsilerinizi oluşturmak için özel hikaye tepsileri oluşturma bölümüne bakın.
AdvStoryTray son derece özelleştirilebilir bir animasyonlu hikaye tepsisidir, içerik hazırlanırken hoş bir kenarlık döndürme animasyonu gösterir.
size: Hikaye tepsisi boyutu.
​​borderGradient: Kenarlığa uygulanan renk geçişi. Düz bir renk için aynı iki rengi kullanın.
​​shimmerStyle: Fotoğraf yüklenirken gösterilen efekt stili.
​​shape: Oval veya dörtgen tepsi oluşturmak için kısa yol.
​​strokeWidth: kenarlık boyutunu ayarlar.
​​borderRadius: kenarlığın eğimini ayarlar. Bu parametre ayrıca tepsi içerisinde gösterilen fotoğrafın şeklini de etkiler.
gapSize: Fotoğraf ve kenarlık arasındaki saydam alanın boyutunu ayarlar.

Style

AdvStory geliştiricilerin en önemli bölümler için kendi widget'larını oluşturmasına izin verir ancak bazı widget'lar geliştirici tarafından oluşturulamaz, bu ayarlar bu widget'ları etkiler.
  • hideBars: hikaye görünümünün tam ekran olup olmamasını ayarlar. Varsayılan değer true, durum ve navigasyon çubuklarını gizler. Bunu false olarak ayarlamak medyanın beklenmedik şekilde boyutlanmasına sebep olabilir.
  • loadingScreen: özel yükeniyor ekranı. Bu, kendi, yükleniyor ekranınızı kullanmak istediğinizde yararlıdır. AdvStory varsayılan yükleniyor ekranı CircularProgressIndicator benzeri bir widget'dır.
AdvStoryStyle(
indicatorStyle: const IndicatorStyle(),
trayListStyle: const TrayListStyle(),
loadingStyle: const LoadingStyle(),
loadingScreen: Widget? null,
hideBars: true,
),

IndıcatorStyle

Hikaye geri sayım göstergesi için seçenekler.
  • backgroundColor: Boş gösterge rengi. Varsayılan renk Color(0xe6bdbdbd).
  • valueColor: Dolu gösterge rengi. Varsayılan renk beyaz.
  • height: Gösterge yüksekliğini ayarlar. Varsayılan değer 2.5.
  • padding: İlk/son hikaye tepsisi ve ekran kenarları arasındaki boşluk. Varsayılan değer EdgeInsets.symmetric(horizontal: 4, vertical: 8).
  • spacing: Göstergeler arasındaki boşluk miktarını ayarlar. Varsayılan değer 3.

TrayListStyle

Hikaye tepsisi seçenekleri.
  • padding: Tepsi listesi ve üst widget arasındaki boşluk. Varsayılan değer EdgeInsets.symmetric(horizontal: 12.0).
  • spacing: Tepsiler arasındaki boşluk miktarı. Varsayılan değer 12.0.
  • direction: Hikaye tepsisi listesi yönü, tepsiler yan yana veya alt alta gösterilebilir. Dikey listeyi galeride görebilirsiniz. Varsayılan değer Axis.horizontal.
AdvStoryTray özelleştirme seçeneklerini örnek projeyi çalıştırarak deneyin veya kullanımı buradan inceleyin.

LoadingStyle

Yükleniyor ekranı stilleri.
  • backgroundColor: yükleniyor ekranı arka plan rengi (indicator değil!). Varsayılan değer aydınlık tema için Color(0xFFFDFBF9)/mat beyaz, karanlık tema için Color(0xFF1B1B1B)/mat siyah.
  • gradientColors: gösterge renkleri. Dönme efektini güzel göstermek için son renk yerine Colors.transparent kullanın. Varsayılan değer [Color(0xCC4b689c), Color(0x00000000)].
  • colorStops: renk geçiş durakları.
  • fillDuration: gösterge dönüşü tamamlanma süresi. Varsayılan değer 3 saniye.
  • size: gösterge boyutu. Varsayılan değer 50.
  • strokeWidth: gösterge kenar kalınlığı. Varsayılan değer 7.0.