跳至主要內容
目錄

使用套件

目錄

Flutter 支援使用由其他開發人員貢獻給 Flutter 和 Dart 生態系統的共享套件。這允許快速建立應用程式，而無需從頭開始開發所有內容。

現有的套件啟用了許多使用案例—例如，發出網路請求 (http)、導航/路由處理 (go_router)、與裝置 API 整合 (url_launcher 和 battery_plus) 和使用第三方平台 SDK（如 Firebase (FlutterFire)）。

若要撰寫新的套件，請參閱開發套件。若要新增資源、圖片或字體，無論是儲存在檔案中還是套件中，請參閱新增資源和圖片。

使用套件

#

以下章節描述如何使用現有的已發佈套件。

搜尋套件

#

套件發佈到 pub.dev。

pub.dev 上的Flutter 登陸頁面顯示與 Flutter 相容的頂級套件（那些宣告通常與 Flutter 相容的依賴性的套件），並支援在所有已發佈的套件中搜尋。

pub.dev 上的Flutter 最愛頁面列出了已識別為您在撰寫應用程式時應首先考慮使用的套件的外掛程式和套件。有關成為 Flutter 最愛的更多資訊，請參閱Flutter 最愛計畫。

您也可以透過篩選 Android、iOS、Web、Linux、Windows、macOS 或任何組合來瀏覽 pub.dev 上的套件。

將套件依賴性新增至應用程式

#

將套件 css_colors 新增至應用程式

  1. 依賴它

    • 開啟位於應用程式資料夾內的 pubspec.yaml 檔案，並在 dependencies 下新增 css_colors:。

  2. 安裝它

    • 從終端機：執行 flutter pub get。
      或
    • 從 VS Code：按一下位於 pubspec.yaml 頂端動作列右側的取得套件，以 [下載] 圖示表示。
    • 從 Android Studio/IntelliJ：按一下位於 pubspec.yaml 頂端動作列中的Pub get。

  3. 匯入它

    • 在 Dart 程式碼中新增對應的 import 陳述式。

  4. 停止並重新啟動應用程式（如有必要）

    • 如果套件帶來了平台特定的程式碼（Android 的 Kotlin/Java，iOS 的 Swift/Objective-C），則必須將該程式碼建置到您的應用程式中。熱重載和熱重新啟動只會更新 Dart 程式碼，因此可能需要完整重新啟動應用程式，以避免在使用套件時發生 MissingPluginException 之類的錯誤。

使用 flutter pub add 將套件依賴性新增至應用程式

#

將套件 css_colors 新增至應用程式

  1. 在專案目錄內發出命令

    • flutter pub add css_colors

  2. 匯入它

    • 在 Dart 程式碼中新增對應的 import 陳述式。

  3. 停止並重新啟動應用程式（如有必要）

    • 如果套件帶來了平台特定的程式碼（Android 的 Kotlin/Java，iOS 的 Swift/Objective-C），則必須將該程式碼建置到您的應用程式中。熱重載和熱重新啟動只會更新 Dart 程式碼，因此可能需要完整重新啟動應用程式，以避免在使用套件時發生 MissingPluginException 之類的錯誤。

使用 flutter pub remove 從應用程式中移除套件依賴性

#

從應用程式中移除套件 css_colors

  1. 在專案目錄內發出命令
    • flutter pub remove css_colors

在 pub.dev 上的任何套件頁面上可用的安裝標籤是這些步驟的方便參考。

有關完整範例，請參閱下方的css_colors 範例。

衝突解決

#

假設您想在應用程式中使用 some_package 和 another_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_package 和 another_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'

  • 使用 插入符號語法 的範圍限制：指定作為包含最小版本的版本。這涵蓋從該版本到下一個主要版本的所有版本。

    yaml
    dependencies:
  collection: '^5.4.0'

    此語法與第一個項目符號中記錄的語法相同。

若要了解更多資訊，請查看套件版本控制指南。

更新套件依賴性

#

在新增套件後第一次執行 flutter pub get 時，Flutter 會將在 pubspec.lock 鎖定檔中找到的具體套件版本儲存。這可確保如果您或您團隊中的其他開發人員執行 flutter pub get，您會再次取得相同的版本。

若要升級到套件的新版本，例如使用該套件中的新功能，請執行 flutter pub upgrade 以擷取 pubspec.yaml 中指定的版本限制所允許的套件最高可用版本。請注意，這與 flutter upgrade 或 flutter 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: [email protected]: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、網頁、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。

  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.dev'));
  }

  @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 的首頁。

除非另有說明，否則本網站上的文件反映的是 Flutter 的最新穩定版本。頁面上次更新於 2024-07-06。 檢視原始碼 或 回報問題。