Flutter 支援使用由其他開發者貢獻給 Flutter 和 Dart 生態系統的共享包。這使得無需從頭開始開發所有內容即可快速構建應用。

現有的包支援許多用例——例如,進行網路請求(http)、導航/路由處理(go_router)、與裝置 API 整合(url_launcherbattery_plus),以及使用第三方平臺 SDK(如 Firebase)(FlutterFire)。

要編寫新包,請參閱 開發包。要新增資源、影像或字型(無論是儲存在檔案還是包中),請參閱 新增資源和影像

使用包

#

下一節將介紹如何使用現有的已釋出包。

搜尋包

#

包釋出到 pub.dev

pub.dev 上的 Flutter 登入頁顯示了與 Flutter 相容的頂級包(那些宣告的依賴項通常與 Flutter 相容的包),並支援搜尋所有已釋出的包。

pub.dev 上的 Flutter Favorites 頁面列出了被確認為您在編寫應用時應首先考慮使用的包。有關 Flutter Favorite 的含義的更多資訊,請參閱 Flutter Favorites 程式

您還可以透過篩選 AndroidiOSWebLinuxWindowsmacOS 或任何組合來瀏覽 pub.dev 上的包。

使用 flutter pub add 嚮應用新增包依賴

#

嚮應用新增 css_colors

  1. 從專案目錄中執行 pub add 命令

    • flutter pub add css_colors
  2. 匯入它

    • 在 Dart 程式碼中新增相應的 import 語句。
  3. 停止並重新啟動應用,如果需要

    • 如果包包含特定於平臺的程式碼(Android 的 Kotlin/Java,iOS 的 Swift/Objective-C),則必須將該程式碼構建到您的應用中。熱過載和熱重啟只能更新 Dart 程式碼,因此在使用包時,可能需要完全重啟應用以避免 MissingPluginException 等錯誤。

嚮應用新增包依賴

#

嚮應用新增 css_colors

  1. 依賴它

    • 開啟位於應用資料夾內的 pubspec.yaml 檔案,並在 dependencies 下新增 css_colors: ^1.0.0
  2. 安裝它

    • 從終端:執行 flutter pub get
    • 從 VS Code:點選 pubspec.yaml 頂部操作欄右側的 **Get Packages**,由下載圖示指示。
    • 從 Android Studio/IntelliJ:點選 pubspec.yaml 頂部操作欄中的 **Pub get**。
  3. 匯入它

    • 在 Dart 程式碼中新增相應的 import 語句。
  4. 停止並重新啟動應用,如果需要

    • 如果包包含特定於平臺的程式碼(Android 的 Kotlin/Java,iOS 的 Swift/Objective-C),則必須將該程式碼構建到您的應用中。熱過載和熱重啟只能更新 Dart 程式碼,因此在使用包時,可能需要完全重啟應用以避免 MissingPluginException 等錯誤。

使用 flutter pub remove 從應用移除包依賴

#

從應用移除 css_colors

  1. 從專案目錄中執行 pub remove 命令
    • flutter pub remove css_colors

pub.dev 上任何包頁面上的 安裝選項卡都是這些步驟的便捷參考。

有關完整示例,請參閱下面的 css_colors 示例

衝突解決

#

假設您想在應用中使用 some_packageanother_package,並且它們都依賴於 url_launcher,但版本不同。這會導致潛在的衝突。避免這種情況的最佳方法是,包作者在指定依賴項時使用 版本範圍而不是特定版本。

yaml
dependencies:
  url_launcher: ^5.4.0    # Good, any version >= 5.4.0 but < 6.0.0
  image_picker: '5.4.3'   # Not so good, only version 5.4.3 works.

如果 some_package 聲明瞭上述依賴項,而 another_package 聲明瞭一個相容的 url_launcher 依賴項,例如 '5.4.6'^5.5.0,pub 會自動解決問題。對 Gradle 模組和/或 CocoaPods 的特定平臺依賴項以類似方式解決。

即使 some_packageanother_package 聲明瞭不相容的 url_launcher 版本,它們實際上也可能以相容的方式使用 url_launcher。在這種情況下,可以透過嚮應用的 pubspec.yaml 檔案新增依賴項覆蓋宣告來解決衝突,強制使用特定版本。

例如,要強制使用 url_launcher 版本 5.4.0,請對應用的 pubspec.yaml 檔案進行以下更改

yaml
dependencies:
  some_package:
  another_package:
dependency_overrides:
  url_launcher: '5.4.0'

如果衝突的依賴項本身不是包,而是像 guava 這樣的 Android 特定庫,則必須將依賴項覆蓋宣告新增到 Gradle 構建邏輯中。

要強制使用 guava 版本 28.0,請對應用的 android/build.gradle 檔案進行以下更改

groovy
configurations.all {
    resolutionStrategy {
        force 'com.google.guava:guava:28.0-android'
    }
}

CocoaPods 目前不提供依賴項覆蓋功能。

開發新包

#

如果不存在滿足您特定用例的包,您可以 編寫自定義包

管理包依賴和版本

#

為最小化版本衝突的風險,請在 pubspec.yaml 檔案中指定版本範圍。

包版本

#

所有包都有一個版本號,在包的 pubspec.yaml 檔案中指定。包的當前版本顯示在其名稱旁邊(例如,請參閱 url_launcher 包),以及所有先前版本的列表(請參閱 url_launcher 版本)。

