はじめに
Flutter × Riverpod × MVVMで実現するシンプルな設計(Firebase,WebAPI対応)
をriverpodの学習で修了しました。
その応用としてYUMEMI様のコードチェックに取り組んでみました。
Githubのリポジトリを検索して一覧で見れるようにする課題です。
自分の記録用として記事を書きます。
株式会社ゆめみ Flutter エンジニアコードチェック課題
今回作成したコードはこちらのリポジトリに公開しています。
https://github.com/secretused/yumemi_codecheck
またGithubのAPIとしては以下を使用しています。
https://docs.github.com/ja/rest/search#search-repositories
完成像
技術要素
アーキテクチャ
MVVMを講座で習ったのでそちらを真似て使用しました。
各レイヤーの役割は以下のようになっています。
View
- 画面の描画
- VMからのデータの呼び出し・書き込み
- FutureProviderを使用し、取得したデータをListViewで描画
ViewModel
- Formから受け取ったクエリをStateProviderで更新
- AsyncValueを利用して、AutoDisposeFutureProviderFamilyでModelにクエリを渡す
- リストがonTap時のCellの値をStateProviderで更新
Model
- クエリの整形
- クエリをAPI通信してデータの取得
- willProceedで空のクエリの場合を検知
状態管理
freezed × riverpodで構築
freezedは取得したJSONをJSONクラスとして使用
基本的にriverpodの処理の記述は全てVMで記述
(SharepreferencesのみViewで呼び出し書き込みしています。)
メリット
多くあると思ったのですが、自分が一番感じたのは
また可読性や簡潔性が高い、テストを導入しやすい。
ソースコード管理/タスク管理
Github, Github Issue
初めてIsuueベースの開発を行い、個人でも実践を意識して行うことができました。
参考にさせていただいた記事
一人開発でもissueベース/セルフプルリクエストを使って開発する
初見
ダークテーマ対応
SharepreferencesでBool値を保存し、三項演算子でWidgetを変更。
画面回転
三項演算子でもよかったが、デザインも変えたため
LayoutBuilderを使用して縦と横をそれぞれ記述。
多機種対応
MediaQueryを使用して画面サイズから計算。
改善点と課題
- riverpodの記述方法を臨機応変に考えれるようにしたい。
- SharePreferencesの記述がriverpodの仕様を生かしきれていない
- テストを導入できていない
- 以下Issueを導入したい
https://github.com/yumemi-inc/flutter-engineer-codecheck/issues/6
さいごに
コードは載せていませんが、Githubまで飛んでいただけると助かります。
https://github.com/secretused/yumemi_codecheck
Githubをもっと活用したり、MVVMをさらに意識してnull safetyな開発を心がけたいです。
今後テスト駆動開発かFlutterWebに取り組んでいきたいと思います。