flutter web app is working fine on desktop chrome and safari browser in debug and release mode. But, it is not working on mobile browser in debug and release mode. I uploaded the release mode files on server and try to access to the website using URL but one page is not working fine. Widget Design completely damage.
How to debug where is error if running flutter code on mobile browser? see below screen shot.
We were not shown the code. Therefore, it is difficult to say for sure. But I had such problems when I ran the application building without parameter --web-renderer
flutter build web
The point was that by default it uses different renderers (CanvasKit for desktop and HTML for mobile). And since I used things that required CanvasKit, the application in mobile browsers was displayed incorrectly.
Building with the appropriate parameter solved my problem
flutter build web --web-renderer canvaskit
Here is what I did
launch android avd
launch flutter app with your desktop ip and port (e.g. 7357) $ flutter run -d chrome --debug --web-hostname --web-port 7357
launch a chrome on avd and enter : e.g. 192.168.10.4:7357
open a desktop chrome and enter the following in the address bar: chrome://inspect/#devices
There you can find the one you set : like this:
This is pretty common error in Flutter Web, don't worry it's easy to fix. I spent a lot of days behind this errors to find the solution as I don't know how to search on stackoverflow.com because of cannot finding a error message or debug message in release mode.
Actually that is not true and you can read the debug console easily by getting into the inspect tab in chrome.
Right click on the screen > Inspect Element and you can have it.
First Method
Please run your app on debug mode once again and carefully watch the debug log which is printed in the VSCode debug console. and you can find something like this.
Another exception was thrown: Incorrect use of ParentDataWidget.
or
flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following message was thrown during layout:
flutter: A RenderFlex overflowed by 15 pixels on the right.
flutter:
flutter: The overflowing RenderFlex has an orientation of Axis.horizontal.
These errors don't stop the app from running and sometimes it doesn't show up any berriers to work on app while in development. especially the parent data error.
Once you find and fix this warning message. You can build to the release mode and Voila. You can have your app working pretty well!
Second Method
If you cannot understand the problem from the above method. then you can approach the this way.
Build your production release (like you have it already) or run the app with debug console like this
flutter run -d chrome --release
You can have the same look as the release mode with a grey box on the UI. Find the place in the code where the Grey Box Appear, and you can find some Expanded() widget at that spot.
Just Remove the expanded widget and recheck the code. If there is any render flex overflow error wrap the widget with a SizedBox or container with predefined width / height and the error will be gone.
It's possible that this is happening due to some widget overflow problems in release mode. Try heading to the dev tools in your browser and switching to mobile mode to get the screen width to narrow. And please be more specific than doesn't work so that we can better help you.
it seems to be unAbel to run flutter websites in Debug Mode so the solution was to run your website in Release Mode
So just type this in your terminal:
flutter run --release
