Flutter SDK'da onboarding'leri gösterme

Builder ile bir onboarding oluşturduysanız, bunu Flutter uygulama kodunuzda kullanıcıya göstermek için ayrıca render etmeniz gerekmez. Bu tür bir onboarding, hem neyin gösterileceğini hem de nasıl gösterileceğini içerir.

Başlamadan önce şunları kontrol edin:

1. Adapty Flutter SDK 3.8.0 veya daha yeni bir sürümü yüklemiş olmanız.
2. Bir onboarding oluşturmuş olmanız.
3. Onboarding’i bir placement’a eklemiş olmanız.

Adapty Flutter SDK, onboarding’leri sunmak için iki yöntem sunar:

• Bağımsız ekran

• Gömülü widget

Bağımsız ekran olarak göster

Bir onboarding’i bağımsız bir ekran olarak görüntülemek için, createOnboardingView metoduyla oluşturulan onboardingView üzerinde onboardingView.present() metodunu kullanın. Her view yalnızca bir kez kullanılabilir. Onboarding’i tekrar göstermeniz gerekiyorsa, yeni bir onboardingView örneği oluşturmak için createOnboardingView metodunu bir kez daha çağırın.

try {
  await onboardingView.present();
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

Onboarding’i kapatma

Onboarding’i programatik olarak kapatmanız gerektiğinde dismiss() metodunu kullanın:

try {
  await onboardingView.dismiss();
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

iOS sunum stilini yapılandırma

present() metoduna iosPresentationStyle parametresini geçirerek onboarding’in iOS’ta nasıl sunulacağını yapılandırın. Parametre AdaptyUIIOSPresentationStyle.fullScreen (varsayılan) veya AdaptyUIIOSPresentationStyle.pageSheet değerlerini kabul eder.

try {
  await onboardingView.present(iosPresentationStyle: AdaptyUIIOSPresentationStyle.pageSheet);
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

Widget hiyerarşisine yerleştirme

Bir onboarding’i mevcut widget ağacınıza gömmek için AdaptyUIOnboardingPlatformView widget’ını doğrudan Flutter widget hiyerarşinizde kullanın.

AdaptyUIOnboardingPlatformView(
  onboarding: onboarding, // The onboarding object you fetched
  onDidFinishLoading: (meta) {
  },
  onDidFailWithError: (error) {
  },
  onCloseAction: (meta, actionId) {
  },
  onPaywallAction: (meta, actionId) {
  },
  onCustomAction: (meta, actionId) {
  },
  onStateUpdatedAction: (meta, elementId, params) {
  },
  onAnalyticsEvent: (meta, event) {
  },
)

class MainActivity : FlutterFragmentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }
}

Onboarding sırasında yükleme ekranı

Bir onboarding sunarken, arka planda görünüm başlatılırken açılış ekranı ile onboarding arasında kısa bir yükleme ekranı görebilirsiniz. Bunu ihtiyacınıza göre farklı şekillerde ele alabilirsiniz.

onDidFinishLoading kullanarak açılış ekranını kontrol etme

Önerilen platformlar arası yaklaşım, onboarding tam olarak yüklenene kadar splash ekranını veya özel overlay’inizi görünür tutmak, ardından manuel olarak gizlemektir.

Gömülü widget kullanırken, kendi widget’ınızı onun üzerine yerleştirin ve onDidFinishLoading tetiklendiğinde overlay’i gizleyin:

AdaptyUIOnboardingPlatformView(
  onboarding: onboarding,
  onDidFinishLoading: (meta) {
    // Hide your custom splash screen or overlay here
  },
  // ... other callbacks
)

Yerel yükleyiciyi özelleştirme

Varsayılan yükleyiciyi özelleştirmeniz gerekiyorsa platforma özgü layout’larla değiştirebilirsiniz. Bu yaklaşım Android ve iOS için ayrı uygulamalar gerektirir:

• iOS: Xcode projenize AdaptyOnboardingPlaceholderView.xib ekleyin
• Android: res/layout klasöründe adapty_onboarding_placeholder_view.xml oluşturun ve burada bir yer tutucu tanımlayın

Onboarding’lerde bağlantıların nasıl açılacağını özelleştirme

Varsayılan olarak, onboarding’lerdeki bağlantılar uygulama içi tarayıcıda açılır. Bu, web sayfalarını uygulamanızın içinde göstererek kullanıcıların başka bir uygulamaya geçmeden içeriği görüntülemesine olanak tanır ve kesintisiz bir kullanıcı deneyimi sunar.

Bağlantıların bunun yerine harici tarayıcıda açılmasını tercih ediyorsanız, externalUrlsPresentation parametresini AdaptyWebPresentation.externalBrowser olarak ayarlayarak bu davranışı özelleştirebilirsiniz:

final onboardingView = await AdaptyUI().createOnboardingView(
  onboarding: onboarding,
  externalUrlsPresentation: AdaptyWebPresentation.externalBrowser, // default – AdaptyWebPresentation.inAppBrowser
);

try {
  await onboardingView.present();
} on AdaptyError catch (e) {
  // handle the error
} catch (e) {
  // handle the error
}

AdaptyUIOnboardingPlatformView(
  onboarding: onboarding,
  externalUrlsPresentation: AdaptyWebPresentation.externalBrowser, // default – AdaptyWebPresentation.inAppBrowser
  onDidFinishLoading: (meta) {
  },
  onDidFailWithError: (error) {
  },
  onCloseAction: (meta, actionId) {
  },
  onPaywallAction: (meta, actionId) {
  },
  onCustomAction: (meta, actionId) {
  },
  onStateUpdatedAction: (meta, elementId, params) {
  },
  onAnalyticsEvent: (meta, event) {
  },
)

Güvenli alan dolgularını devre dışı bırakma (Android)

Varsayılan olarak Android cihazlarda, onboarding görünümü durum çubuğu ve gezinme çubuğu gibi sistem UI öğelerinden kaçınmak için güvenli alan dolgularını otomatik olarak uygular. Ancak bu davranışı devre dışı bırakmak ve düzen üzerinde tam kontrol sahibi olmak istiyorsanız, uygulamanıza bir boolean kaynağı ekleyerek bunu yapabilirsiniz:

1. android/app/src/main/res/values konumuna gidin. bools.xml dosyası yoksa oluşturun.

2. Aşağıdaki kaynağı ekleyin:

<resources>
    <bool name="adapty_onboarding_enable_safe_area_paddings">false</bool>
</resources>

Bu değişikliklerin uygulamanızdaki tüm onboarding’ler için geçerli olduğunu unutmayın.