Recenze: flutter_native_splash. Vše co potřebujete pro tvorbu úvodní obrazovky v Flutter

Úvod
V minulém díle recenzí jsme se podívali na tvorbu ikonky aplikace. Pokud, ale nejste spokojeni s nevzhlednou bílou obrazovkou, jenž se na chvilku zobrazí, při načítání aplikace (tzv. nativní úvodní obrazovka) je tu řešení tohoto problému. Postup je dost jednoduchý, a tady si ho ukažme (video koresponduje s textovým obsahem).
Příprava
Než začneme s generaci úvodní obrazovky pro obě platformy, je potřeba mít grafické podklady, které bude balíček zpracovávat. Zkratka, v každém případě, při exportu z grafického editoru, to má být:
- rastrový obrázek formátu PNG,
- o velikosti cca 200x200 obrazových bodů,
- v barevném profilu sRGB,
- o prokládání není zmínka, ale z logiky věci tady nemá co dělat,
- vyhlazení, převzorkování zvolte, dle vstupních dat nebo dle charakteru obrázku,
- PPI nechte na 72, obrázek bude převzorkován na základě PPI(DPI se použivá na Androidu) zařízení,
- je tu podpora plné 32 bitové barevné hloubky (tj. s průhledností).
Instalace balíčku a jeho zprovoznění:
Budeme používat balíček s názvem flutter_native_splash
Váš PNG soubor (který můžete pojmenovat např. splash.png), zkopírujte do složky vašeho Flutter projektu, např. ve složce „assets“ (která zpravidla slouží pro soubory projektu) vytvořte složku “splash_screen“ a soubor umístěte tam.
Ve svém IDE nebo v textovém redaktoru otevřete soubor:
pubspec.yaml
který se nachází v kořenovém adresáři vašeho Flutter projektu. V něm přidejte tento kód:
dev_dependencies:
flutter_native_splash:
Pár poznámek: flutter_launcher_icons nechávám bez verze, chci mít vždy aktuální, k projektu samotnému se tento balík nevztahuje. Samotný soubor pubspec.yaml je velmi citlivým k hierarchii tvořené mezerníkem (ne tabulátorem), proto vkládejte a editujte parametry velmi opatrně.
V terminálu, ze kořenové složky projektu spusťte příkaz:
flutter packages get
nebo jednoduše změny (například ve Visual Studio Code) uložte.
V kořenovém adresáři, tj. vedle pubspec.yaml vytvořte soubor:
flutter_native_splash.yaml
Do něj vložte tento kód:
flutter_native_splash:
image: assets/splash_screen/splash.png
color: “42a5f5”
android_disable_fullscreen: true
tj. cestu k souboru PNG (můžete vynechat, pokud Vám stačí pouze barevná úvodní obrazovka), barvu ve formátu RGB Hex (lze mít i s mřížkou, tj. “#42a5f5”). Potom jsou dostupné tyto parametry booleanového typu:
- ios/android: false, zákaz vytvoření úvodní obrazovky pro tu či onou platformu,
- fill: obrázek je vyplněn na maximální možnou velikost, dle obrazovky (tento parametr nefunguje na iOS),
- android_disable_fullscreen: zakazuje plnobrazovkovou úvodní obrazovku na Android
Vygenerujeme obrazovku příkazem do terminálu:
dart run flutter_native_splash:create
Zkontrolujte vzhled posledním příkazem:
flutter run
Poznámky:
Pokud Vám nefunguje obrazovka na iOS, proveďte příkaz
flutter clean
a obrazovku znovu vygenerujte.
Závěr
Osobně to považuji za nejjednodušší způsob přidání úvodní obrazovky, s nejmenší námahou při zadávání parametrů, o všechno ostatní se postará balíček. Pokud jste byli spokojeni s flutter_launcher_icons, je to ideální řešení, protože je tímto balíčkem inspirován.