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

Dart

概要


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

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

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

この記事では、

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

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

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

Dart packages
Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter, AngularDart, 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としています。

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

最後に

Dart packages
Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter, AngularDart, 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についてサンプル付きで解説してみた
Flutter、Providerでつまづいてませんか? この記事ではFlutterにおけるProviderに関してsample,example付きで解説しています。 是非ご覧いただけると嬉しいです。
【Flutter】ProviderにおけるConsumerをサンプル付きで解説してみたよ
Providerについて勉強してるけど、Consumerって何?ってなってないですか? この記事では、サンプルを使ってConsumerの使い方や特徴を解説しています。 是非ご覧いただけると嬉しいです。
【Flutter】ProviderにおけるConsumerについて解説してみたよ vol.2
ProviderのConsumerについて良く分からない? この記事では、Providerの基礎から始まり、Consumerについても詳しく解説しています。 是非ご覧ください♪

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

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

誰かのお役に立てば。

Twitterフォローお願いします

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

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

コメント

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