Flutterのアプリケーションランチャーアイコンを変更するにはどうすればよいですか?


199

flutter createコマンドを使用してアプリを作成すると、フラッターロゴが両方のプラットフォームのアプリケーションアイコンとして使用されます。

アプリのアイコンを変更したい場合は、両方のプラットフォームディレクトリに移動して、そこで画像を置き換えますか?myapp/ios/Runner/Assets.xcassets/AppIcon.appiconsetiOSおよびmyapp/android/app/src/main/resAndroidのプラットフォームディレクトリ です。

または、画像をFlutterアセットとして定義し、アイコンが何らかの方法で生成されるようにすることは可能ですか?


次の2つの方法でAPPICONを更新することができ、私は両方の方法でチェックを言及しているここに
マユールDabhi

回答:


239

Flutterランチャーアイコンは、AndroidとiOSの両方のランチャーアイコンをすばやく生成できるように設計されています。https//pub.dartlang.org/packages/flutter_launcher_icons

  • パッケージを(Flutterプロジェクト内の)pubspec.yamlファイルに追加して使用します
  • pubspec.yamlファイル内で、アプリに使用するアイコンのパスを指定し、アイコンをiOSアプリ、Androidアプリ、またはその両方に使用するかどうかを選択します。
  • パッケージを実行する
  • 出来上がり!デフォルトのランチャーアイコンがカスタムアイコンに置き換えられました

ビデオをGitHub READMEに追加して、それをデモンストレーションしたいと思っています。

ツールの実行方法を示すビデオはここにあります

改善を提案したり、バグを報告したりする場合は、GitHubプロジェクトの問題として追加してください。

更新: 2018年1月24日水曜日の時点で、Flutterプロジェクトの古い既存のランチャーアイコンを上書きせずに、新しいアイコンを作成できるはずです。

アップデート2: v0.4.0(2018年6月8日)以降、Androidアイコン用に1つの画像とiOSアイコン用に別の画像を指定できます。

アップデート3: v0.5.2(2018年6月20日)以降、FlutterプロジェクトのAndroidアプリにアダプティブランチャーアイコンを追加できるようになりました


1
画像の要件はありますか?
カミノ2018

1
1つのサイズへの参照しか見つかりませんでした710x599。それを選んだ理由は何ですか?私は期待しているでしょう512x5121000x1000平方とにかくか何か。
Suragch

1
@SuragchはGoogleでアイコンをすばやく検索したので、すぐにテストできます。私は人々がパッケージ(1024×1024と128×128)を試してみることができるように、あなたはここでこれらを見つけることができる他の二つのアイコンのサイズを含んでいた:github.com/fluttercommunity/flutter_launcher_icons/tree/master/...
マーク・オサリバン

3
read.meパッケージが画像サイズに関する推奨事項を提供するように提案できますか?
Brett Sutton、

1
これは私が今まで見つけた中で最高のものの1つです。男ありがとう!
ベシル

135

ネイティブデベロッパーのようにランチャーアイコンを設定する

flutter_launcher_iconsパッケージの使用と理解に問題がありました。この答えは、AndroidまたはiOS用のアプリをネイティブで作成する場合の方法です。数回実行すると、非常に高速で簡単です。

アンドロイド

Androidランチャーアイコンには、フォアグラウンドレイヤーとバックグラウンドレイヤーの両方があります。

ここに画像の説明を入力してください

(画像はAndroidドキュメントから変更)

Androidのランチャーアイコンを作成する最も簡単な方法は、Android Studioで直接利用できるAsset Studioを使用することです。Flutterプロジェクトから離れる必要もありません。(VS Codeユーザーの場合、このステップのためだけにAndroid Studioを使用することを検討してください。非常に便利で、他のIDEに慣れていても問題ありません。)

androidプロジェクトアウトラインのフォルダを右クリックします。[新規]> [画像アセット]に移動します。(オプションとして画像アセットが表示さandroid/appない場合は、フォルダーを右クリックしてみてください。)これで、ランチャーアイコンを作成する画像を選択できます。

注:通常は1024x1024ピクセル画像を使用しますが、それよりも小さいものは使用しないでください512x512。GimpまたはInkscapeを使用している場合は、前景用と背景用の2つのレイヤーが必要です。前景画像には、背景レイヤーが透けて見えるように透明領域が必要です。

ここに画像の説明を入力してください

ここからライオンのクリップアート)

これにより、現在のランチャーアイコンが置き換えられます。生成されたアイコンは次の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だろう293である、87正方形ピクセル。同じアイコン名を維持するか、JSONファイルを編集する必要があります。


