Flutter如何快速做好App的圖標適配

2021-01-11 麥子的2020

接觸Flutter一年多的時間，作為一名之前只做H5前端開發的老司機，對類原生App開發還是挺有興趣的，一點小小的發現和提升都會驚喜，希望能和大家一起學習進步，提升自己的能力，做出更好更優秀的APP應用。今天跟大家一起來學習如何做好Flutter App應用圖標的適配。

Android 8.0 後App圖標開始變成圓形的圖標了

如果不進行圖標適配的話，那麼顯示的圖標將異常醜

那麼怎麼用一套圖標，既可以兼容安卓8之前的版本矩形/圓角矩形圖標，也可以兼容8之後的圓形圖標版本呢？

在此之前我們得先了解一項Android 8.0以後應用圖標上的區別（老司機可以無視）。

Android 8.0（API 級別 26）引入了自適應啟動器圖標，可以在不同設備模型中顯示各種形狀。先來看下官方酷炫動態圖：

Android 8.0 以上可以通過定義 2 層來控制自適應啟動器

圖標的外觀，包括背景層和前景層，就如我們在做PS多圖層疊加一個道理。您必須提供圖標的背景圖層（也可以是單獨的一個Hex色值），前景層的圖標輪廓周圍不能有蒙版或背景陰影。這裡前後圖層還需注意以下兩點：

圖層大小以 324*324 （單位px）為佳；前景層即圖標層的圖標主體部分應居中且不應超過圖層大小的66.6%，以324寬高為例，主體圖標部分大小不應超過 215*215 大小，否則圖標的主體會被遮罩部分擋住。好了到此處我們的Flutter圖標適配就完成了90%了。啥？我們不是什麼都還沒做嗎？對於剩下的步驟工具一個命令就能能完成的事，那不叫事，嘿嘿。

首先準備好我們要用的圖層和圖標，如下：

兼容Android 8.0之前應用圖標 ic_launc
背景圖層 ic_launcher_background.png
前景圖層 ic_launcher_foreground.png

萬事俱備，只欠東風，要快速實現自適應圖標，還得請出我們的主角，那就是Flutter的插件：flutter_launcher_icons

flutter_launcher_icons 提供了adaptive_icon_background 和 adaptive_icon_foreground 指定這兩個屬性，即可實現安卓8以上版本的圖標自適應工作。安裝好依賴之後需要做簡單的配置即可，如下

#App 應用適配圖標配置

flutter_icons:

android: "ic_launcher"

ios: true

image_path: "assets/icon/ic_launcher.png"

# only available for Android 8.0 devices and above

adaptive_icon_background: "assets/icon/ic_launcher_background.png"

adaptive_icon_foreground: "assets/icon/ic_launcher_foreground.png"

具體詳細的配置參數可以去官方插件地址了解，在這裡就不詳細介紹了.

