На связи Павел Гершевич, Mobile Team Lead агентства продуктовой разработки Amiga. Сегодня обсудим кастомизацию иконок по формам и цветам на Flutter. Особенно интересно рассмотреть кейсы с Android выше 12 версии и iOS 18, который пока еще в бете.
Конечно, можно использовать библиотеку flutter_launcher_icons, о которой мы уже рассказывали, но она пока не работает с новыми иконками для iOS. Изменение иконки у приложения — задача достаточно редкая. Давайте посмотрим, как это можно сделать вручную.
👾 Начнем с Android. Можно создать статичные иконки (прямоугольные и круглые), динамическую форму и монохромные, чтобы потом менять цвет.
Для этого понадобится цвет фона или сам фон (только для статичных и динамической формы) и объект на передний план. Всё это в векторе.
Если используем статичные картинки, то их можно подготовить и сделать нужных размеров вручную или при помощи специальных генераторов. Добавляем их в папки /android/app/src/main/res/mipmap-xxxx/ (xxxx заменить на нужный размер) под именами ic_launcher и ic_launcher_round. Далее вписываем код в AndroidManifest:
<application
...
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
...>
</application>
Если хотим динамические картинки, то можно воспользоваться встроенным инструментом в Android Studio. Для этого откройте папку Android вашего проекта как отдельный проект. После нажмите правой кнопкой мыши на res и выберите New -> Image Asset.
Далее выбираем картинку в Foreground и фон в Background. И Android Studio все сделает сама.
Теперь перейдем в res/drawables/anydpi-v26/ic_launcher.xml и добавим монохромную версию. Если она у вас будет отличаться от фона стандартной, то сначала добавьте свое изображение.
<monochrome android:drawable="@drawable/ic_launcher_foreground" />
🤖 На iOS все проще. С приходом iOS 18 придет еще 2 типа иконок: для темного режима (Dark) и окрашенные (Tinted).
Лучше всего попросить дизайнера сделать эти 2 типа иконок и изменить их размер, чтобы вставить в Xcode. Сейчас это делается через Xcode Beta. Для темной темы и окраски можно обойтись прозрачными изображениями в отличии от светлой темы.
Всем хорошего кода! Пишите в чате, как вы кастомизируете иконки на Flutter?