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

flutter_native_splash | Dart Package

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.

Předchozí recenze: flutter_launcher_icons. Vše co potřebujete pro tvorbu ikonky aplikace v Flutter