Flutter web app not working on mobile browser. How to debug the error if running flutter code on mob-CodePudding

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.

CodePudding user response：

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.

CodePudding user response：

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.

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.