Flutter Web 应用程序无法在移动浏览器上运行。 如果在移动浏览器上运行flutter代码，如何调试错误？

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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

Details can be found here

Answer 4

Here is what I did

1. launch android avd

2. launch flutter app with your desktop ip and port (eg 7357) $ flutter run -d chrome --debug --web-hostname --web-port 7357

3. launch a chrome on avd and enter : eg 192.168.10.4:7357

4. 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:

5. Click "inspect" then a new debug window appears!