View Flutter web on mobile

user_13860161 0
Viewed 4176

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

flutter-web dart flutter mobile testing
4 Answers

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

Testing in my phone browser

Testing in my Mac browser

user_90748990

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.

user_5331040

  1. You need to start your flutter web-app on a specific port

    flutter run -d web-server --web-port 5011

  2. Connect your device and verify if the device is connected properly

    adb devices

  3. adb port-forwarding

    adb reverse tcp:5011 tcp:5011

after that, you can able to access that port on a mobile broswer.

user_12320510

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.

user_99423460
Related