Как изменить значок запуска приложения на Flutter?

200

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

Если я хочу изменить значок приложения, пойду ли я в каталоги обеих платформ и заменю там изображения ?, то есть каталогами платформ, которые я имею в виду myapp/ios/Runner/Assets.xcassets/AppIcon.appiconsetдля iOS и myapp/android/app/src/main/resдля Android.

Или можно определить изображение как актив Flutter и иконки генерируются как-то?

RobertoAllende
источник
Вы можете обновить appicon с двумя Кстати, я уже как способ проверить здесь
Mayur Dabhi

Ответы:

240

Flutter Launcher Icons был разработан, чтобы помочь быстро сгенерировать значки запуска для Android и iOS: https://pub.dartlang.org/packages/flutter_launcher_icons

  • Добавьте пакет в ваш файл pubspec.yaml (в вашем проекте Flutter), чтобы использовать его
  • В файле pubspec.yaml укажите путь к значку, который вы хотите использовать для приложения, а затем выберите, хотите ли вы использовать значок для приложения iOS, приложения Android или для того и другого.
  • Запустите пакет
  • Вуаля! Значки запуска по умолчанию теперь заменены на ваш пользовательский значок

Я надеюсь добавить видео в GitHub README, чтобы продемонстрировать это

Видео, показывающее, как запустить инструмент, можно найти здесь .

Если кто-то хочет предложить улучшения / сообщить об ошибках, пожалуйста, добавьте его в качестве проблемы в проекте GitHub .

Обновление: по состоянию на среду, 24 января 2018 года, вы сможете создавать новые значки, не переопределяя старые существующие значки запуска в проекте Flutter.

Обновление 2: начиная с версии 4.4.0 (8 июня 2018 года) вы можете указать одно изображение для значка Android и отдельное изображение для значка iOS.

Обновление 3: начиная с версии 0.5.2 (20 июня 2018 г.) теперь вы можете добавлять значки адаптивного запуска для приложения Android вашего проекта Flutter

Марк О'Салливан
источник
1
Есть ли какие-либо требования к изображению?
Камино
1
Я нашел ссылку только на один размер 710x599. Какова была причина выбора этого? Я ожидал бы 512x512или 1000x1000или что - то квадрат в любом случае.
Сурагч
1
@Suragch только что сделал быстрый поиск значка в Google, чтобы я мог быстро проверить его. Я включил два других размера значков, чтобы люди могли опробовать пакет (1024x1024 и 128x128), вы можете найти их здесь: github.com/fluttercommunity/flutter_launcher_icons/tree/master/…
Марк О'Салливан
3
Могу ли я предложить, чтобы пакеты read.me содержали рекомендации по размерам изображений.
Бретт Саттон
1
Это одна из лучших вещей, которые я когда-либо нашел. Спасибо, мужик!
бесил
135

Установка значков панели запуска как у разработчика

У меня были некоторые проблемы с использованием и пониманием пакета flutter_launcher_icons . Этот ответ таков, как если бы вы создавали приложение для Android или iOS изначально. Это довольно быстро и легко, если вы сделали это несколько раз.

Android

Иконки запуска Android имеют как передний план, так и фоновый слой.

введите описание изображения здесь

(изображение адаптировано из документации Android )

Самый простой способ создания значков запуска для Android - использовать Asset Studio, которая доступна прямо в Android Studio. Вам даже не нужно покидать свой проект Flutter. (Пользователи VS Code, вы можете рассмотреть возможность использования Android Studio только для этого шага. Это действительно очень удобно и не мешает быть знакомым с другой IDE.)

Щелкните правой кнопкой мыши на androidпапке в схеме проекта. Перейдите в New> Image Asset . (Попробуйте щелкнуть правой кнопкой мыши по android/appпапке, если вы не видите Image Asset в качестве опции.) Теперь вы можете выбрать изображение для создания иконки вашего запуска.

Примечание: я обычно использую 1024x1024пиксельное изображение, но вы не должны использовать ничего меньшего, чем это 512x512. Если вы используете Gimp или Inkscape, у вас должно быть два слоя, один для переднего плана и один для фона. Изображение на переднем плане должно иметь прозрачные области для просвечивающего слоя фона.

