Flutter 中的依賴管理

移動的小太陽發表於2021-03-24
Flutter

Flutter 中的依賴管理

在APP的開發中，我們知道一個應用程式主要由兩部分內容組成：程式碼和資源。程式碼關注邏輯功能，而如圖片、字串、字型、配置檔案等資源則關注視覺功能。之前更多的是學習了程式碼相關的，今天就一起來學習Flutter 整體的資源管理機制。

現在的UI框架中，大多數使用：資源外部化，即把程式碼與資源分離。如：在Android 中，資原始檔都是放在 res 目錄下，drawable 放置圖片、value 裡面則是放置一些 用到的string、color、theme等。在 Flutter 中並沒有指定資源放置在哪裡，只需要最後在 pubspace.ymal 檔案中宣告即可。

pubspace.ymal

  assets:
    - assets/ic_campaign_charity.png #指定到具體檔案
    - assets/icon/ic_campaign_diamond.png #指定到具體檔案
    - assets/image/ #指定資料夾
    - assets/result.json #指定到具體檔案
複製程式碼
Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Text("data"),
          Image.asset("assets/ic_campaign_charity.png",width: 100,height: 100,),
          Image.asset("assets/icon/ic_campaign_diamond.png"),
          Image.asset("assets/image/ic_ranking_medal_1.png"),
          Image.asset("assets/image/ic_ranking_medal_2.png"),
          Image.asset("assets/image/ic_ranking_medal_3.png"),
          MaterialButton(child: Text("載入json檔案"),onPressed: (){
            //載入
            rootBundle.loadString('assets/result.json').then((msg)=>print(msg));
          })
        ],
      ),
    );
  }
複製程式碼

對於字串檔案資源，我們使用 loadString 方法；而對於二進位制檔案資源，則通過 load 方法。

根據畫素密度載入圖示

在開發中，為了給不同畫素密度手機載入到合適的圖示，通常會把不同的圖示放在不同的資料夾下，flutter 是如何處理的呢？

與Android、iOS 開發類似，Flutter 也遵循了基於畫素密度的管理方式，如 1.0x、2.0x、3.0x 或其他任意倍數，Flutter 可以根據當前裝置解析度載入最接近裝置畫素比例的圖片資源。而為了讓 Flutter 更好地識別，我們的資源目錄應該將 1.0x、2.0x 與 3.0x 的圖片資源分開管理。

在目錄下建立 2.0x 和3.0x 目錄，把對應的icon 放到裡面；然後在 pubspace.ymal 裡面進行宣告

  assets:
    - assets/ic_campaign_charity.png #指定到具體檔案
    - assets/icon/ic_campaign_diamond.png #指定到具體檔案
    - assets/image/ #指定資料夾
    - assets/result.json #指定到具體檔案
    - assets/icon/
    - assets/icon/2.0x/
    - assets/icon/3.0x/
複製程式碼

image.png

可以看到我並沒有放置 1.0 的icon，但是執行還是沒問題了，這就給我們提示，並不是要放置所有畫素密度的icon，當沒有放置的時候，系統會自動去查詢到和當前畫素密度最相近的icon進行載入，如 放置了1.0x和2.0x的icon，但當前手機的畫素密度是3，那系統就會先從3.x裡面找，沒有找到再到2.0x裡面找，找到了直接載入顯示。

字型資源的管理

字型則是另外一類較為常用的資源。手機作業系統一般只有預設的幾種字型，在大部分情況下可以滿足我們的正常需求。但是，在一些特殊的情況下，我們可能需要使用自定義字型來提升視覺體驗。

在 pubspace.ymal 中宣告


fonts:
  - family: RobotoCondensed  #字型名字
    fonts:
      - asset: assets/fonts/RobotoCondensed-Regular.ttf #普通字型
      - asset: assets/fonts/RobotoCondensed-Italic.ttf 
        style: italic  #斜體
      - asset: assets/fonts/RobotoCondensed-Bold.ttf 
        weight: 700  #粗體