為確保在更新包時應用不會中斷,請使用以下格式之一指定版本範圍。

  • 範圍約束:指定最小和最大版本。

    yaml
    dependencies:
      url_launcher: '>=5.4.0 <6.0.0'
  • 使用 caret 語法 的範圍約束:指定作為包含性最小版本的版本。這涵蓋了從該版本到下一個主版本的所有版本。

    yaml
    dependencies:
      collection: '^5.4.0'

    此語法與第一個專案符號中注意到的語法相同。

要了解更多資訊,請檢視 包版本控制指南

更新包依賴

#

在首次新增包後執行 flutter pub get 時,Flutter 會將 pubspec.lock 鎖定檔案中找到的具體包版本儲存下來。這可確保當您或您的團隊中的其他開發人員執行 flutter pub get 時,您會獲得相同的版本。

要升級到包的新版本,例如使用該包中的新功能,請執行 flutter pub upgrade 以檢索 pubspec.yaml 中指定的版本約束允許的最高可用包版本。請注意,這與 flutter upgradeflutter update-packages 不同,後者都會更新 Flutter 本身。

對未釋出包的依賴

#

即使包未釋出到 pub.dev,也可以使用它們。對於私有包或尚未準備好釋出的包,還有其他依賴項選項可用

路徑依賴

Flutter 應用可以使用檔案系統 path: 依賴項來依賴包。路徑可以是相對的或絕對的。相對路徑相對於包含 pubspec.yaml 的目錄進行評估。例如,要依賴於位於應用旁邊的目錄中的包 packageA,請使用以下語法

yaml
  dependencies:
  packageA:
    path: ../packageA/
Git 依賴

您還可以依賴儲存在 Git 儲存庫中的包。如果包位於儲存庫的根目錄,請使用以下語法

yaml
  dependencies:
    packageA:
      git:
        url: https://github.com/flutter/packageA.git
使用 SSH 的 Git 依賴

如果儲存庫是私有的,並且您可以透過 SSH 連線到它,請使用儲存庫的 SSH URL 來依賴該包

yaml
  dependencies:
    packageA:
      git:
        url: git@github.com:flutter/packageA.git
Git 依賴於資料夾中的包

Pub 假定包位於 Git 儲存庫的根目錄下。如果不是這種情況,請使用 path 引數指定位置。例如

yaml
dependencies:
  packageA:
    git:
      url: https://github.com/flutter/packages.git
      path: packages/packageA

最後,使用 ref 引數將依賴項固定到特定的 git commit、分支或標籤。有關更多詳細資訊,請參閱 包依賴項

示例

#

以下示例將引導您完成使用包所需的步驟。

示例:使用 css_colors 包

#

css_colors 包定義了 CSS 顏色的常量,因此在 Flutter 框架期望 Color 型別的地方使用這些常量。

使用此包

  1. 建立一個名為 cssdemo 的新專案。

  2. 開啟 pubspec.yaml,並新增 css-colors 依賴項

    yaml
    dependencies:
      flutter:
        sdk: flutter
      css_colors: ^1.0.0
  3. 在終端中執行 flutter pub get,或在 VS Code 中點選 **Get Packages**。

  4. 開啟 lib/main.dart 並用以下內容替換其全部內容

    dart
    import 'package:css_colors/css_colors.dart';
    import 'package:flutter/material.dart';
    
    void main() {
      runApp(const MyApp());
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({super.key});
    
      @override
      Widget build(BuildContext context) {
        return const MaterialApp(home: DemoPage());
      }
    }
    
    class DemoPage extends StatelessWidget {
      const DemoPage({super.key});
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(body: Container(color: CSSColors.orange));
      }
    }
  1. 執行應用。應用背景現在應為橙色。

示例:使用 url_launcher 包啟動瀏覽器

#

url_launcher 外掛包能夠開啟移動平臺上的預設瀏覽器來顯示給定的 URL,並且支援 Android、iOS、Web、Windows、Linux 和 macOS。該包是一個特殊的 Dart 包,稱為外掛包(或外掛),它包含特定於平臺的程式碼。

使用此外掛

  1. 建立一個名為 launchdemo 的新專案。

  2. 開啟 pubspec.yaml,並新增 url_launcher 依賴項

    yaml
    dependencies:
      flutter:
        sdk: flutter
      url_launcher: ^5.4.0
  3. 在終端中執行 flutter pub get,或在 VS Code 中點選 **Get Packages get**。

  4. 開啟 lib/main.dart 並用以下內容替換其全部內容

    dart
    import 'package:flutter/material.dart';
    import 'package:path/path.dart' as p;
    import 'package:url_launcher/url_launcher.dart';
    
    void main() {
      runApp(const MyApp());
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({super.key});
    
      @override
      Widget build(BuildContext context) {
        return const MaterialApp(home: DemoPage());
      }
    }
    
    class DemoPage extends StatelessWidget {
      const DemoPage({super.key});
    
      void launchURL() {
        launchUrl(p.toUri('https://flutter.club.tw'));
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: ElevatedButton(
              onPressed: launchURL,
              child: const Text('Show Flutter homepage'),
            ),
          ),
        );
      }
    }
  5. 執行應用(如果新增外掛之前應用已在執行,則停止並重新啟動它)。點選 **Show Flutter homepage**。您應該會在裝置上看到預設瀏覽器開啟,顯示 flutter.dev 的主頁。