24

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

Improve this question
1

7 Answers 7

Reset to default
56

Yes, testing your code in a web browser while in production is possible. Here are steps to do that:

  • Connect your devices (your laptop and phone) to the same internet
  • Run the following code in the terminal of the opened project

t

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 PC IP address>:8080

Testing in my phone browser

Testing in my Mac browser

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Please make sure the IP address should be your system/pc IP address, not your real device address. I was doing the same but later I foud out that, I have to enter my pc IP address. Hope this will be helpful for other devs
How can we get debug print statements or breakpoints for this?
15

  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

  4. Open Mobile Browser with http://localhost:5011/

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

Improve this answer

5 Comments

exactly how will one follow the last piece of instruction after that, you can able to access that port on a mobile broswer. Is it by copying the url an replacing localhost with device Ip or just copying the url like localhost:5011/# and doing something with it? Thanks.
no need to specify ip address via localhost you can access your page
You can access your pages, but how?
@SamuelNde Open Mobile Browser with localhost:5011
I see you added more steps to your answer. Thanks a lot. It is now very clear what to do.
7

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.

Improve this answer

1 Comment

This Comment is the real deal. It makes it straightforward to run a flutter web app on any platform with a web browser. Even on my smart TV's browser on the same network.
3

I working on a Macbook, and none of the answer from above help, but I found a pretty simple solution to test my webpage.

  1. The 1th you have to do is build your project with this command: flutter build web
  2. After that, get in the build/web folder and run this command: python3 -m http.server 8000 (For this you will need python 3.)

And that is, now you can see your webpage on both platform. On mobile you only your hosted platform's IP address. On mac, you can get with this command: ipconfig getifaddr en0

So, on your phone you can the webpage with this: your IP address:8000 Example.: 192.10.42.14:8000.

On your hosted platform it will be: 0.0.0.0:8000 (but this is only gonna work on your hosted platform)

I know, this is just a workaround, but for my situation it was very helpful.:)

Improve this answer

2 Comments

Thanks! Good enough for a quick check :) flutter build web ; cd build/web ; python3 -m http.server 8000 & ; open "http://$(ipconfig getifaddr en0):8000/";
But you can only dream of hot restart or what? Let alone debugging...
0

Yes, you can . But instead of running a local web server and all, just run your code on your system on chrome(web)

  1. After your app runs on web click on inspect
  2. In inspect toolbar beside elements you will find a button "toggle device toolbar" click on that and you are good to go.
  3. Your desktop screen would give you a mobile view, you can try different devices and dimensions as well
Improve this answer

Comments

0

1 - Check your computer ip using ipconfig command in your terminal.

enter image description here

2 - Make sure your mobile is connected to the same network (ex: your home router).

3 - Run this command in the terminal ( The IP below must be the one you got from the ipconfig command, in this case i am using this ip as an example your ip could be different).

flutter run -d web-server --web-hostname 192.168.1.24 --web-port 8080
  1. You can now access the server on your mobile device by opening your browser and navigating to http://192.168.1.24:8080.
Improve this answer

Comments

0

  • Connect your device to the same internet (With Lan or Wifi or Hotspot)

  • Run this Command in Terminal

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

  • After running the command , copy your systems's IP Address

  • Then open provided link in app browser of that device where you want to run.

  • http://YOUR-IP-ADDRESS/8080
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.