複製程式碼

然後再 Text 中使用


Text("這是 普通字型", style: TextStyle(
    fontFamily: 'RobotoCondensed',//普通字型
));
Text("這是 粗體", style: TextStyle(
    fontFamily: 'RobotoCondensed',
    fontWeight: FontWeight.w700, //粗體
));
Text("這是 斜體", style: TextStyle(
  fontFamily: 'RobotoCondensed',
  fontStyle: FontStyle.italic, //斜體
));
複製程式碼

原生平臺的資源設定

Flutter 應用，實際上最終會以原生工程的方式打包執行在 Android 和 iOS 平臺上，因此 Flutter 啟動時依賴的是原生 Android 和 iOS 的執行環境。

所以上面提到的資源的管理是 Flutter 啟動之後才可以的，但一些要在啟動Flutter之前管理的資源就需要在原生去配置了，如APP的啟動圖示。

Android 中的啟動圖示： 在 mipmap 目錄下，如果更換擇要在裡面更換；

iOS的啟動圖示：啟動圖位於根目錄 ios/Runner/Assets.xcassets/AppIcon.appiconset 下。同樣地，我們只需要遵守對應的畫素密度標準，將其替換為目標資源並保留原始圖示名稱即可。

第三方庫在Flutter中的管理

pubspace.ymal 裡面不僅僅可以管理資原始檔，更為重要的作用是管理 Flutter 工程程式碼的依賴，比如第三方庫、Dart 執行環境、Flutter SDK 版本都可以通過它來進行統一管理。

首先來看看pub是什麼？

Dart 提供了包管理工具 Pub，用來管理程式碼和資源。與 Android 中的 JCenter/Maven、iOS 中的 CocoaPods、前端中的 npm 庫類似，Dart 提供了官方的包倉庫 Pub。通過 Pub，我們可以很方便地查詢到有用的第三方包。pub官網

可以看看 pubspace.yaml

name: flutter_base_app #應用名稱
description: A new Flutter application. #應用描述
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1 #應用的版本
#Dart執行環境區間，可以指定一個版本區間，也可以指定特定版本，在正式開發中一般都明確指定版本
environment:
  sdk: ">=2.7.0 <3.0.0"
#Flutter依賴庫
dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.0 #依賴第三方庫，name: vesion

dev_dependencies:
  flutter_test:
    sdk: flutter
flutter:
  uses-material-design: true
  
# 資源管理依賴
  assets:
    - assets/ic_campaign_charity.png #指定到具體檔案
    - assets/icon/ic_campaign_diamond.png #指定到具體檔案
    - assets/image/ #指定資料夾
    - assets/result.json #指定到具體檔案
    - assets/icon/
    - assets/icon/2.0x/
    - assets/icon/3.0x/
複製程式碼

當我們依賴的 第三方庫，不對外公開發布，或者目前處於開發除錯階段的包，我們需要設定資料來源，使用本地路徑或 Git 地址的方式進行包宣告。


dependencies:
  package1:
    path: ../package1/  #路徑依賴
  date_format:
    git:
      url: https://github.com/xxx/package2.git #git依賴
複製程式碼

然後，在完成了所有依賴包的下載後，Pub 會在應用的根目錄下建立.packages 檔案，將依賴的包名與系統快取中的包檔案路徑進行對映，方便後續維護。

最後，Pub 會自動建立 pubspec.lock 檔案。pubspec.lock 檔案的作用類似 iOS 的 Podfile.lock 或前端的 package-lock.json 檔案，用於記錄當前狀態下實際安裝的各個直接依賴、間接依賴的包的具體來源和版本號。

總結

通過學習Flutter 對資源和第三方庫的管理，瞭解了 Flutter 是 通過在pubSspace.ymal 檔案中宣告資原始檔的路徑，通過在 dependencies節點下 通過 name:version 的形式，新增第三方庫，這些庫使用 官方的包倉庫 Pub進行管理。

相關文章