90
64

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

Flutterはじめました。

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

パッケージを探す

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

https://pub.dev/flutter
スクリーンショット 2019-05-31 7.56.56.png

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

パッケージの評価システムについて

導入手順の前に、簡単にパッケージの評価システムについて紹介します。
スクリーンショット 2019-05-31 7.57.51.png

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

スクリーンショット 2019-05-31 7.59.20.png

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

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

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

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

導入手順

では実際の導入手順です。
パッケージ詳細ページのInstallingタブの記載にしたがって導入していきます。
スクリーンショット 2019-05-31 8.13.03.png

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

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

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ボタンをポチッと押すだけでインストールが完了します。
スクリーンショット 2019-05-31 8.25.24.png

3. インポート

Font Awesomeを使うdartファイルにimport文を追加します。

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

実際にパッケージを使うコードはパッケージのREADME.mdやExampleを確認すると良いです。
スクリーンショット 2019-05-31 8.47.12.png

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,
        ),
      ),
    );
  }
}

スクリーンショット 2019-05-31 8.48.34.png

できました:thumbsup:

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

90
64
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
90
64

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?