View Flutter web on mobile

Question

I am building a flutter web app, but I want it to behave differently on mobile and desktop. To test it, is it possible to run the web app on a phone's browser or in the browser of an emulator? Thanks

Solution 1

No you cannot run a Flutter Web application in the mobile browser locally, if you want to test your application with a mobile format you can simulate it from a Google Chrome browser by enabling device toolbar from the developer tools Ctrl+Shift+M.

Solution 2

Yes, it is possible to test out your code in web browser while in production. To do that, run the following code in the terminal of the opened project

flutter run -d web-server --web-port 8080 --web-hostname 0.0.0.0

Then, head to your mobile phone browser and type

HTTP://<your IP address>:8080

Solution 3

The above answer is incorrect. I test all my flutter web development in the mobile browser in the Simulator. I use VS Code. Your environment may be different.

1. Run the project for Chrome (web). This launches the local server and a Chrome Browser. Copy the URL from the browser. In my case, I have it to always be http://localhost:8686/#/
2. Launch the Simulator.
3. Launch Safari or any other browser on the Simulator. Paste the URL in the browser.

You can even access the project from a real phone if it is on the same local network as your development machine. Just replace localhost with the IP Address of your development machine.

Comments

[Leonid Veremchuk]

How did this answer get so many likes? This is complete nonsense. Of course you can! stackoverflow.com/a/68223713/3664628

[JAtoms]

Welcome @Michael