Flutter 電話番号認証 をリファクタした話

自分で書いた電話番号認証のコードにバグが仕込まれていて、コードを追うのが大変だったのでリファクタしましたって話です。処理の流れを整理する時に作成したシーケンス図があるので、そちらを見比べましょう。
ちなみに draw.io を利用してます。

元のコード:

悪いところ ... Firebase の処理 ≒ 新規登録画面の処理になっちゃってます。 await とかで 認証コード入力待ちを発生させて、画面遷移して入力して戻って処理を復帰... みたいなカオスなコードでした。

リファクタしたコード：

改善点 ... Firebase の処理と 画面でやりたい処理を切り離したので、コードが追いやすくなったし、変なawaitがなくなった。

どうやったの？

firebase_auth.verifyPhoneNumber()の 引数に渡していた callback 内に処理をまとめていたのが原因だったので、 callback で受け取った値を riverpod で状態保存して、 await などを使わずに callback を終了させ、 画面側から状態監視して良きタイミングで保存した値を利用して続きの処理を呼びました。コード載せる元気までないので概要説明のみ。。。

大まかな流れとしては、以下の通りです。

1. （過去に自分が書いたクソ）コードを読んで、シーケンス図を書き
2. そこからちょっと理想に近づくVerのシーケンス図を書き
3. シーケンス図にメモをバンバン貼っていき
4. コードを調整して理想の分け方にして
5. end

メモを貼ったVerのシーケンス図は以下

終わりに

図にしてしまえば何を大層に。。。となってしまうが、コードを追いながら修正していく流れは結構しんどかった。。。ここに供養させてください。
一晩かけてバグ修正しました。読みづらいコードは悪だ。根絶やしにしたい。