見出し画像

Flutterでアプリ開発 Hello World編(2/3)

こんにちはー!お肉大好き、さささです!

前回記事は、こちらです。
今週は、Flutterのチュートリアル「Write your first Flutter app, part 1」のStep2に挑戦し、packageの利用に挑戦してみました。

外部パッケージを使ってみた

前回記事で作成したプロジェクトをそのまま使っていきます。
「english_words」というパッケージを導入し、画面にランダムで英単語が表示されるようにする事がStep2でのゴールとなります。

Flutter/Dart向けに提供されているパッケージは、pub.devというサイトで検索ができます。目的・用途があったものが既にあれば、儲けモンです!

パッケージを導入する際に気にしなきゃいけないことの一つが、バージョン管理です。
Flutterでは、pubspec.yamlで管理ができます。
公式のチュートリアルに倣って、3.1.0以降で指定しています。

dependencies:
 flutter:
   sdk: flutter
 cupertino_icons: ^0.1.3
 english_words: ^3.1.5

記述できたら「Pub get」をクリックします。

画像1

すると、コマンドが実行されました。

$ flutter pub get
Running "flutter pub get" in hello_world_test...                    1.8s
Process finished with exit code 0

これでパッケージの取り込みができたようです。
main.dartでimportしてから早速使ってみると、英単語が表示されました。

// Step2 packageの利用
class MyAppStep2 extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   final wordPair = WordPair.random();

   print(context.runtimeType);
   return MaterialApp(
     title: 'Welcome to Flutter',
     home: Scaffold(
       appBar: AppBar(
         title: Text('Welcome to Flutter'),
       ),
       body: Center(
         // 英単語を表示
         child: Text(wordPair.asPascalCase),
       ),
     ),
   );
 }
}

画像2

深掘りしてみた

今回出てきたのは、pubspec.yamlによるパッケージのバージョン管理についてですので、少し深掘りしてみます。

まず、pubspec.yamlについてです。

何気なくバージョン指定をしていますが、この記述はキャレット表記と言われるもので、「^3.1.5」という指定の場合は「3.1.5 <= バージョン < 4.0.0」と同義となります。
少々分かりにくいこともあるので、個人的にはあまり好きじゃありません。

さて、「english_words」のバージョン情報をみると3.1.5が最新(2020/6/21時点)のようです。
試しに、少し古いバージョンの「2.0.4」を指定してみました。
すると、見事に怒られました。
どうやら、2.0.4を導入するには、利用しているSDKのバージョンが高過ぎるようです。
Pub getした時点で、依存関係などをしっかり忠告してくれるようです。

次にバージョンを「3.1.4」を指定してみると、こちらは導入OK。
import先を確認すると、確かに「3.1.4」へ切り替わっていました。

画像3

Pub getしたパッケージは、pub-cache内へ取り込まれます。
english_wordsは3.1.4と3.1.5が入っている状態となり、pubspec.yamlで切り替えれば、使う事が可能です。
ただし、ホットリロードでは切り替わらないので、必ずビルドし直してください。

まとめると、このようになります。
pub.devにオープンなパッケージがズラリと揃っている
・pubspec.yamlに利用するバージョンを指定して、Pub getする

「Write your first Flutter app, part 1」のStep2が終わったので、本日はここまで。

次回は「Write your first Flutter app, part 1」のStep3以降に挑戦していきます。

お読みいただき、ありがとうございました。

この記事が気に入ったらサポートをしてみませんか?