相關焦點

  • Flutter1.22發布｜支持 iOS14，推出更多新功能
    Flutter 1.22 基於之前的版本更上一層樓，繼續助力開發者基於一個代碼庫為多個平臺打造快速、美觀的用戶體驗。我們的季度穩定版本中囊括了最新功能、性能改進和問題修復，且適用於多樣的生產環境。由於本季度是新版行動作業系統的發布季，因此這一版本側重於確保 Flutter 能夠有效支持 Android 11 和 iOS 14。
  • Flutter框架在移動APP開發方面的優勢漸漸增長
    flutter官方公布的成功案例截圖Flutter是 由 Google發布的 的移動UI框架 使用Dart語言所編寫，可以快速在iOS和Android上構建高質量的原生用戶界面。Flutter項目的一個目錄結構這是flutter入口文件的一個編寫 可以發現 是和 java 有點類似的import 'package:flutter/material.dart';import
  • flutter項目:如何進行web平臺和移動端平臺快速切換的技巧方法
    文章主題以前有幾篇介紹flutter的文章，分別介紹了如何配置環境，如何使用基本控制項。今天我來介紹一下進行flutter開發時，使用Android studio如何進行跨平臺快速切換的問題。 首先，按照要求下載Android studio和flutter，然後參考我的這篇文章進行環境配置。配置完成後，對flutter進行web開發支持的切換。詳情請參考下我的這篇文章：推薦新技術flutter開發web頁面的環境搭建。
  • 使用 Flutter 創建 App
    閱讀之後，你將了解如何快速安裝和設置框架，以便開始為智慧型手機、平板電腦和其他平臺開發。本操作指南假定你已在計算機上安裝了 Android Studio ，並且具有一定的使用經驗。什麼是 Flutter ？
  • 成功仿出Flutter微信界面｜紅包｜朋友圈，我在鵝廠等你
    FlutterChatroom項目是基於flutter+dart+image_picker等技術實現的仿微信app聊天室實戰項目。基於dart語言，需要安裝Dart Sdk / Flutter Sdk，如何搭建開發環境，可以去官網查閱資料https://flutter.cn/https://flutterchina.club/https://pub.flutter-io.cn/https://www.dartcn.com/
  • Flutter Go首頁、文檔和下載 - Flutter 學習 App - OSCHINA
    Flutter Go 是一個用來幫助開發者快速上手flutter優點主要包括： 跨平臺 開源 Hot Reload、響應式框架、及其豐富的控制項以及開發工具 靈活的界面設計以及控制項組合 藉助可以移植的GPU加速的渲染引擎以及高性能ARM代碼運行時已達到高質量的用戶體驗Flutter Go 的由來 Flutter學習資料太少，對於英文不好的同學相對來說比較困難 官網文檔示例不夠健全，不夠直觀 各個 widget 的用法各異，屬性紛繁
  • 教你如何使用Flutter和原生App混合開發
    18年底的時候用flutter做了個小項目，發現flutter確實挺好用的。於是嘗試在公司找個小項目上馬，進行混合開發試試。}　　我這裡創建一個flutter的模塊項目叫flutter_module　　flutter create -t module flutter_moduleCreating project flutter_module...
  • Flutter教程從零構建電商應用(一)
    在這個系列中，我們將學習如何使用google的移動開發框架flutter創建一個電商應用。本文是flutter框架系列教程的第一部分，將學習如何安裝Flutter開發環境並創建第一個Flutter應用，並學習Flutter應用開發中的核心概念，例如widget、狀態等。
  • Flutter 加載本地圖像教程 Android iOS 通用 建議收藏
    而在2018年，我們的主角變成了Flutter，這是Goolge開源的一個移動端跨平臺解決方案，可以快速開發精美的移動App。希望跟大家一起學習，一起進步！本文核心要點Flutter應用程式可以包含代碼和 assets（有時稱為資源）。asset是打包到程序安裝包中的，可在運行時訪問。
  • 重要宣布：Flutter 首個發布預覽版
    我們會進一步完善我們的文檔和工具，讓 Flutter 與傳統原生應用之間的混合開發更加輕鬆，你可以關注這篇文章來跟進我們的進展：https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps如何更新到 Flutter Release Preview 1 版呢？
  • Google Flutter這麼火?擼一個APP登錄界面(上)
    大家好，這裡是【whycode】今天我們來用dart+flutter框架擼一個APP登錄界面。先貼效果圖iconflutter自帶Google Material設計的所有圖標字體，通過Icons.xxx調用，這裡使用了account_circle圖標演示。color參數設置圖標顏色，size參數設置圖標大小，這裡設置圖標大小為100。
  • Flutter實現國際化
    國際化的適配 2.1. Widget的國際化Flutter給我們提供的Widget默認情況下就是支持國際化，但是在沒有進行特別的設置之前，它們無論在什麼環境都是以英文的方式顯示的。2.1.1. pubspec添加依賴想要使用 flutter_localizations 的話，我們需要在 pubspec.yaml 文件中添加它作為依賴：dependencies:  flutter:    sdk: flutter  flutter_localizations
  • 所見即所得 | Flutter1.22發布，推出更多新功能
    上周在中，介紹了針對iOS14及Android11的支持適配，今天的文章將主要介紹一下除此以外1.22版本的更新內容。有關 characters package 的更多詳細信息，請參閱《如何正確處理 Dart 字符串》。
  • Flutter入門——開發過程中常用功能實現
    = await getApplicationDocumentsDirectory(); String dir = appDocDir.path + &34;; cookieJar = PersistCookieJar(dir: dir); dio.interceptors.add(CookieManager(cookieJar));dio.options.connectTimeout
  • Flutter Go
    Flutter Go 是一個用來幫助開發者快速上手flutter優點主要包括： 跨平臺 開源 Hot Reload、響應式框架、及其豐富的控制項以及開發工具 靈活的界面設計以及控制項組合 藉助可以移植的GPU加速的渲染引擎以及高性能ARM代碼運行時已達到高質量的用戶體驗Flutter Go 的由來 Flutter學習資料太少，對於英文不好的同學相對來說比較困難 官網文檔示例不夠健全，不夠直觀 各個 widget 的用法各異，屬性紛繁
  • Flutter 二維碼掃描插件
    : ^1.0.1導入頭文件 import 'package:flutter_plugin_qrcode/flutter_plugin_qrcode.dart';'dart:async';import 'package:flutter/services.dart';import 'package:flutter_plugin_qrcode/flutter_plugin_qrcode.dart';void main() => runApp(MyApp());class MyApp extends StatefulWidget {
  • 精講Flutter官網的第一個例子
    更多優質免費教程：http://tryenough.com/type-flutter原文連結：https://tryenough.com/flutter04前言學習Flutter你一定會看到官網的第一個例子：中文版 或 英文版。但是作為新手，或許你看的會很費勁，這篇文章的目的是幫助你更好的理解這個例子。
  • Flutter源碼剖析(一):源碼獲取與構建
    Execution failed for task ':app:compileFlutterBuildDebug'.Done                        18.1s✓ Built build/app/outputs/flutter-apk/app-debug.apk.
  • 如何系統學習功能圖標(二)
    由於最近的工作原因對圖標有了更加全方位的認知，雖然之前寫過《如何繪製功能圖標基礎篇？》《如何系統的學習功能圖標？》這兩篇文章，但裡面還是缺少了理論依據和系統做圖標的思維。通過不斷在學習的過程中不斷有了新的認知，希望和大家一起分享。圖標設計原則1. 表意準確功能圖標的第一原則是表意準確，要讓用戶看到圖標第一時間就能理解它的含義。
  • 編寫第一個可以運行在Android、iOS、Web平臺的Flutter應用
    實現跨平臺應用使用flutter提供的模板創建項目 flutter create my_app cd my_app實現一個沒有交互的靜態頁面使用VSCode打開上面命令行初始化出來的my_app工程在這部分，我們將為每一行添加一個心形的（收藏）圖標，下一步你將能夠為這個圖標加入點擊收藏的功能。