【超簡単!】Flutterのパッケージのインストール方法を説明するよ!

Dart

概要


Flutter(Dart)で画像のクリッピングするコードが書けますか?
Flutter(Dart)でhttp通信するコードが書けますか?

大丈夫、書けなくて良いんです。

Flutterでは、色んな人が使いそうな便利クラスをあらかじめ作って公開してくれています。
その便利クラスをまとめてパッケージと呼びます。

この記事では、

・パッケージのインストール方法
・インストールしたパッケージの使用方法

を解説したいと思います。

パッケージのインストールの仕方 (楽チンver.)

【Flutter】3秒でパッケージ追加完了!?VSCode使いに絶対に入れて欲しい拡張機能「Pubspec Assist」を紹介するよ!
Flutterでの開発には、世界中のデベロッパが作ってくれたパッケージのインストールが欠かせません。 あなたはどの様にパッケージを追加していますか? 実は、以前パッケージのインストール記事を書きました。 pub...

こちらで解説した、Pubspec assistを使うと超楽です。
これ以降は見ないでOKです笑

パッケージのインストールの仕方

The official repository for Dart and Flutter packages.
Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter and general Dart programs.

こちらのサイトにアクセスします。
今回は例として、httpパッケージをインストールしてみましょう。

検索窓にhttpと入力して検索

この様な画面になります。

1: 各パッケージの説明画面です。
パッケージの概要、バージョン、開発組織名、対応言語などが書かれています。

2: 検索結果のソート順を変更する事が出来ます。
人気順や登録順などに変更できます。

3: パッケージのスコアです。
安定性や人気などを元に数値化されたものなので、
これを基準に選ぶのが良いと思います。

今回インストールするのは一番上のhttpパッケージなのでこちらをクリックします。

パッケージ詳細画面の説明

この様な画面になると思います。

ReadMeタブ

このパッケージをインストールするために
大切な手順や注意書きが載っているので読みましょう。
今回のパッケージでは使用方法だけ載っていますね。
(2020/06/02 現在)

ChangeLogタブ

各バージョンごとの変更履歴が表示されます。

Exampleタブ

このパッケージを使用するためのサンプルコードが載っています。

Installingタブ

このパッケージをインストールするための手順が載っています。
が、使用するのは一番上の

dependencied:
  http: ^[version_number]

の部分がほとんどだと思います。

Versionsタブ

各バージョンの更新日時やアーカイブのダウンロードなんかが出来ます。

今回は「Installing」タブをクリックしてください。

実際にパッケージをインストールしてみよう

ここに書かれている

http: ^0.12.1

の部分をコピーしてください。

pubspec.yamlを開いてペースト

プロジェクトフォルダにある、pubspec.yamlを開いてください。

dependencies:
  flutter:
    sdk: flutter

と言う記述があると思うのでその下に

dependencies:
  flutter:
    sdk: flutter
  http: ^0.12.1

の様に貼り付けてください。

この際の注意点として、

タテのインデントをしっかり揃えてください!

つまり、flutterのfとhttpのhの位置を揃えてください、と言う事です。
このインデントで構造などを解釈しているのでとても大切な部分になります。

これで、保存をするだけ。

勝手に必要なファイルをダウンロードしてくれます。

再起動が必要な場合もある

Flutterでは、基本的には保存をするだけでアプリに変更を適用してくれるHot Reloadの仕組みがあります。

が、追加したパッケージがデバイスに依存する機能(カメラとか)を使う場合は
再実行する必要があります。

エラーが出て、うまくいかない場合は再実行すると解決するかもしれません。

実際にコードで使ってみよう

使い方はとっても簡単です。

import 'package:http/http.dart' as http;

void getBookData() async {

  var url = 'https://www.googleapis.com/books/v1/volumes?q=factfulness';

  final response = await http.get(url);
  ...

今回インストールして来たパッケージをimportすれば終わり!
こうすれば使える様になります。

補足

as httpって何?

って思った方もいるかもしれません。
このhttpの部分はhttp.getのhttpの部分に対応しています。

この記述がなくてもこのパッケージは以下の様に使えます。

import 'package:http/http.dart';

void getBookData() async {

  var url = 'https://www.googleapis.com/books/v1/volumes?q=factfulness';

  final response = await get(url);
  ...

が、getってメソッドがあまりにも一般的な名前すぎて分からないですよね?
なので、httpパッケージのgetメソッドですよ、というのを明示するために as httpとしています。

おわかりいただけたでしょうか?

最後に

The official repository for Dart and Flutter packages.
Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter and general Dart programs.

このサイトには、本当にたくさんの種類のパッケージがあり、こんな事がこんな簡単に出来てしまうの?

なんて心踊ってしまう様なパッケージもたくさんあります。

いくつかパッケージのご紹介

image_picker

image_picker | Flutter package
Flutter plugin for selecting images from the Android and iOS image library, and taking new pictures with the camera.
ImagePicker().pickImage(source: ImageSource.camera);

これだけでカメラが起動出来る。

provider

provider | Flutter package
A wrapper around InheritedWidget to make them easier to use and more reusable.

うまく使えば、ない時と比べてWidgetの構造をとても綺麗にしてくれる
パッケージ。

【Flutter】Providerについてサンプル付きで解説してみた
追記情報 lintに対応した書式に変更しました。 (2020.09.29) 概要 「FlutterのProvider?」 「ChangeNotifier?Consumer?何それ美味しいの?」 あなたは、こ...
【Flutter】ProviderにおけるConsumerをサンプル付きで解説してみたよ
追記情報 lintに対応した形式に修正しました。 2020.09.29 概要 前回の記事で、Providerに関して詳しく説明しました。 今回の記事はこちらの記事での知識を前提に書かれているので、 Provider...
【Flutter】ProviderにおけるConsumerについて解説してみたよ vol.2
追記情報 lintに対応した形式に修正しました。 2020.09.29 概要 「Consumerってbuilderだけコンストラクタの引数に渡せば良いんじゃないの?」 「第三引数のWidgetって何?」 「Cons...

こちらで3本立てで詳しく解説しています。
よろしければご覧ください。

Flutterで本格的にアプリを開発するのであれば必須パッケージの一つだと思います。

誰かのお役に立てば。

Twitterフォローお願いします

「次回以降も記事を読んでみたい!」
「この辺分からなかったから質問したい!」

そんな時は、是非Twitter (@daiki1003)Instagram (@ashdik_flutter)のフォローお願いします♪

Twitterコミュニティ参加お願いします

Twitterコミュニティ「Flutter lovers」を開設しました!
参加お待ちしております😁

☕️ Buy me a coffee

また、記事がとても役に立ったと思う人は
コーヒーを奢っていただけると非常に嬉しいです!

コメント

タイトルとURLをコピーしました