問題発覚
CBcloudが配送ドライバー向けに提供しているアプリ『ピックゴーパートナー』では、
特別なオファー通知が来るたびに、モーダルボトムシート（以下ではモーダルと略す）を表示する機能があります。
今回ユーザからの報告で、連続して通知が来た場合の2枚目以降のモーダルにおける、GoogleMapの不具合が発覚しました。
以下のGifは、検証のために自身の端末にFCM通知を2回連続で送ったものです。
モーダル描画時に（厳密には描画完了直後に）、google_maps_flutterのcameraMoveメソッドを使用してユーザの現在地を基準とした縮尺に更新する処理が、2枚目のモーダルでは正常に動作していません。拡大されず、日本地図全体が表示されてしまっています。
なんでこうなった？
調査の結果、2枚のモーダルでGoogleMapControllerのmapIdの重複が起こっていました。※mapIdはcameraMoveメソッドの第一引数です
というのも、カメラ移動は画面描画直後にWidgetsBinding.instance.addPostFrameCallbackの遅延処理で実行しており、その遅延のために複数のモーダルで同一のGoogleMapControllerを参照していたからです。
Gifをよく見ると、下の画像のように一気に2枚のモーダルが立ち上がっていることがわかります。
どうすればいい？
ここまで触れてこなかったですが、そもそも後から来た通知が先（＝画面の最前面）に表示される不具合もあるため、同時描画を防ぐ方向で修正します。
複数のダイアログが重ねて表示されないようにする場合、一般的な対応としてはisShownDialogのようなフラグを使う方法があると思います。
ただ今回のケースでは、2個目の通知を（スキップするわけではなく）最終的に実行する必要があるため、通知をキューに入れてFIFO（＝先入先出）の形式で処理します。
つまり排他制御 1を利用します。
排他制御って……なに？
wikipediaによると排他制御とは、
複数のプロセスが利用出来る共有資源に対し、複数のプロセスからの同時アクセスにより競合が発生する場合に、あるプロセスに資源を独占的に利用させている間は、他のプロセスが利用できないようにする事で整合性を保つ処理の事をいう
また今回とりあげる『ミューテックス』とは狭義の排他制御とも呼ばれるもので、ざっくりいって「順番待ち排他制御」のことです。
排他制御というと、主にバックエンドのトランザクション管理の文脈で出てくる概念ですが、フロントエンドでもAPIの実行制御では話題になると思います。
実際、次の項で紹介するMutexの標準的な使用目的は、クライアント側でのAPI実行順の整合性を保つことにあります。
実装する（しない）
排他制御をゼロから実装するには、私のような頭が悪い人間にとっては骨が折れるので、
頭のいい人が作ったものをお借りします。
google_generative_aiパッケージのmutex.dartです。
これについては以前、別の記事で紹介しているので見てみてください。
手順としては、
まずmutex.dartをコピペしてプロジェクト（のlib）配下におきます。
パッケージをimportしてもいいですが、AI関連の機能は使わないため該当ファイルだけコピペします。
次にサービスプロバイダーとして定義します。
※状態管理にはRiverpodを使用
また排他制御は競合する処理のグループ別に行う必要があるので、グループのキーをenumで定義し、Providerは.familyとします。
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:myapp/utils/mutex.dart';
//排他制御をするグループ単位のProvider
final mutexServiceProvider =
Provider.family((ref, MutexGroupKey key) => Mutex());
//グループのキー
enum MutexGroupKey { notifyModal }
最後に排他制御をしたい処理（今回はモーダル表示）をtry-finallyで囲ってやり、
try直前でロックの取得、finallyでロックの解放をします。
そうすることで、1つ目の通知は（「待ち」状態のタスクがないので）即時実行、2つ目の通知は1つ目の通知のタスクが完了するまで「待ち」状態とすることができます。
final _mutexGroupKey = MutexGroupKey.notifyModal;
final _mutexService = ref.read(mutexServiceProvider(_mutexGroupKey));
//通知が来たときに実行する関数
Future<void> _handleMessage(RemoteMessage message) async {
//ロックの取得
final lock = await _mutexService.acquire();
try {
//モーダル表示
await showBarModalBottomSheet(ModalArguments(message));
} finally {
//ロックの解放
lock.release();
}
}
簡単ですね。シンプルにできました
今回はモーダル描画に対して使用しましたが、当然のことながらAPIの実行制御でも同じ手順でいけます
修正
以下のGifでは連続で通知が来た場合も、（一気に2枚開くことなく）1つ目のモーダルを閉じてから2つ目のモーダルを開く動きになっており、GoogleMapのカメラ移動の問題も解決していることがわかります。
最後に宣伝
CBcloudではモバイルエンジニア募集中です！
沖縄では隔月でFlutterコミュニティ活動をしています！
旅行ついでに立ち寄ってみてください
-
もちろん、フラグを利用して2回目の実行を拒否することも立派な排他制御ですが、ここでは後述する狭義の排他制御である、ミューテックスのことを指します ↩