A Flutter WebApp behaves using MacOS Chrome just fine. Using Safari on MacOS, the UI changes at certain points randomly. MacOS and Safari are the most recent releases with any applicable patch installed.
As far as I understand, MacOS Safari is a first class platform to run Flutter apps.
Could someone explain, what I may have missed?
Example
The Widget should appear as in the right image.
Actually, it appears as the one in the left image.
As soon as I move the mouse pointer over the second button, it changes from Urlau to ....
The String Urlau appears somewhere in the Flutter app, but very far away from the respective widget. Fully unrelated.
I compiled like so: flutter build web --web-renderer html
Using Safari on MacOS appears like so:
Using Chrome on MacOS appears just fine:
Try rendering with canvas kit using this command
flutter build web --web-renderer canvaskit
Related
I have a Flutter web app, when I do web renderer html the text layout is fine with Safari in MacOS and totally messed up in Chrome on Mac and it looks like all the white spaces are missing. The canvaskit rendering is fine in Chrome. Attached is a screenshot with the comparison in two browsers (left side: Chrome, right side: Safari). Any idea what the problem is?
I'm seeing some strange font behavior with my Flutter web deployment vs PWA. Both are using default font (which I believe is Roboto?). On the left is my PWA, on the right is the browser. Both are built using canvaskit. On the second image, I've overlayed the two images together at 50%, so you can see how the font spacing is broken in the PWA.
The strange thing is that I've occasionally see the font render correctly in the PWA, but then after using the app for long enough, it breaks again. I've been unable to reproduce it deterministically.
How can I make both fonts consistent?
just use this code in terminal then restart android studio
--web-renderer canvaskit
created flutter project and running in android easily but how can we run in mac and
< what code we need to change and implement?>
Heading
You need a Mac device to run on iOS. By selecting a simulator, you can easily run from vscode/android studio/xcode. Also you don't need to change any code but if you want to show different style in different platform, you need to change those code accordingly.
Is it possible to run iOS or Android simulator docked inside VSCode (or is there a feature request or extension to do so)? ideally as one of the tabs in the panel, where the Terminal is.
UPDATE:
the best workaround solution I could come up with is dragging the ios simulator on a native macos space, as seen in picture. this is not doable on windows or linux afaik
When a user enlarges a window hosting a xamarin.forms UWP app the layout/page does not resize, and the window controls disappear. If you make the window smaller everything reposition as expected. How do you get this to behave properly? I thought it was supposed to scale automatically.
I have downloaded and tested the project you provided on GitHub and it works normally and resizes as expected. I suspect the problem in your case may be that the UI thread was frozen or you Visual Studio Debugger froze the app. I would suggest restarting your PC and then doing Clean solution from Visual Studio and rebuild again. After these steps it should work normally. If not, perform repair of Visual Studio.