How to access localhost on Android Emulator when you are developing a Flutter Web app

I worked on a Fluter web app, recently, that targets web platforms only. I tested and developed the app based on the Chrome browser on my laptop. I noticed the UI of the app is not what I expect on Mobile devices after I published the app. So, my problem was that I couldn’t test the app on the Browser of my laptop because it was working well. Also, in order to test my changes then I had to upload the artifacts on a web server hosting such as Firebase Housting in order to test my changes.

At first, I tried to copy/paste the URL into the web browser of my Android emulator. It didn’t work because the emulator didn’t have a clue about the web server. I did a search on Google and this is what I found.

First, launch your Google emulator.

Second, run the following command to make sure the emulator is accessible by the Andriod ad.

$ adb devices
List of devices attached
emulator-5554 device

Third, run the following command to reverse the socket on the adb.

$ adb reverse tcp:5011 tcp:5011

Forth, run the “Flutter run” command and pass it the “web-server” param.

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

This command generates a URL that will be recognizable by your emulator. This command generates a URL like this: http://localhost:5011

You can copy/paste this URL into the browser of your Android emulator and test your app.

Note: Unfortunately, hot reload and hot restart does not work this way. So, whenever you run either of them then you need to refresh your page in order to see your changes.