1
それを理解するのに苦労していたなら、私はあなたが持っているどんな質問にでも答えてうれしいです。問題を開いたら、折り返しご連絡
Mark O'Sullivan

2
@ MarkO'Sullivanさん、ありがとうございます。私の推測では、パッケージは大丈夫です。ただ、ドキュメントを理解するのが困難だっただけです。たとえば、最初の画像に使用するサイズ、Android用に作成される背景レイヤーなどです。初心者がプロセスをガイドする詳細なチュートリアルがあると非常に役立ちます。
Suragch

公式ではないパッケージの良い代替品はもう機能していないようで、6か月間更新されていません...
Yann39

1
これは役に立ちました。Android Studio内では、画像アセットを追加するオプションはありません。私がgithub / flutterの問題から学んだ回避策は、Android Studio内の標準の「Android」プロジェクトとして(flutterプロジェクト内の)/ androidフォルダーを開くことです。このオプションは、/ resフォルダーを右クリックすると表示されます。
MwamiTovi

2
@MwamiToviは正しいですが、右クリックまたは手動で同期する前にGradleの同期を待つ必要があります。そうしないと、「新規->画像アセット」が表示されません。
ダニエル

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 pub run flutter_launcher_icons:main

使用可能なすべてのオプションを確認し、AndroidとiOSで異なるアイコンを設定するにはこちらを参照してください

これが他の人の役に立つことを願っています。


4
これでうまくいきました。最後の行を実行するのは1回だけflutter pub pub run flutter_launcher_icons:mainです。先端をありがとう!
オリステッドマン

3
エラーが表示されるandroid.dart:164:25:エラー:位置引数が多すぎます:1つは許可されていますが、4つが見つかりました。
ir2pid

ダークモードが有効になっている場合、アイコンを切り替えることができますか?
Maximiliano Sosa

1
0.7.5:@ ir2pidあなたがflutter_launcher_iconsとしてバージョンを更新する必要があるエラー解決するために
GökçerGökdal


19

以下にリンクされているこのウェブサイトを使用することをお勧めします

アプリアイコンクリエーター

ステップ-1:画像をアップロードし、

ステップ-2:必要な変更を行い、ダウンロードをクリックします(ファイル名は変更しないでください)

手順3:ダウンロードしたZipファイルをそれぞれのフォルダーに抽出します

android/app/src/main/res

3
この提案はIOSでは役に立たない
evals

2
このソリューションは私に
有効でした

1
非常に素晴らしいソリューションです。
Mayank M.

17

次の手順で変更しました。

1)この依存関係をpubspec.yamlページに追加してください

 dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.7.4

2)ランチャーアイコンとして表示したい画像/アイコンをプロジェクトにアップロードする必要があります。(プロジェクトにフォルダname:imageを作成し、画像フォルダにlogo.pngをアップロードします)。次に、以下のコードを追加して、pubspec.yamlページのimage_path:に画像パスを貼り付ける必要があります。

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

3)端末に移動して、次のコマンドを実行します。

flutter pub get

4)コマンドを実行した後、以下のコマンドを入力します:

flutter pub run flutter_launcher_icons:main

5)完了

注意:(もちろん、更新された依存関係を

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


4

Flutterでアプリアイコンを設定するための最良かつ推奨される方法。

「flutter_launcher_icons」というアプリアイコンをフラッターに設定するプラグインを1つ見つけました。このプラグインを使用して、アプリのアイコンをフラッターに設定します。

  1. このプラグインをプロジェクトルートディレクトリのpubspec.yamlファイルに追加します。以下のコードを確認してください、

    依存関係:
    flutter:
    sdk:flutter
    cupertino_icons:^ 0.1.2
    flutter_launcher_icons:^ 0.7.2 + 1

ファイルを保存し、ターミナルでflutter pub getを実行します。

  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 getを実行します。コマンドを実行した後、次のように2番目のコマンドを実行します

    flutter pub run flutter_launcher_icons:main -f pubspec.yaml

次に、アプリを実行します


あなたは同じ古い正解に答えましたが、少なくともあなたはそれの主要なポイントを強調しました。
フェリペアウグスト

0

最善の方法は、iOSとAndroidの両方でランチャーアイコンを個別に変更することです。

iOSおよびAndroidモジュールのアイコンを個別に変更します。プラグインは、同じアイコンから変形した異なるサイズのアイコンを生成します。

このリンクに従ってください:https : //flutter.dev/docs/deployment/android


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.