【Flutter】パッケージ導入手順

Flutterはじめました。

ネイティブなiOS開発でいうところのCocoaPodsやCarthageのように、簡単に外部のライブラリを導入して様々な機能を追加できます。
ここではその導入手順についてまとめます。

# パッケージを探す
以下のサイトからパッケージを探します。

https://pub.dev/flutter
<img width="1210" alt="スクリーンショット 2019-05-31 7.56.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145728/27a5e734-8b84-8449-5865-147b937eddb2.png">

今回は例として[font_awesome_flutter](https://pub.dev/packages/font_awesome_flutter)という、アプリ内に様々なアイコンを追加できるパッケージを導入します。
検索窓に `awesome` などと入れると検索結果が表示されます。

## パッケージの評価システムについて
導入手順の前に、簡単にパッケージの評価システムについて紹介します。
<img width="1210" alt="スクリーンショット 2019-05-31 7.57.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145728/766038d4-c616-26fe-7369-de78a705ec2c.png">

検索結果の右の数字に注目して欲しいのですが、これはそのパッケージの評価スコアになっています。
パッケージの詳細ページを見ると評価内容を見ることができます。

<img width="1210" alt="スクリーンショット 2019-05-31 7.59.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145728/3b9d2575-7a5e-9db9-6930-2a6151ec6e38.png">



以下の評価軸を元に、加重平均で総合スコアが算出されています。
スコアの詳細をざっくり説明するとこんな感じです。


|評価軸|内容|
|:-----------------|------------------|
| Popularity | 人気度：パッケージどれぐらい使われているか | 
| Health | 健全性：パッケージ内のErrorやWarningの少なさを評価 |
| Maintenance | メンテナンス：パッケージの保守されっぷり、READMEなどが整理されているかを評価 |
| **Overall score** | 総合スコア：Popularity 50%, Health 30%, Maintenance 20%の加重平均で算出|

評価システムの詳細は以下から確認できます。
https://pub.dev/help#scoring

パッケージ選定の際にめちゃくちゃ参考になりそうです。


# 導入手順
では実際の導入手順です。
パッケージ詳細ページのInstallingタブの記載にしたがって導入していきます。
<img width="1210" alt="スクリーンショット 2019-05-31 8.13.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145728/74de4585-4d8a-8f70-e088-7a7ebec569c3.png">


## 1. pubspec.yamlファイルの編集

pubspec.yamlの`dependencies:`セクションに1行追加します。

``` yaml:pubspec.yaml
dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  font_awesome_flutter: ^8.4.0  # 追加
  
```


## 2. インストール
インストールではコマンドを使った方法も紹介されていますが、Android Studioを使っている場合はPackage getボタンをポチッと押すだけでインストールが完了します。
<img width="1335" alt="スクリーンショット 2019-05-31 8.25.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145728/df5c1aa2-5579-ee38-aeab-e714f39299ef.png">



## 3. インポート 
Font Awesomeを使うdartファイルにimport文を追加します。

``` dart:main.dart
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
```

実際にパッケージを使うコードはパッケージのREADME.mdやExampleを確認すると良いです。
<img width="1210" alt="スクリーンショット 2019-05-31 8.47.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145728/6d08a66f-ed02-b676-d9bb-2081f36eaa76.png">


``` dart:main.dart
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Icon(
          FontAwesomeIcons.thumbsUp,
          size: 100.0,
        ),
      ),
    );
  }
}
```


<img width="404" alt="スクリーンショット 2019-05-31 8.48.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145728/2b18cab5-eeee-8467-cfcf-1ccca43a7e18.png">


できました:thumbsup:

記事執筆時点（2019年5月）でも様々なパッケージが積極的に開発されています。
パッケージ開発者の皆様に感謝しつつ、良いFlutterライフを送りましょう:thumbsup: