Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
DroidKaigi.collect { #12@Okinawa} _ 通知モーダルのミューテックス
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Yuki Kitaike
September 01, 2024
0
87
DroidKaigi.collect { #12@Okinawa} _ 通知モーダルのミューテックス
Yuki Kitaike
September 01, 2024
Tweet
Share
More Decks by Yuki Kitaike
See All by Yuki Kitaike
ShimaTechHub_2_FlutterとGemini_でXXXへの挑戦.pdf
yukikitaike
0
93
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
Designing Experiences People Love
moore
144
24k
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
180
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.8k
Practical Orchestrator
shlominoach
191
11k
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
120
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.4k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
Fireside Chat
paigeccino
41
3.8k
KATA
mclloyd
PRO
34
15k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
190
Transcript
Flutter × Rust Core 通知モーダルの ミューテックス DroidKaigi.collect { #12@Okinawa} きたいけ
問題発覚 アプリ Flutter製の配送ドライバー向け『ピックゴーパートナー』 機能 特別なオファー通知が来るたびに、 モーダルボトムシートを表示する機能 問題 連続してオファー通知が来た際に、 ・2枚目のGoogleMap表示の縮尺がおかしい(=日本地図全体が 表示されている)
なんでこうなった? カメラ移動(=マップ縮尺)は、画面描画完了直後のコール バック(=遅延処理)で実行 →その遅延中に2枚目の描画がはじまる →複数の通知モーダルでGoogleMapControllerのmapIdが 重複する →1つ目のみカメラ移動することで満足する ※Gifをよく見ると、画像のように一気に2枚のモーダルが立ち 上がっていることがわかります。
どうすればいい? - 方針: 1つ目の描画が終わったことを確認してから2枚目の描画を開始する (そもそも2枚目の通知が先(=上)に表示されている問題があるので…) - よくある方法: 複数ダイアログの表示制御では、isShownDialogのようなフラグを利用する方法が 一般的だが… -
今回のケース: - モーダル表示は、通知(非同期Stream)起因である - 2回目の通知もスキップするわけではなく、待機して実行する必要がある
どうすればいい?(承前) 通知をキューに入れてFIFO(=先入先出)の形式で処理する →ミューテックス(排他制御)を使う!
ミューテックス (ってなに……?)
ミューテックス(と排他制御) 排他制御とは… 複数のプロセスが利用出来る共有資源に対し、複数のプロセスからの同時アクセスによ り競合が発生する場合に、あるプロセスに資源を独占的に利用させている間は、他のプ ロセスが利用できないようにする事で整合性を保つ処理 また、『ミューテックス』とは狭義の排他制御とも呼ばれるもので、 ざっくりいって「順番待ち排他制御 」のことです。 「分かりそう」で「分からない」でも「分かった」気になれ るIT用語辞典:ミューテックス
Mutexを実装する(しない) 残念ながら Flutter(Dart)には、 標準パッケージで Mutexクラスが存在しないので自作する必要がある とはいえ、本当に自作する場合は、 google_generative_aiパッケージのmutex.dartと同じ感じになると思います 余談: のパッケージ実装を見てたことが僕とミューテックスとの出会いでした
Mutexの要件 1. キューに入った処理を非同期オブジェクトで 管理 2. ロックの取得:キューに複数のタスクがある 場合は先頭を即時実行し、2番目以降を(非 同期)待ち状態とする 3. ロックの解放:先頭のタスクが完了したら除
外して1~3を繰り返す ① ② ③
Dartになければ、 Rustを使えばいいじゃない
とは Rust言語のコアライブラリをDart言語で実装した「Rust Core 1.0」がリリース - Rustの「Result型」を用いてエラーハンドリングを値として扱えることでメンテナンス 性が高まる。 - DartにはNull値を持てる型があるが、Nullまたは非Nullに特化した操作を行うに は、if文の束が必要となる。Rustの「Option」はこれをランタイムのコストなしに修正
できる。 - Rustの「?」演算子 、「Cell」,「Slice」型が利用できる。 言語機能の拡張(Rustの型や文法の使用)
From公式ドキュメント (翻訳) Dartへようこそ! Dart は、クロスプラットフォームの高速開発と スクリプト作成に最適な言語です。ネイティブの Rust を書いているような感覚が得られるので、 rust_core は
Dart のセマンティクスを学ぶための 素晴らしいスタートとなるでしょう。 rust_core は、 Dart 開発者にとって役立つと思われる いくつかの新しい型を紹介します。
None
Flutterアプリでの使用法 サービスプロバイダーは、ミューテックス対象とするタスクグループごとのミューテック スインスタンスを提供するようにします 参考 Riverpodを使用している場合は、 グループのキーをenumで定義し、 Providerは.familyとします。
Flutterアプリでの使用法(承前) withLockメソッドには、 1. ロックの取得 2. try句でのタスクの実行 3. finally句でのロック解放 がパッケージ側で実装済み なので使うだけです。
結論 連続で通知が来た場合も、 - (一気に2枚開くことなく)1つ目のモーダルを閉じてから 2つ目のモーダルを開く動きになっている - GoogleMapのカメラ移動の問題も解決していることが わかる