Flutter中設定Android的應用名稱和圖示(android,ios,web)#yyds幹貨盤點#

這裡是堅果前端小課堂，大家喜歡的話，可以關注我的公衆号“堅果前端，”，或者加我好友，擷取更多精彩内容

在前面的幾期給大家介紹了flutter的安裝以及一些簡單的配置，還運作了helloword

那麼接下來就帶領大家了解如何設定應用名稱以及圖示

Flutter設定App的應用名字和應用logo圖示的方法，

知識點雖然簡單，但是不知道這個知識點就不行，是以還是要記錄下來，分享一下。

其實，Flutter設定App的應用名稱和圖示是要分開來操作的，Android和iOS是分開設定對應的App名稱和圖示的，這一點一定要注意。也可以把Android和iOS的應用名稱和圖示分開設定，可以設定不一樣，但是畢竟一個App為了保證一緻性，還是不要這樣做，老老實實保證Android和iOS兩個端的應用資訊保持一緻吧。

Flutter在建立過程中，生成的project name是預設的應用名稱，應用圖示也是預設的，具體效果如下所示：

一、Flutter中設定Android的應用名稱和圖示

這裡把應用名稱和圖示放在一起介紹，具體操作如下是以。

1、首先要定位到修改應用名稱的檔案，有兩種打開方式，

第一種方式就是用VS Code編輯器打開項目，然後找到項目裡面的Android目錄下的Android—>app—>src—>main—>AndroidManifest.xml檔案，找到對應的位置進行修改；

第二種方式就是打開Android Studio編輯器打開項目裡面的Android檔案，依然是在app—>src—>main—>AndroidManifest.xml檔案中進行修改，具體的操作如下所示：

（1）AndroidManifest.xml檔案中application下面的label對應的值就是應用的名稱；

（2）AndroidManifest.xml檔案中application下面的icon對應的值就是應用的圖示檔案；

二、Flutter中設定iOS的應用名稱和圖示

1、由于蘋果的icon設定有點特殊，建議開發者直接通過xcode編輯器打開項目的iOS檔案夾，然後在xcode編輯器裡面進行iOS端的應用圖示設定。由于我個人沒有蘋果電腦，不過也可以給大家提供一種方法

用VS Code編輯器打開項目，找到iOS目錄下的ios—>Runner—>Info.plist檔案，然後找到對應的設定應用名稱的鍵值對進行設定；

（1）Info.plist檔案裡面對應的含有App名字的鍵值對就是設定應用名稱的地方；

（2）Assets.xcassets檔案裡面的AppIcon裡面對應的就是設定應用圖示的地方；

設定完應用名稱和圖示的最終效果，如下所示：

三、Flutter中設定web端的應用名稱和圖示

應用名稱

index.html中的title

應用圖示

最後在main.dart 中預設有兩個 title，你可以了解為第一個為應用内名稱，第二個相當于 Activity 頁面标題名稱。

return new MaterialApp (
    title: '堅果'   // 應用内名稱
    home: new Scaffold(
        appBar: new AppBar(
            title: new Text("堅果前端小課堂"),  // 頁面标題名
        ),
    ),
);      

好的，今天的分享到這兒就結束了，大家喜歡的話，可以點贊支援一下