Обзор: flutter_native_splash. Всё, что нужно для создания заставки во Flutter

Введение

B предыдущем выпуске мы рассмотрели создание значка приложения. Если, вас не устраивает неприглядный белый экран, который появляется некоторое время при загрузке приложения (так называемый нативный экран-заставка) существует простое решение этой маленькой проблемы. Процедура довольно проста, и вы можете видеть её здесь (видео соответствует текстовому содержанию ниже).

Подготовка

Прежде чем мы начнем с генерацией экрана для обеих платформ, вам нужно будет подготовить изображение, которое будет обрабатывать пакет. В любом случае, при экспорте из графического редактора это должно быть:

• PNG растровое изображение
• размером в около 200x200 пикселей,
• в цветовом профиле sRGB,
• без чересстрочности,
• выберите сглаживание, масштабирование в соответствии с входными данными или содержимым изображения,
• Оставьте PPI равным 72, изображение будет перемасштабировано, на основе PPI (DPI в случае Android) устройства,
• есть полная поддержка глубины цвета 32 бита (т.е. с прозрачностью).

Установка и ввод в эксплуатацию пакета:

Мы будем использовать пакет под названием flutter_native_splash

flutter_native_splash | Dart Package

Скопируйте файл PNG (который вы можете назвать, например, splash.png) в папку вашего проекта Flutter, например, в папку «assets» (которая обычно используется для файлов проекта), создайте папку «splash_screen» и поместите туда файл.

Откройте в вашей IDE или текстовом редакторе файл:

pubspec.yaml

который находится в корневом каталоге вашего проекта Flutter. Добавьте следующий код:

dev_dependencies:
  flutter_native_splash:

Несколько замечаний: я оставляю flutter_native_splash, без версии (т. к. хочу держать пакет в актуальном состоянии, сам проект не охватывается пакетом, поэтому вы не рискуете функциональностью вашей программы). Сам файл pubspec.yaml очень чувствителен к иерархии пробелов (не табуляторов), поэтому вставляйте и редактируйте параметры очень осторожно.

В терминале из корневой папки проекта запустите:

flutter packages get

или просто сохраните изменения (например, в коде Visual Studio).

Создайте файл

flutter_native_splash.yaml

рядом с pubspec.yaml, т.е. в корневом каталоге и вставьте в него следующий код:

flutter_native_splash:
  image: assets/splash_screen/splash.png
  color: “42a5f5”
  android_disable_fullscreen: true

т.е. путь к файлу PNG (вы можете его пропустить, если вам нужен только цветной экран-заставка), цвет в шестнадцатеричном формате RGB (он также может иметь решётку, то есть «#42a5f5»). Далее доступны следующие параметры логического типа:

• ios / android: false, запрещающий создание заставки для той или иной платформы,
• fill: изображение заполняется до максимально возможного размера в соответствии с экраном (этот параметр не работает в iOS),
• android_disable_fullscreen: отключение полноэкранного заставки на Android

Генерируем экран командой в терминале:

dart run flutter_native_splash:create

Проверьте внешний вид с помощью последней команды:

flutter run

Примечания:

Если ваш экран iOS не работает, выполните команду

flutter clean

и создайте экран снова.

Заключение

Лично я считаю, именно с этим пакетом, проще всего добавить заставку к приложению, при минимальных усилиях по вводу параметров, всё остальное будет обрабатываться пакетом. Если вы были довольны flutter_launcher_icons, это идеальное решение, потому что оно в значительной степени вдохновлено именно этим пакетом по созданию иконки.

Предыдущий обзор: flutter_launcher_icons. Всё, что нужно для создания иконки приложения во Flutter