【Flutter】外部パッケージのインストール方法/使用方法

外部パッケージ
スポンサーリンク

パッケージとは?

material-library
引用元:Flutter

Flutterでは、マテリアルデザインが提供しているmaterial libraryのWidget以外にも便利なWidgetがたくさんあります。ただmaterial library以外のWidgetを使用するには、外部のパッケージを先にインストールする必要があります。

パッケージのインストール手順

animated_text_kit」と言う外部パッケージを使いながらインストール方法を解説していきます。

使用したいパッケージを探す

まずはpub.devで使用したいパッケージを探します。

pubspec.yamlを編集する

Installing1

使用したいパッケージのページを開いたら、動画のように「Installing」をクリックし、「dependencies:」の下の一行をコピーします。(バージョンは常に最新のものにアップデートされていくので、画像のバージョンと異なっていても問題ありません)

open yamlファイル

次にpubspec.yamlファイルを開きます。

pubspec.yamlファイルは初期状態でたくさんのコメントが記入されていて少し見にくいです。コメントが邪魔と思う方はコメントを消してしまっても構いません。

ただし、消す際は間違ってコメントでないコードを消したり、空白を変更しないようにしましょう。pubspec.yamlファイルでは少しでもミスがあるとプログラムが動作しなくなります。

コメントを消去したら、先ほどコピーしたコードを「dependencies:」の子要素(チャイルド)としてペーストします。(空白は親要素に対して2スペース分です。)

edit yamlファイル

次に「pub get」をクリックし、上のようなメッセージが表示されたらpubspec.yamlファイルの編集は終了です。エラーが出た場合は今までの過程に間違いがないか再度確認してください。

パッケージをインストールする

Installing2

再度パッケージのページを開き「Installing」の「Import it」と書かれている項目のコードをコピーし、パッケージを使用したいdartファイルにペーストすればパッケージのインストールは完了です。

completed installing

パッケージの使用方法

上の動画は「animated_text_kit」パッケージの「Typewriter」を使ったコードを実行したものです。

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: TypewriterAnimatedTextKit(
            text: ['Hello World'],
            textStyle: TextStyle(
                fontSize: 30.0,
                fontFamily: "Agne",
                color: Colors.lightBlueAccent),
          ),
        ),
      ),
    );
  }
}

パッケージの詳細を調べる

パッケージのWidgetの使い方、詳細は「Documentation」の「API reference」から調べることができます。

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