概要
Flutter(Dart)で画像のクリッピングするコードが書けますか?
Flutter(Dart)でhttp通信するコードが書けますか?
大丈夫、書けなくて良いんです。
Flutterでは、色んな人が使いそうな便利クラスをあらかじめ作って公開してくれています。
その便利クラスをまとめてパッケージと呼びます。
この記事では、
・パッケージのインストール方法
・インストールしたパッケージの使用方法
を解説したいと思います。
パッケージのインストールの仕方 (楽チンver.)


こちらで解説した、Pubspec assistを使うと超楽です。
これ以降は見ないでOKです笑
パッケージのインストールの仕方
こちらのサイトにアクセスします。
今回は例として、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としています。
おわかりいただけたでしょうか?
最後に
このサイトには、本当にたくさんの種類のパッケージがあり、こんな事がこんな簡単に出来てしまうの?
なんて心踊ってしまう様なパッケージもたくさんあります。
いくつかパッケージのご紹介
image_picker


ImagePicker().pickImage(source: ImageSource.camera);
これだけでカメラが起動出来る。
provider


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






こちらで3本立てで詳しく解説しています。
よろしければご覧ください。
Flutterで本格的にアプリを開発するのであれば必須パッケージの一つだと思います。
誰かのお役に立てば。Twitterフォローお願いします
「次回以降も記事を読んでみたい!」「この辺分からなかったから質問したい!」
そんな時は、是非Twitter (@daiki1003)やInstagram (@ashdik_flutter)のフォローお願いします♪
Twitterコミュニティ参加お願いします
Twitterコミュニティ「Flutter lovers」を開設しました!参加お待ちしております😁
☕️ Buy me a coffee
また、記事がとても役に立ったと思う人はコーヒーを奢っていただけると非常に嬉しいです!
コメント