BONUS 4.) It's not easy to render non-english characters. Rive only supports using 1 font in one textrun. 5.) I could've migrated the webview to match the MacOS behavior. But alas, I am not a patient developer. I did it not because it's easy, but because I thought it'd be easy.

3.) It's SUPER heavy. The webviews themselves takes ~200MB of RAM and are quite GPU-heavy. This isn't acceptable. Yet, I shipped this version anyway because I'm tired of working on it and there isn't anything I could figure out anymore anyway.

1.) It doesn't match the original text and animations that old users were used to 2.) The window jitters when resized. This isn't a thing in MacOS. There is a proper way to prevent this but whyyyyyyyyyyy do you need to do that??? it's so much easier in MacOS. I've been spoiled.

Windows implementation (Webviews+Pure Rive) : 1. Keyboard input 2. Get corresponding key text 3. Send to Rive, Rive automatically lays out text and sizes shape artboard. So much simpler. In theory of course. Except for the fact that I implemented it incorrectly.

Flutter-Native/Webview-Flutter Migraiton|Part 5.2 In theory: MacOS implementation (SwiftUI text + Rive background) : 1. Keyboard input 2. Get corresponding key text 3. Get text size 4. Calculate key size based on text size 5. Add and resize Rive shape artboard 6. Text on top 🧵

Flutter-Native/Webview-Flutter Migration|Part 5.1 This version is worse than the MacOS version despite being worked on for longer. MacOS keystroke overlay works by for each key it renders its own text and uses Rive for key shapes. On Windows, it renders texts on Rive.

Very correct but unfortunately I use Flutter master branch because multi window feature

Very nice PR. I no longer have to edit the Flutter source code just to make my multi-window app work. Previously, I needed to remove `_setFramesEnabledState(false)` from src/scheduler/binding. Otherwise, additional windows froze indefinitely.

Again, skill issue.

Flutter-Native/Webview-Flutter Migration|Part 5 Now let's see the Windows part of this migration: webview. Horrendous. (Dw it's mostly docs, refactors, and dlls/includes) I used WebView2 because I couldn't figure out how to compile Rive runtime for Windows and render it.

I may not post the parts in-order. Probably will sort it in the last conclusion / summary tweet.

I haven't figured out how to intercept it earlier. I'll probably wait until Mr. Knopp, Mr. Matt Canonical, or some other contributors to ship the ability to: 1.) Intercept / customize window creation 2.) Enables the ability to create windows as NSPanel instead of NSWindow

Shipped Keystro v1.4.6 This update enables overlay windows to move in front of other fullscreen apps/windows. Known issue: cannot be recreated in a fullscreen app. Must switch to Settings app first, then return. Issue caused by late Flutter window creation interception.

Very much related to https://t.co/zpAWJxXFX9 because I was writing the tweets while fixing the bug and I remembered someone complaining about this issue for the new app version that uses multi-window while writing it and I just remembered that I forgot to fix it. Will ship soon.

I was migrating my other app to a new auth system but got distracted and ended up fixing bug/adding new feature for the app I've been talking about for the past few days Gonna open an issue regarding creating a window as NSPanel instead of NSWindow on the Flutter repo later

However, in MacOS we need to use NSPanel and not NSWindow to make the overlays show up in front of full-screen apps. Otherwise it won't work.

#4 is especially harder to do in Windows because you need to intercept and handle window messages manually to do the same thing. MacOS will just do those for you just by changing the window properties. Inconvenient.

...set the content to be the hosting controller and set the window size based on the watermark size 4. Configure the window to -have no shadow -transparent -be in front of every other window -make mouse events pass through -make it show up in front of full-screen apps

Flutter-Native/Webview-Flutter Migration|Part 4.2.1🧵 By no means I'm a Swift expert. I just copy other people's code and an AI slop enjoyer. But this is quite straightforward: 1. Make SwiftUI view 2. Make hosting controller and put the view in there 3. Make the window and

Flutter-Native/Webview-Flutter Migration|Part 4.2 Let's start getting into a `deep dive` on how this whole native Rive-integrated SwiftUI keystroke and cursor overlay windows work. Starting from the easiest to the most complicated: This is how the watermark window was set up: