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://flutterdart.cn'));
      }
    
      @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 的主页。