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
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
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
300
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
47
7.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
2.1k
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
190
4 Signs Your Business is Dying
shpigford
187
22k
Crafting Experiences
bethany
1
54
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
57
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Leo the Paperboy
mayatellez
4
1.4k
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
160
Speed Design
sergeychernyshev
33
1.5k
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のカメラ移動の問題も解決していることが わかる