ペットクリニック 2024 冬

目次

はじめに

久しぶりにFlutterの記事です。
以前、SpringフレームワークのペットクリニックのREST-APIを利用してFlutterのクライアントを実装するという記事をご紹介しました。

ペットクリニックはじめました
ペットクリニックの実装を解説


あれから約2年経過し（2022と2023はどうしたんだ？というツッコミはさておき💦）、Flutterの実装を巡る周辺環境も大きな変化があったように思えます。Flutterのバージョンは当時2.5.3でしたが、この記事を書いている現在では3.16.5となり、メジャー番号も上がっています。
今回は、2021年のリポジトリをフォークして、新しく勢いのあるライブラリに依存関係を変更し、合わせて実装も変更しています。


ソースコードの全体は、こちらのリンクからご確認いただけます。

https://github.com/MUKEI-SOFT-LLC/spring_pet_clinic_2024_flutter/tree/master

GetXがアツい

GetXの躍進により、DIと状態監視が一つのライブラリに依存するだけで済むようになりました。
これにより、DIはget_itからGetXに、状態監視もflutter_riverpodからGetXに変更しました。

2021のpubspec.yml

2024のpubspec.yml

代替となるような後発で勢いのあるライブラリが見当たらない場合は、ライブラリのバージョンのみ上げています。

ConsumerWidgetからStatelessWidgetへ

ペットクリニックアプリでは、「＋」ボタンをタップすると、オーナーに新しいペットを登録する機能があります。

ペットの種類（犬や猫など）を登録するドロップダウンウィジェットのコードは以下の通りです。
ペットの種類はenumです。ユーザーの選択を監視し、ドロップダウンに反映します。

2021のドロップダウン（flutter_riverpod）

2024のドロップダウン（GetX）

2021版では、ConsumerWidgetを継承し、オーバーライドしたbuildメソッドの第二引数で取得したScopedReaderで、ペット種類型のStateProviderを監視するというライブラリへの依存度が高めの実装となっていますが、2024年版はシンプルなStatelessWidgetと自前のコントローラークラスを用意し、Obxでドロップダウンのウィジェットをラップするだけとなり、より直感的なコードとなりました。

ConsumerWidget＋StreamProviderからGetXController＋StateMixinへ

一覧系の画面は、ローディング中は何かしらインジケーターを出し、読み込みが終わったらリストビューを更新し、通信中に20x以外の異常なレスポンスが返送されたら、エラーメッセージを表示するというある意味ではパターンがあると思うのですが、これはDartのピュアなStreamの状態を監視しなければ、画面に反映させることはできません。2021年版も2024年版も、この点に関しては、ライブラリにべったりなコードを書いて実現しています。
獣医の一覧画面（veterinarian）は、更新系のないシンプルな一覧画面ですが、Web-APIの呼び出し中にインジケーターを表示し、サーバーからデータが返送されたら一覧画面に表示するというパターンを踏襲しています。

2021の獣医一覧タブ(flutter_riverpod)

2024の獣医一覧タブ(GetX)

2024の獣医一覧タブのコントローラークラス（GetX）

最後に

今回使用していませんが、GetXはDIや状態監視以外にもユーティリティが豊富ですし、コンテキストを引き回さずにダイアログやスナックバーの表示ができます。pubspecに”get”の3文字を加えるだけで、これらが提供されるお手軽さも考えると、Flutterアプリ開発のデファクトになりそうな予感がしています。それでは！