Адаптивные иконки
surf_flutter
Какой аспект мобильного приложения пользователь видит чаще всего? Многие могут удивиться, но это вовсе не интерфейс или анимации. Это иконка — то, с чего начинается знакомство с приложением в магазине и что каждый день выделяется на домашнем экране.
Я, Самир, Flutter Team Lead в Surf. В этой статье расскажу, как правильно настроить иконку во Flutter-проекте, чтобы она выглядела привлекательно и профессионально.
Адаптивные иконки в Android
На самом деле, такое понятие, как «адаптивные иконки», в Android введено достаточно давно — фактически, это XML-файл с указанными background-ом и foreground-ом вместо тысячи версий размеров одной и той же иконки. Они используются не только самим приложением, но и повсеместно в системных анимациях, согласно документации.
Также стоит затронуть такую фичу как «Тематические значки». С выходом Android 13 (API 33) пользователи получили возможность применять темы к адаптивным иконкам приложений. Если функция включена, то система автоматически подбирает оттенки значков в соответствии с цветами выбранных обоев и темы. Она использует уже имеющуюся инфраструктуру: читает наш XML-файл и перекрашивает задний и передний фон в ту тему, которую выбрал пользователь.
Однако в Android есть множество нюансов их работы:
- Поддержка с Android 13 и выше
Устройство должно работать на Android 13 или более новой версии. Это не критично — по найденной мной статистике, уже около 50% смартфонов используют Android 13 и выше. - Оболочка должна поддерживать пользовательские темы
А вот это уже проблема. На данный момент из крупных производителей такую функцию поддерживает только Pixel Launcher от Google и несколько кастомных прошивок. Несмотря на рост влияния Google среди вендоров Android, их лаунчер остаётся нишевым решением, особенно на рынке СНГ. - Настроенная пользовательская тема
Без неё эта функция просто не будет работать. Но не переживай — настройка достаточно простая.
Создаём адаптивные иконки для Android
Создать адаптивные иконки довольно просто. Открываем Android Studio и загружаем Android-модуль нашего Flutter-проекта (android).
Далее переходим в папку ресурсов (android/app/src/main/res) и создаём новый Image Asset через меню: New > Image Asset.
В открывшемся меню выбираем Launcher Icons (Adaptive and Legacy), и заполняем background и foreground нашей иконки из имеющихся у вас ресурсов. Обратите внимание, что не нужно всю иконку пихать в один из слоёв - иначе магия не сработает.
Помимо множества файлов для обратной совместимости, будет создан ic_launcher.xml — это и есть адаптивная иконка.
Чтобы добавить поддержку пользовательских тем, откройте сгенерированный файл ic_launcher.xml и добавьте в него поле monochrome. Это должна быть полностью белая, нейтральная версия foreground в векторном формате. Создать её можно прямо в Android Studio.
Адаптивные иконки в iOS
Адаптивные иконки пришли к нам сравнительно недавно, в iOS 18. Помимо основной иконки приложения появились 2 новых вида - dark и tinted.
В iOS 18 встроены алгоритмы, автоматически преобразующие основную иконку приложения в две дополнительные версии без дополнительной настройки со стороны разработчика. Благодаря этому функция станет доступна большему числу пользователей.
Создаём адаптивные иконки для iOS
Настроить иконки в iOS довольно просто. Открываем модуль ios Flutter-проекта в Xcode — там уже должна быть AppIcon в ресурсах приложения (Runner > Assets).
В боковом меню выбираем Single Size, чтобы избежать множества версий одной и той же иконки. В разделе Appearances устанавливаем Any, Dark, Tinted для новых вариантов отображения.
Затем загружаем соответствующие иконки в нужные слоты. Подробнее о формате иконок можно узнать в Apple Design Guidelines.
Полезные ссылки
Больше про Flutter-разработку — в нашем Telegram