web-dev-qa-db-ja.com

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

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

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

あるいは、画像を Flutter Asset として定義してアイコンを生成することはできますか？.

flutterapplication-icon
77
RobertoAllende

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

  • それを使用するためにあなたのpubspec.yamlファイル（あなたのFlutterプロジェクト内）にパッケージを追加してください
  • 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アプリにアダプティブランチャーアイコンを追加できるようになりました

104
Mark O'Sullivan

簡単な手順に従ってください。

  1. flutter_launcher_iconsプラグインをpubspec.yamlに追加する

例えば.

dev_dependencies: 
  flutter_test:
    sdk: flutter

  flutter_launcher_icons: "^0.6.1"

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で異なるアイコンを設定するには、 this を参照してください。

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

47
Rahul Mahadik

ネイティブ開発者のようにランチャーアイコンを設定する

flutter_launcher_icons パッケージの使用と理解に問題がありました。この答えは、AndroidまたはiOS用のアプリケーションをネイティブに作成している場合にどのようにしてそれを行うかです。あなたがそれを数回やったら、それはかなり速くて簡単です。

アンドロイド

Androidのランチャーアイコンには、前景レイヤーと背景レイヤーの両方があります。

enter image description here

（ Androidのドキュメント から適応した画像）

Android用のランチャーアイコンを作成する最も簡単な方法は、Android Studioで利用可能なAsset Studioを使用することです（VSCodeユーザーは申し訳ありません）。 Flutterプロジェクトを離れる必要はありません。

プロジェクトアウトラインのAndroidフォルダを右クリックします。 新規>画像アセットに移動します。ランチャーアイコンを作成する画像を選択できます。

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

enter image description here

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

これは現在のランチャーアイコンを置き換えます。生成されたアイコンはmipmapフォルダーにあります。

手動でランチャーアイコンを作成したい場合は、この回答を参照してください。

最後に、AndroidManifestのランチャーアイコンの名前が、上で呼び出したものと同じであることを確認します（デフォルトではic_launcher）。

application Android:icon="@mipmap/ic_launcher"

エミュレータでアプリを実行して、ランチャーアイコンが正常に作成されたことを確認します。

iOS

私はいつもiOSのアイコンを個々に手動でリサイズしていましたが、あなたがMacを持っているなら、 Icon Set Creator という無料のアプリがMac App Storeにあります。あなたはそれに画像（少なくとも1024x1024ピクセルの）を与えてください、そしてそれはあなたが必要とするすべてのサイズを吐き出します（そしてContents.jsonファイル）。提案を寄せてくれた この回答 に感謝します。

iOSのアイコンは透明にしないでください。その他のガイドライン はこちら をご覧ください。

アイコンセットを作成したら、Xcodeを起動し（Macを使用している場合）、それを使用してFlutterプロジェクトのiosフォルダを開きます。次に、Runner> Assets.xcassetsに移動して、AppIconアイテムを削除します。

enter image description here

その後、右クリックしてインポート...を選択します。作成したばかりのアイコンセットを選択します。

それでおしまい。シミュレータでアプリを実行してアイコンが作成されたことを確認します。

あなたがMacを持っていないなら...

あなたはまだ手ですべての画像を作成することができます。 Flutterプロジェクトでios/Runner/Assets.xcassets/AppIcon.appiconsetに行きます。

あなたが必要とする画像サイズはファイル名に乗じられたサイズです。たとえば、[email protected]は29×3、つまり87ピクセル四方になります。同じアイコン名をそのまま使用するか、JSONファイルを編集する必要があります。

30
Suragch

あなたはFlutterのアイコンファイルをあなた自身の画像で置き換える必要があります。このサイトはあなたのpngを様々なサイズのランチャーアイコンに変えるのを助けます：

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

18
Collin Jackson

私はあなたが言及したディレクトリのアイコンを常に変更しました。私はフラッターがあなたのためにアイコンを生成することを可能にするためのいかなるメカニズムも知らない。

3
Rainer Wittmann

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

アプリアイコン作成者

Step-1：画像をアップロードする

ステップ2：必要な変更を加えてダウンロードをクリックします（ファイル名は変更しないでください）

Step-3：それぞれのフォルダにダウンロードしたZipファイルを解凍する

Android/app/main/src/res
1
Nitish Patel

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

IOSとAndroidモジュールのアイコンを別々に変更してください。プラグインは歪んでいる同じアイコンから異なるサイズのアイコンを生成します。

このリンクをたどってください： https://flutter.dev/docs/deployment/Android

1
Raj Yadav