こんにちは。最近、FlutterFlowでもAndroidのAdaptive Icon（アダプティブアイコン）へ対応がされました。今回はそれについて書いていきたいと思います。
Android Adaptive Icon（アダプティブ アイコン）とは？
そもそも、Android Adaptive Icon（アダプティブ アイコン）とは、Android公式によると以下のようなものになります。
アダプティブ アイコン（AdaptiveIconDrawable）は、個々のデバイスの機能やユーザーのテーマ設定に応じて異なる表示が可能です。アダプティブ アイコンは、主にホーム画面のランチャーで使用されますが、ショートカット、設定アプリ、共有ダイアログ、概要画面でも使用されます。アダプティブ アイコンは、Android のすべてのフォーム ファクタで使用されます。
https://developer.android.com/develop/ui/views/launch/icondesignadaptive?hl=ja
アイコンが円形だったり四角だったりするアレですね。
なので、例えば以下右のアイコンのように「四角」前提のアイコンを作ってたのに「丸い」アイコンで表示されてしまった場合、上下左右に白い余白が表示されてなんか変な感じになりますよね。
そこでこの度のFlutterFlowのAdaptive icon対応が生きてきます。
FlutterFlowでのAndroid Adaptive Icon（アダプティブ アイコン）への対応の仕方
やり方は簡単です。
App SettingsのApp AssetsからAndroid Adaptive Iconという箇所があるのでそこでForeground Iconを設定します。
さらに、それに対しBackground TypeとBackground Colorを設定します。例えば、上記の例でいうと、Foreground Iconに透過な画像を登録し、Background Colorとして背景色を白に設定してみました。すると四角の時と丸の時のそれぞれの画像が右側にこんな感じで表示されます。これならいい感じですね！
アプリ・Webサービスの開発の無料相談はこちら
FlutterFlow、bubble、Adalo、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。