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

Вступление

Если вас не устраивает значок запуска приложения, который генерирует Flutter для вашего приложения по умолчанию — существует простое «все в одном» решение, разработанное командой «Flutter Community», которые, возможно, пользуются наибольшим доверием среди разработчиков пакетов (после «Dart Team», конечно). Процедура довольно проста, и вы можете видеть её здесь (видео соответствует текстовому содержанию ниже).

Предварительные требования

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

App Icon — Icons and Images — iOS — Human Interface Guidelines — Apple Developer

Google Play icon design specifications | Android Developers

В любом случае, при экспорте из графического редактора это должно быть:

• Растровое изображение PNG,
• размер изображения до 1024x1024 пикселей (требование размера значка Apple App Store),
• цветовой профиль sRGB,
• максимум. 1024КБ,
• без чересстрочности,
• выберите сглаживание, масштабирование в соответствии с входными данными или содержимым изображения,
• PPI не определен, но должен быть не менее, чем 72, лично я оставляю выбор на 120–144 (как «на будущее»),
• 24-битная глубина цвета (нам не нужно 32, потому что Apple требует изображения без альфа-канала (дополнительные 8 бит), то есть без прозрачности).

Android допускает прозрачность, кроме того, тут есть возможность использовать так называемые «Адаптивные значки».

Начиная с Android 8.0 (API уровня 26), в интерфейсе используются адаптивные значки приложений, которые могут принимать разную форму на различных устройствах. Например, на одном устройстве такой значок будет круглым, а на другом — квадратным с закругленными краями. Адаптивный значок состоит из двух слоев: фона и переднего плана. Слои должны быть отрисованы в графическом редакторе без масок и теней по контурам. Так что в нашем случае — все, что вам может понадобиться, это фон (background.png) и передний план (foreground.png). Вы можете проверить свои изображения адаптивных значков на этой странице:

Adapticon

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

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

flutter_launcher_icons | Dart Package

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

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

pubspec.yaml

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

dev_dependencies: 
  flutter_launcher_icons:
  
flutter_icons:
  ios: true
  android: true
  image_path_ios: "assets/launcher/icon.png"
  image_path_android: "assets/launcher/icon.png"
  adaptive_icon_background: "assets/launcher/background.png"
  adaptive_icon_foreground: "assets/launcher/foreground.png"

Несколько замечаний: я оставляю flutter_launcher_icons без версии (т. к. хочу держать пакет в актуальном состоянии, сам проект не охватывается пакетом, поэтому вы не рискуете функциональностью вашей программы). ios / android true — заменяет значки по умолчанию на ваши, image_path… — пути к значкам. Последние две строки являются необязательными — они могут понадобиться только для создания «адаптивных значков» (см. выше). Сам файл pubspec.yaml очень чувствителен к иерархии пробелов (не табуляторов), поэтому вставляйте и редактируйте параметры очень осторожно.

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

flutter packages get

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

• Для того, чтобы начать генерировать иконки, используйте следующую команду:

flutter packages pub run flutter_launcher_icons:main

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

flutter run