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

Roman Cinis
3 min readAug 25, 2019

Вступление

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

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

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

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

  • Растровое изображение 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). Вы можете проверить свои изображения адаптивных значков на этой странице:

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

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

Скопируйте ваши изображения (т.е. файлы 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

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Roman Cinis
Roman Cinis

Written by Roman Cinis

I'm a multiple-time Google-awarded Flutter/Dart developer, with a great love for interactive animations and good UX. Big Rive fan.

No responses yet

Write a response