パッケージの使用

Flutter は、他の開発者が提供した共有パッケージの使用をサポートします Flutter と Dart のエコシステムに。これにより、迅速な構築が可能になります すべてを最初から開発する必要がなく、アプリを作成できます。

既存のパッケージにより、多くのユースケースが可能になります。たとえば、 ネットワークリクエストを行う(http）、 ナビゲーション/ルート処理 (go_router）、 デバイスAPIとの統合 (url_launcherとbattery_plus）、 Firebase などのサードパーティ プラットフォーム SDK を使用する ( flutterファイア）。

新しいパッケージを作成するには、次を参照してください。パッケージの開発。 アセット、画像、またはフォントを追加するには、 ファイルまたはパッケージに保存されているかどうか、 見るアセットと画像の追加。

パッケージの使用

次のセクションでは、使用方法について説明します。 既存の公開済みパッケージ。

パッケージの検索

パッケージの公開先パブ.dev。

のFlutter ランディング ページpub.dev のディスプレイ上 Flutterと互換性のあるトップパッケージ (一般に Flutter と互換性のある依存関係を宣言するもの)、 公開されているすべてのパッケージ間の検索をサポートします。

の flutterのお気に入りpub.dev リストのページ として識別されたプラグインとパッケージ 作成時に最初に使用を検討する必要があるパッケージ あなたのアプリ。意味の詳細については、 Flutter のお気に入りになるには、Flutter お気に入りプログラム。

フィルタリングして pub.dev 上のパッケージを参照することもできます の上アンドロイド、iOS、ウェブ、Linux、ウィンドウズ、マックOS、 またはそれらの任意の組み合わせ。

パッケージの依存関係をアプリに追加する

パッケージを追加するには、css_colors、アプリに:

1. それに依存して
   • を開きますpubspec.yamlアプリフォルダー内にあるファイル、 そして追加しますcss_colors:下dependencies。
2. インストールしてください
   • ターミナルから: 実行flutter pub get。
     また
   • VS コードから: をクリックします。パッケージを取得するアクションの右側にあります 上部のリボンpubspec.yamlダウンロードアイコンで示されます。
   • Android Studio/IntelliJ から: をクリックします。パブゲットアクションの中で 上部のリボンpubspec.yaml。
3. インポートしてください
   • 対応するものを追加importDart コード内のステートメント。
4. 必要に応じてアプリを停止して再起動します
   • パッケージにプラットフォーム固有のコードが含まれる場合 (Android の場合は Kotlin/Java、iOS の場合は Swift/Objective-C)、 そのコードはアプリに組み込む必要があります。 ホットリロードとホットリスタートはDartコードのみを更新します。 そのため、これを回避するにはアプリを完全に再起動する必要がある場合があります。 のようなエラーMissingPluginExceptionパッケージを使用する場合。

を使用してアプリにパッケージの依存関係を追加するflutter pub add

パッケージを追加するには、css_colors、アプリに:

1. プロジェクトディレクトリ内でコマンドを発行します。
   • flutter pub add css_colors
2. インポートしてください
   • 対応するものを追加importDart コード内のステートメント。
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、 ただしバージョンが異なります。 それは潜在的な紛争を引き起こします。 これを回避する最善の方法は、パッケージ作成者が次の方法を使用することです。バージョン範囲特定のバージョンではなく、 依存関係を指定します。

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モジュールおよび/またはココアポッドも同様の方法で解決されます。

もしそれでもsome_packageとanother_package～の互換性のないバージョンを宣言するurl_launcher、 彼らは実際に使うかもしれないurl_launcherの 互換性のある方法。この状況では、 競合は追加することで解決できます アプリの依存関係オーバーライド宣言pubspec.yamlファイルを削除し、特定のバージョンの使用を強制します。

たとえば、次の使用を強制するにはurl_launcherバージョン5.4.0、 アプリに次の変更を加えますpubspec.yamlファイル：

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

競合する依存関係自体がパッケージではない場合、 ただし、次のような Android 固有のライブラリguava、 依存関係オーバーライド宣言を追加する必要があります 代わりに Gradle ビルド ロジックを使用します。

の使用を強制するにはguavaバージョン28.0、次のようにします アプリの変更android/build.gradleファイル：

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

CocoaPods は現在依存関係を提供していません オーバーライド機能。

新しいパッケージの開発

特定のユースケースに対応するパッケージが存在しない場合は、 あなたはできるカスタムパッケージを書く。

パッケージの依存関係とバージョンの管理

バージョンの衝突のリスクを最小限に抑えるには、 でバージョン範囲を指定しますpubspec.yamlファイル。

パッケージのバージョン

すべてのパッケージにはバージョン番号があり、 パッケージのpubspec.yamlファイル。パッケージの現在のバージョン 名前の横に が表示されます (例: を参照してくださいurl_launcherパッケージ)、として 以前のすべてのバージョンのリストも （見るurl_launcherバージョン）。

アプリが壊れないようにするには、 パッケージが更新され、 次のいずれかを使用してバージョン範囲を指定します。 次の形式:

• 範囲制約: 最小バージョンと最大バージョンを指定します。例えば：

  dependencies:
    url_launcher: '>=5.4.0 <6.0.0'
  

• 範囲制約キャレット構文通常の範囲制約と似ています。

  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、アプリの隣のディレクトリにあり、 次の構文を使用します。

  dependencies:
  packageA:
    path: ../packageA/
  

Git の依存関係

Git リポジトリに保存されているパッケージに依存することもできます。 パッケージがリポジトリのルートにある場合、 次の構文を使用します。

  dependencies:
    packageA:
      git:
        url: https://github.com/flutter/packageA.git

SSHを使用したGit依存関係

リポジトリがプライベートであり、SSH を使用して接続できる場合は、 リポジトリの SSH URL を使用してパッケージに依存します。

  dependencies:
    packageA:
      git:
        url: git@github.com:flutter/packageA.git

フォルダー内のパッケージに対する Git の依存関係

Pub はパッケージが次の場所にあると想定します。 Git リポジトリのルート。そうでない場合 この場合は、で場所を指定しますpath口論。 例えば：

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

最後に、ref依存関係を固定するための引数 特定の git コミット、ブランチ、またはタグ。詳細については、を参照してください。パッケージの依存関係。

例

次の例では、必要な手順を順に説明します。 パッケージを使用します。

例: css_colors パッケージの使用

のcss_colorsパッケージ CSS カラーのカラー定数を定義しているため、その定数を使用します Flutter フレームワークが期待する場所ならどこでも、Colorタイプ。

このパッケージを使用するには:

1. という名前の新しいプロジェクトを作成します。cssdemo。

2. 開けるpubspec.yamlを追加し、css-colors依存：

   dependencies:
     flutter:
       sdk: flutter
     css_colors: ^1.0.0
   

3. 走るflutter pub getターミナルで、 またはクリックしてくださいパッケージを取得するVSコードで。

4. 開けるlib/main.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。 このパッケージは、プラグインパッケージ（またプラグイン）、 これにはプラットフォーム固有のコードが含まれます。

このプラグインを使用するには:

1. という名前の新しいプロジェクトを作成します。launchdemo。

2. 開けるpubspec.yamlを追加し、url_launcher依存：

   dependencies:
     flutter:
       sdk: flutter
     url_launcher: ^5.4.0
   

3. 走るflutter pub getターミナルで、 またはクリックしてくださいパッケージを取得するVSコードで。

4. 開けるlib/main.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});
   
      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. アプリを実行します（すでに実行中の場合は停止して再起動します） プラグインを追加する前に)。クリックFlutter ホームページを表示する。 デバイス上でデフォルトのブラウザが開いていることが確認できます。 flutter.dev のホームページを表示しています。