14

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

Bennett567
  • 535
  • 1
  • 3
  • 18

5 Answers5

41

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

JAtoms
  • 522
  • 5
  • 10
  • 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 – Mehroze Zaidi May 03 '23 at 07:13
6

  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.

Rinkesh
  • 3,150
  • 28
  • 32
  • 1
    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 http://localhost:5011/#/ and doing something with it? Thanks. – Samuel Nde Apr 12 '23 at 16:07
  • no need to specify ip address via localhost you can access your page – Rinkesh Apr 19 '23 at 12:56
  • You can access your pages, but **how**? – Samuel Nde Apr 23 '23 at 17:53
  • @SamuelNde Open Mobile Browser with http://localhost:5011/ – Rinkesh May 08 '23 at 09:00
  • 1
    I see you added more steps to your answer. Thanks a lot. It is now very clear what to do. – Samuel Nde May 11 '23 at 07:31
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.

dakamojo
  • 1,839
  • 5
  • 21
  • 35
2

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

Gergő Csiszár
  • 107
  • 1
  • 6
  • Thanks! Good enough for a quick check :) `flutter build web ; cd build/web ; python3 -m http.server 8000 & ; open "http://$(ipconfig getifaddr en0):8000/";` – sr9yar Feb 02 '23 at 10:28
  • But you can only dream of hot restart or what? Let alone debugging... – Paul May 29 '23 at 08:34
-2

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.

Guillaume Roux
  • 6,352
  • 1
  • 13
  • 38
  • 5
    How did this answer get so many likes? This is complete nonsense. Of course you can! https://stackoverflow.com/a/68223713/3664628 – Leonid Veremchuk Jan 13 '22 at 13:21