введите описание изображения здесь

(лев клипарт здесь )

Это заменит текущие значки запуска. Вы можете найти сгенерированные иконки в mipmapпапках:

Если вы предпочитаете создавать значки запуска вручную, обратитесь к этому ответу за помощью.

Наконец, убедитесь, что имя значка запуска в AndroidManifest совпадает с тем, что вы назвали выше ( ic_launcherпо умолчанию):

application android:icon="@mipmap/ic_launcher"

Запустите приложение в эмуляторе, чтобы убедиться, что значок запуска был успешно создан.

IOS

Я всегда использовал индивидуальное изменение размера значков iOS вручную, но если у вас Mac, в Mac App Store есть бесплатное приложение под названием Icon Set Creator . Вы даете ему изображение (по крайней мере 1024x1024пикселей), и оно будет отображать все необходимые вам размеры (плюс Contents.jsonфайл). Спасибо за этот ответ за предложение.

Иконки iOS не должны иметь никакой прозрачности. Смотрите больше рекомендаций здесь .

После того, как вы создали набор значков, запустите Xcode (при условии, что у вас Mac) и используйте его, чтобы открыть iosпапку в вашем проекте Flutter. Затем перейдите в Runner> Assets.xcassets и удалите элемент AppIcon.

введите описание изображения здесь

После этого щелкните правой кнопкой мыши и выберите « Импорт ...» . Выберите набор иконок, который вы только что создали.

Вот и все. Убедитесь, что значок был создан, запустив приложение в симуляторе.

Если у вас нет Mac ...

Вы все еще можете создавать все изображения вручную. В вашем проекте Flutter перейдите на ios/Runner/Assets.xcassets/AppIcon.appiconset.

Размеры изображений, которые вам нужны, это умноженные размеры в имени файла. Например, Icon-App-29x29@3x.pngбудет 29время 3, то есть 87квадрат пикселей. Вам необходимо сохранить одинаковые имена значков или отредактировать файл JSON.

Suragch
источник
1
Если вы изо всех сил пытались понять это, я с удовольствием отвечу на любые ваши вопросы. Откройте вопрос, и я перезвоню вам об этом: github.com/fluttercommunity/flutter_launcher_icons
Марк О'Салливан,
2
@ MarkO'Sullivan, спасибо. Я думаю, что пакет в порядке. Мне просто было трудно следить за документацией. Например, какой размер использовать для исходного изображения, являются ли фоновые слои, создаваемые для Android, и т. Д. Было бы очень полезно иметь подробное руководство, чтобы помочь начинающему в этом процессе.
Сурагч,
Хорошая альтернатива пакету, который не является официальным, похоже, больше не работает и не обновлялся в течение 6 месяцев ...
Yann39
1
Это помогло. В Android Studio нет возможности добавить Image Asset . Обход, который я извлек из проблемы github / flutter, заключается в открытии папки / android (в рамках проекта flutter) как отдельного стандартного проекта Android в Android Studio. Опция появится, когда вы щелкнете правой кнопкой мыши по папке / res.
MwamiTovi
2
@MwamiTovi прав, однако вам нужно подождать, пока будет щелчок правой кнопкой мыши или даже синхронизировать вручную, в противном случае «new -> image asset» не будет отображаться.
Даниил
111

Следуйте простым шагам:

  1. Добавить flutter_launcher_iconsплагин кpubspec.yaml

например

dev_dependencies: 
  flutter_test:
    sdk: flutter

  flutter_launcher_icons: ^0.7.5

flutter_icons:
  image_path: "icon/icon.png" 
  android: true
  ios: true
  1. Подготовьте значок приложения по указанному пути. e.g. icon/icon.png

  2. Выполните команду на терминале для создания значков приложений:

$ flutter pub get

$ flutter pub run flutter_launcher_icons:main

Чтобы проверить, проверить все доступные параметры и установить различные значки для Android и iOS, пожалуйста, обратитесь к этому

Надеюсь, что это поможет другим.

