Introduction
Flutter app on local network can be deployed for any number of reasons. You’re testing your app before it can be deployed to production or maybe you just want to make it easy for your software testing team to test the app for bugs. Whatever the case might be today we will learn how to host a Flutter app on local network, So without any further delay let’s get started.
The Project
Before I continue, I’ll showcase the project I’ll be using for the purpose of demonstration in this tutorial. The project I’ll use is a simple World Time App which I wrote a whole tutorial on before. You can check out the tutorial here World Time App Tutorial. Or if you’d like you can simply clone the Github Repository For The Project.
Requirements
The requirements for this project are quite simple as a matter of fact you only require the following three things to proceed
- A Flutter Project.
- Python must be installed otherwise this will not work.
- Enable traffic on Home / Work network when you receive a Windows Firewall prompt otherwise none of this will work. DO NOT DISABLE ANY TRAFFIC!
Building The Flutter Web App
First step is to build our flutter application for the web so go into your project directory and type the following command and wait for the build process to finish.
flutter build web
Navigating To Build Flutter Web App Directory
Assuming you are at the root of your Flutter app directory type the following command in Powershell / Command Prompt / VS Code Terminal (Any one of these CLI).
cd build/web
Now since we’re in the target directory nothing else needs to be done here, move on to the next step.
Deploy The Flutter App On Local Network
Since we’re in our target directory we only have one step left to accomplish our goal. Type the following command in the build/web directory of your Flutter app.
python -m http.server
Explanation
What this command does is start a Python HTTP server on your local machine by default at port 800. In case you want to host your web app on a different port just append the port number alongside the above command. For example if I wish to run my app on port 8001, I’ll write the command like this python -m http.server 8001 , After running the command you must receive an output like this.
If your output is the same as the one in the screenshot above then your app has been deployed on your local network. Lets move on to the next step.
Accessing The App With URL
Now that your app has been successfully deployed a question still remains, How can we access our app? The answer is simple and there are 2 ways we can do that and we will explore both methods below.
Accessing The App From Host Machine
If you’d like to access your Flutter app from your host machine just type this in the address bar.
http://localhost:YOUR_PORT_NUMBER
For example if you’re running the app on default port this is how your address will look like,http://localhost:8000 and similarly if you specified a port number before starting the server just substitute this with your own port number.
Accessing The App From Client Machine
If you’d like to access your Flutter app from a client machine then you’ll have to substitute localhost with your local address. For example if my local ip address is 192.168.12.45 and I’m running the server on default port then I’ll type this in the address bar of the client machine’s browser.
http://192.168.12.45:8000
Important Notes
In case you wish to host a different app on the same port sometimes browser cache will serve you the previously hosted web app on that specific port. To overcome this you have two options.
- Clear browser cache
- Host the app on a different port
Conclusion
We learned how to host a Flutter app on our local network using Python’s http package. We also learned how we can host our web app on different ports. That’s it for this post, For more Flutter content please consider checking out the rest of the website. All of the content on this website is educational and free.
