【Flutter】パッケージを追加/インストール/インポートする方法

最終更新日

Flutter_package

Flutterにはパッケージと呼ばれる より便利にアプリ制作を行える機能をまとめてくれているものがあります。

この記事では、外部パッケージの導入 「pubspec.yamlファイル」の扱い 導入したパッケージで使用できるWidgetのドキュメントの場所 を解説していきます。

パッケージとは

Flutterで使用できる便利なWidget。パッケージを利用することで標準以外のWidgetが使用できます。

パッケージはpub.devというサイトで随時高維新&公開されています。

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

https://docs.flutter.dev/development/packages-and-plugins/using-packages

自分のプロジェクトに合うパッケージがあれば、わざわざ作らなくてもインストール/インポートしてしまえばより効率よく作業できるようになるのでとても助かります。

Flutterを立ち上げた状態ですでに

Flutterではデフォルトでmaterial libraryのパッケージがインポートされています。

こちらは、グーグルより提供されているマテリアルデザインのWidgetを利用可能にするパッケージです。

pubspec.yamlファイル

pubspec.yamlファイル とは、プロジェクトの設定およびパッケージマネージャーの役割を担ってくれている

ファイルです。

この pubspec.yamlファイル に設定や外部パッケージを追加してあげることにより使用が可能になります。

ただ制約や、書き方がある少し癖のあるファイルなので注意が必要です。

実際にインストール/インポートしてみよう

実際にインストール/インポートするには以下の二通りがあります。

  • yamlファイルでpull get
  • ターミナルでコマンド入力

です。とりあえず、pull getから説明します。

yamlファイルでpull get

今回は試しにインストール/インポートするパケージとして「httpパッケージ」を使用してみました。現在(2022//7 0.13.4ver)が最新です。

デフォルトでは表示されているタブがreadmeになっているのでinstallingにしてください。

インストール/インポートは最新のものの利用を推奨します。

httpパッケージは使用頻度が高く、とても便利なパッケージで よくサンプルや実践でも使用されます。

  1. pubspec.yamlファイルを開く
  2. installingからhttp: ^0.13.4をコピーする
  3. dependencies:の下の行に張り付ける
  4. 右上のPub Getを押す
pubspec.yaml

以下の画像のようにエラーが表示されなければ成功です。

エラーが出た例

数字が0以上を表示する。

No file or variants found for asset:~ エラー

が出た場合は別途解説記事を出しております。

是非ご利用ください。

Mapping values are not allowed here. Did you miss a colon earlier?

はこちらで解説しておいります。

次にmain.dartでも使用できるようにimportしてあげます。

  1. main.dartを開く
  2. 一番上にimport ‘package:http/http.dart’;と記載(ここはパッケージごとに変わってきます)
以下のようにimportに赤色で波線がでれば何らかのエラーがあるようです。

他にエラーが起きてしまった場合の対処法・早見表はこちらのページにまとめておきます。

ぜひご利用ください。

ターミナルでコマンドを入力

今回は試しにインストール/インポートするパケージとして「httpパッケージ」を使用してみました。

ただ、yamlファイルとは違いバージョンは選択できずデフォルトで最新のものになります

やり方は以下の通りです。

Android Stadio

  1. 下部のメニュー欄からTarminalを選択
  2. なにもいじらずに下記のコードを入力しenter
flutter pub add http

パッケージのドキュメントを見る

パッケージのドキュメントの中には内容Widgetの利用方法などが書かれてあるので、是非見ておくことをおすすめします。

Flutter_package
  1. パッケージのホーム画面を表示
  2. 右中腹あたりにあるDocumentationのAPI referenceというリンクをクリック

リファレンス(使い方)が詳しく載っているのでご自身が使いたいものを探してみてください。

その他の方法

以下のようにバージョンに「+」をすることができます。

sqflite: ^1.3.2+1

any

sqflite: any

fem