Connecting Flutter application to Localhost

Connecting your flutter application is not an easy task, as it seems to be. Especially when you want to run your Flutter application, which is connected to the localhost on different platforms, like, iOS emulator, Android emulator or on a real device at the same time.

You can watch the tutorial on YouTube

Running Flutter Application on iOS emulator

iOS emulator uses the current machine localhost i.e 127.0.0.1 or localhost as the localhost. So, if you want to connect to localhost on iOS emulator you just need to point to the

http://localhost:SPECIFIC_PORT // port 80 by default
 or 
http://127.0.0.1:SPECIFIC_PORT .
For Example
http://localhost:8000/api/users

Running Flutter Application on Android emulator

Android emulator uses 10.0.2.2 for pointing to the localhost. So, if some user’s info is available on a url like , http://localhost:8000/api/users and you want to access it from your Flutter application which is running on Android emulator you need to write:

http://10.0.2.2:8000/api/users

Running Flutter Application on a Real Device

Localhost means something different on the real device, basically in means to look inside the current device.

To run a Flutter application which is connected to the localhost, on a real device, first the real device and the machine which acts as localhost should be connected on the same network.

And then the application should be self hosted on the machine, for example, if you are using Laravel as your backend solution, and you want to access it from your Flutter application on a real device you need to run your Laravel Application as bellow:

$ php artisan serve --host 0.0.0.0 --port 8000

So, this well host this Laravel application on the current machine IP address, suppose your current machine IP address is 192.168.0.243 then you can access user’s info from your Flutter application running on the real device as follow:

http://192.168.0.243:8000/api/users

If you are having a pure PHP application for your backend then you can host the application with the following procedure:

cd path/to/your/app        // Navigate where you application is
php -S 0.0.0.0:<PORT_NUMBER>
// For example
php -S 0.0.0.0: 3000 
// Will host the app at http://192.168.0.243:3000

So, this will enable you to access the localhost from the real device as:

http://192.168.0.243:3000/api/users

Note: PORT_NUMBER is an integer from 1024 to 49151.

For an ASP.NET core application as your backend you need to configure your Program.cs file as follow and then run your application:

var host = new WebHostBuilder()
  .UseKestrel()
  .UseContentRoot(Directory.GetCurrentDirectory())
  .UseUrls("http://localhost:5000", "http://192.168.0.243:5000")
  .UseIISIntegration()
  .UseStartup<Startup>()
  .Build();

So, you’ll be able to have access to the localhost from the real device as:

http://192.168.0.243:5000/api/users

Also you need to make sure the Firewall on windows allow you to connect. In addition, both your device and computer should be connected on the same network.

The good thing about self hosting is that, it can be accessed with same url from iOS emulator, Android emulator and on the real device.

Conclusion

Accessing the localhost from Flutter application is not the same on iOS emulator, Android emulator and the real device.

You can self host your application on an IP, an access it from all the platforms at the same time.

The key point to remember, when you want to connect your Flutter application to a real device is that, both the device and PC should be connected to the same network.