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
78
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
80
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Automating Front-end Workflow
addyosmani
1371
200k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Agile that works and the tools we love
rasmusluckow
330
21k
The World Runs on Bad Software
bkeepers
PRO
71
11k
A Tale of Four Properties
chriscoyier
160
23k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Building Applications with DynamoDB
mza
96
6.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Being A Developer After 40
akosma
90
590k
GraphQLとの向き合い方2022年版
quramy
49
14k
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のカメラ移動の問題も解決していることが わかる