Рахул Махадик
источник
4
Это сработало для меня; только однажды я запустил эту последнюю строчку flutter pub pub run flutter_launcher_icons:main. Спасибо за чаевые!
olisteadman
3
Я получаю ошибки android.dart: 164: 25: Ошибка: слишком много позиционных аргументов: 1 разрешено, но 4 найдено.
ir2pid
Я могу поменять иконку, если темный режим активирован?
Максимилиано Соса
1
@ ir2pid Для устранения ошибки необходимо обновить версию до flutter_launcher_icons: 0.7.5
Gökçer Gökdal
Просто любопытный вопрос: почему pub pubвместо pub?
ch271828n
29

Вы должны заменить файлы значков Flutter собственными изображениями. Этот сайт поможет вам превратить ваш png в иконки для запуска различных размеров:

https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html

Коллин Джексон
источник
2
Ваша ссылка производит только правильные размеры для значков Android
Марк О'Салливан
19

Я бы предложил Вам использовать этот сайт.

Приложение Icon Creator

Шаг 1: загрузите изображение,

Шаг 2: внесите необходимые изменения и нажмите на кнопку загрузки (не меняйте имя файла)

Шаг 3: Распакуйте загруженный Zip-файл в соответствующую папку.

android/app/src/main/res
Нитиш Патель
источник
3
это предложение не поможет в IOS
evals
2
это решение сработало для меня (только для Android)
dark_ruby
1
Очень хорошее решение
Маянк М.
17

Я изменил его в следующих шагах:

1) пожалуйста, добавьте эту зависимость на вашей странице pubspec.yaml

 dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.7.4

2) вы должны загрузить изображение / значок в ваш проект, который вы хотите видеть как значок запуска. (Я создал имя папки: изображение в моем проекте, затем загрузите logo.png в папку изображений). Теперь вам нужно добавить приведенные ниже коды и вставить путь к изображению на image_path: на странице pubspec.yaml.

flutter_icons:
  image_path: "images/logo.png"
  android: true
  ios: true

3) Зайдите в терминал и выполните эту команду:

flutter pub get

4) После выполнения команды введите следующую команду:

flutter pub run flutter_launcher_icons:main

5) Готово

NB: (конечно, добавьте обновленную зависимость от

https://pub.dev/packages/flutter_launcher_icons#-installing-tab-

)

Пол Полаш
источник
4

Лучший и рекомендуемый способ установить значок приложения во флаттере.

Я нашел один плагин для установки значка приложения во флаттере с именем «flutter_launcher_icons». Мы будем использовать этот плагин, чтобы установить значок приложения во флаттере.

  1. Добавьте этот плагин в файл pubspec.yaml в корневой директории проекта. Пожалуйста, проверьте ниже код,

    зависимости:
    флаттер:
    sdk: флаттер
    cupertino_icons: ^ 0.1.2
    flutter_launcher_icons: ^ 0.7.2 + 1

Сохраните файл и запустите flutter pub на терминале.

  1. Создайте папку активов в корне проекта, в папке ресурсов также создайте значок папки и поместите значок приложения в эту папку. Я буду рекомендовать пользователю 1024x1024 размер значка приложения. Я поместил значок приложения в папку значков, и теперь у меня есть путь к значку приложения как assets / icon / icon.png

  2. Теперь в pubspec.yaml добавьте следующий код:

    flutter_icons:
    android: "launcher_icon"
    ios: true
    image_path: "assets / icon / icon.png"

  3. Сохраните файл и запустите flutter pub на терминале. После запуска команды выполните вторую команду, как показано ниже

    flutter pub run flutter_launcher_icons: main -f pubspec.yaml

Затем запустите приложение

Парт Патель
источник
Хотя вы ответили на тот же старый правильный ответ, по крайней мере, вы выделили основные моменты этого.
Фелипе Аугусто
0

Лучший способ - изменить иконки запуска отдельно для iOS и Android.

Измените значки в модуле iOS и Android отдельно. Плагин производит иконки разных размеров из одного значка, которые искажены.

Перейдите по этой ссылке: https://flutter.dev/docs/deployment/android

Радж Ядав
источник
-5

Вы можете добиться этого, используя flutter_launcher_icons в pubspec.yaml

Другой способ - использовать один для Android, а другой для iOS

Малик А. Абуалзаит
источник