実践Flutter

Flutterでスマホを中心にアプリ制作していきます。

プロジェクト開始時のお約束・GetXとHiveの設定まとめ

Flutter

はじめに

本サイトのサンプルでは簡単お手軽Flutter開発に欠かせないGetXとHiveを毎回のように使います。

そこでGetXとHiveのそれぞれを導入するお決まりの手順を記事としてまとめておこうと思います。

Flutterの新しいプロジェクトを立ち上げたらまずこちらの手順で導入していきましょう。

方法は3種類提示します：

  • コマンドラインで行う方法
  • 公式ウェブサイトからコピペする方法
  • ここで提示するpubspec.yamlのコピペする方法

です。一長一短ありますからお好きな方法を選んで下さい。

ここで扱うのは導入の設定だけです。GetXやHiveがそもそも初めて、という方は下記記事をご参照ください：


flutter.gakumon.jp
flutter.gakumon.jp






コマンドラインで行う方法

まずは開発環境の「Terminal(コマンドライン端末)」を開いてコマンドを順に打っていく方法を見ていきます。

手打ちのコマンドが面倒と思われるかもしれませんが、いちいち公式のページで最新バージョンを確認しなくてよく、依存性の確認などしてくれて便利です。

Terminalを開いてプロジェクトのフォルダのルート(pubspec.yamlのあるフォルダ)で下記コマンドを入力していきます：

flutter pub add get
flutter pub add hive
flutter pub add hive_flutter
flutter pub add hive_generator
flutter pub add build_runner
flutter pub get

1行ずつ依存性チェック等を実行しますので少しずつ時間がかかります。最後の行でパッケージをダウンロードしています。これでプロジェクト開始OKです！

ちなみにHive用のクラスを作り終わったらタイプアダプタ生成コマンドは下記です：

flutter packages pub run build_runner build

補足説明：
「Terminal」はAndroid Studioのデフォルトレイアウトであれば下のスクリーンショットのように左下(の左から3番目)にボタンがありますので、これを押します。VS codeやXcodeでもどこかにTerminal、あるいは日本語であれば端末・コマンドライン端末、のようなメニューがあると思いますのでそれを押します。
f:id:linkedsort:20211119151417p:plain

Terminalを開くとプロジェクトのフォルダのルートでコマンドプロンプトが開きます。IDEからTerminalを開かずWindowsであればcmdやほかのコマンドラインシェル(tcsh、bsh、zsh、bashといったやつですね)からプロジェクトのディレクトリに移動してもOKです。

f:id:linkedsort:20211119151505p:plain

そこで上記のコマンドラインを1行打って、エンターキーで実行します。

f:id:linkedsort:20211119151557p:plain

「flutter pub add get」を実行すると、たとえばこのように依存性が解析され、問題なければgetの依存性がpubspec.yamlに追記されます。

f:id:linkedsort:20211119151645p:plain

これを繰り返すわけですね。最後に「flutter pub get」で締めます。


ウェブサイトで依存性の記述を確認してコピペする方法

GetX及びHiveの公式ページをみてpubspec.yamlに記載する文字列をコピペする方法です。

手打ちコマンドは嫌いだがきっちり最新バージョンは確認する派におすすめです。

GetXから行きましょう。公式ページは以下です：


pub.dev

こちらのページからgetのdependenciesの行を1行、自分の手元のpubspec.yamlに転記します。
f:id:linkedsort:20211116221621p:plain

次にHiveです。公式ページは以下です：


docs.hivedb.dev

こちらの「Copy to clipboard」のボタンを押してpubspec.yamlに依存性の記述を追加します。
f:id:linkedsort:20211116214649p:plain

以上が終了しましたら、「Terminal」を開いて「flutter pub get」を実行、あるいはIDEの用意している「pub get」ボタンを押してパッケージをダウンロードしてください。


手っ取り早くコピペする方法

最後に決まった文字列をpubspec.yamlに決め打ちで貼る方法を示します。

お手軽ですが、今ここで示すのは本記事を書いている現在のバージョンですので、うまくいかなかったらバージョン番号を上の方法などで確認する必要があるので注意が必要です。

Flutterの新しいプロジェクトを作成したら、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: ^1.0.2
  (★ここです)

dev_dependencies:
  flutter_test:
    sdk: flutter

下記の5行をコピペします。

  get: ^4.3.8
  hive: ^2.0.4
  hive_flutter: ^1.1.0
  hive_generator: ^1.1.1
  build_runner: ^2.1.5

結果、下のように並べます。行頭のスペース2個など重要ですのでこのままちゃんと再現できていればOKです：

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: ^1.0.2
  get: ^4.3.8
  hive: ^2.0.4
  hive_flutter: ^1.1.0
  hive_generator: ^1.1.1
  build_runner: ^2.1.5

dev_dependencies:
  flutter_test:
    sdk: flutter

以上ができましたら、「Terminal」を開いて「flutter pub get」を実行、あるいはIDEの用意している「pub get」ボタンを押してパッケージをダウンロードしてください。







おわりに

今回はお決まりのパッケージの導入についてまとめました。

これでもうまく行かないときは、下記の原因が考えられると思います：

  • YAMLフォーマットが崩れている
  • バージョンの記述が間違っている
  • 他のパッケージとの依存関係がうまく行っていない

最初のYAMLフォーマットの崩れ、たとえば変なスペースが入ってしまっていたりすると、例えばAndroid Studioでは下のスクリーンショットのように、おかしな箇所をハイライトしてくれます：

f:id:linkedsort:20211116224020p:plain

hive_flutterのところが淡黄色に塗られていますよね。こういう箇所がないか見てみます。

あとは数字の転記を間違っていないか確認する。

そして他のパッケージとのバージョン競合の場合は、一番上に紹介した「flutter pub add xxxx」コマンドの依存性チェックのメッセージをよく見て、ぶつかっているパッケージとその原因を探っていくと解決の糸口が見えてくるかと思います。

さあ、まったりプロジェクトを始めましょうか。

f:id:linkedsort:20211116225430j:plain