【Flutter】外部パッケージの導入方法とドキュメントの使い方

【Flutter】外部パッケージの導入方法とドキュメントの使い方

「外部パッケージの導入方法が分からない」

「導入した外部パッケージのWidgetの使い方がわからない」

「外部パッケージのlibraryドキュメントの開き方がわからない」

このような疑問にお答えします。

結論

Flutterではデフォルトでインポートされているmaterial libraryのパッケージ以外にも、豊富なパッケージが用意されていて様々なWidgetを使用できます。

外部パッケージを導入することで便利な機能を簡単に自分の開発しているFlutterアプリに実装できます。ただ、Flutterを学び始めた人にとって「pubspec.yamlファイル」の扱いや、導入したパッケージで使用できるWidgetのドキュメントがどこにあるかわからない人もいると思うので、外部パッケージの検索方法からの一連の流れを紹介していきます。

ティファ

それでは、パッケージの検索方法から外部パッケージのドキュメントの見方までの一連の流れを紹介していくよ!

目次

そもそもパッケージとは?

material library

パッケージにはFlutterで使用できる便利なWidgetが詰まっており、パッケージをFlutterで開発しているプロジェクトに導入することで様々なWidgetが使用できます。

Flutterには様々なパッケージが公開されており、開発目的に応じたパッケージをプロジェクトにインポートすれば、わざわざ1からWidgetを作らなくても完成されたWidgetを使用できるので開発時間を大幅にカットできます。

ティファ

Flutterではデフォルトでmaterial libraryのパッケージがインポートされているよ!

外部パッケージの導入方法

本記事では分かりやすいよう「animated_text_kit」というパッケージを使いながら、外部パッケージの導入方法を紹介していきます。

STEP
使用したい外部パッケージを探す
外部パッケージ導入1

>> pub.dev

上記のリンクを開いて使用したいパッケージを探します。

ティファ

今回は「animated_text_kit」を導入していきます。

STEP
pubspec.yamlファイルに外部パッケージを導入する:その1
外部パッケージ導入2

導入したパッケージ画面を開いたら「Installing①」をクリックして「Run this command:」の下にあるコード②をコピーします。

STEP
pubspec.yamlファイルに外部パッケージを導入する:その2
外部パッケージ導入3

コピーしたコードをFlutterアプリを開発しているIDEのターミナルでペーストして実行すると、pubspec.yamlファイルに自動でパッケージが追加されます。

STEP
外部パッケージを「main.dart」に導入する:その1
外部パッケージ導入4

pubspec.yamlファイルに外部パッケージが追加されたら、再度外部パッケージのインストール画面①に戻り、外部パッケージの導入コード②をコピーします。

STEP
外部パッケージを「main.dart」に導入する:その2
外部パッケージ導入5

最後に「main.dart」にコピーしたコードをペーストすれば外部パッケージの導入は完了です。

外部パッケージ「animated_text_kit」を導入したサンプルコード

import 'package:flutter/material.dart';
import 'package:animated_text_kit/animated_text_kit.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: AnimatedTextKit(
            animatedTexts: [
              TypewriterAnimatedText(
                'Hello World',
                textStyle: TextStyle(
                  fontSize: 30.0,
                  color: Colors.lightBlueAccent,
                ),
              ),
              TypewriterAnimatedText(
                'Flutter入門アカデミー',
                textStyle: TextStyle(
                  fontSize: 30.0,
                  color: Colors.lightBlueAccent,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
ティファ

外部パッケージの導入の仕方がわかったところで、外部パッケージに含まれているlibraryドキュメントの開き方を紹介していくよ!

外部パッケージのドキュメントの開き方

STEP
外部パッケージのドキュメントの開き方1

外部パッケージトップ画面を開いたら、左のサイドバーにある「API reference」をクリックします。

STEP
外部パッケージのドキュメントの開き方2

次に「LIBRARIES」からパッケージに含まれているlibraryのドキュメンを選択できます。

ティファ

今回は「animated_text_kit」のlibraryのドキュメントを開いてみるよ!

STEP
外部パッケージのドキュメントの開き方3

後はドキュメントで外部パッケージに含まれるWidgetの使い方を調べるだけです。

よかったらシェアしてね!
目次
閉じる