How to create a Flutter Linux Mobile Application that runs with the help of a CGI program at the Backend?

Task 11 ??

?? Team Task ??

?Description: Till date whatever we have learned in Flutter, is need to be implemented in some way integrating other technologies with it

?Hint :1. Create attractive GUI

2.Make sure you implement other technologies if possible

3.Show your creativity (Optional: Animations, Responsive UI, DB connection, etc.)

?? Note: This is a compulsory team task

So let’s start……..

In this article, I have discussed how we can create a Flutter application with the help of the CGI Program at the Backend. Initially, we need to create a main function which is necessary to create in flutter so that every connection page with the main function will run simultaneously. Then we'll connect the pages with the main function so that the user can navigate from one page to another using the navigate push and pop functions support by the flutter.

Now first we'll create the main function according to the look and feel as per the user requirements by providing simpler and clean visuals so that the User Experience gets enhanced while using the application. So the main function code is as follows:

Here, actually, we've designed the main function of the Application which will be the main screen view in mobile according to the user experience requirements, and then we've connected defined the basic functions and then its classes both the stateless and stateful widgets which will create the widgets accordingly in our Applications. But stateful widget is used as we need to make the button "Command Terminal" functional and it should navigate the user to the input page where the further commands will be taken from the user. The look and feel of the main page or main function according to the code is:

So till now we've created the main page or main function and have connected the main function with the input page where the user will enter the command in the terminal. So the input page where the input will be taken from the user is:

Now, on the input page, we basically have taken input from the user by using a widget (to get the desired widget and to connect with the next page we have imported the required libraries in flutter) known as a sized box and we have used hint text to make the user experience better as it'll help the user and the user will enter the required command here. Other than that I have used some Elevated buttons and changed their looks and feel to make the user experience better and have connected with the next page i.e. output page using onpressed function in the flutter where I have used the Navigator push method to connect with the output page. The Input page according to the above page is as follows:

Now we have created the input page as well with the help of the required widget and next, we'll make an output page that will be connected with the input page and the output page will only help to fetch the output from the CGI server which is running on my local VM in my system. So, the output page is as follows:

The output page is helping the user to get connected with the Backend CGI server with the help of the HTTP function.

Note: To connect with the Backend CGI server we need 3 things:

1. IP of the CGI server
2. the location or the path of the CGI file
3. Lastly, we need to pass a variable that will take the input from the user and will store the command and then this variable will help the CGI program to fetch the command which is given by the user and the CGI program will finally return the output and then that output will be displayed to the user.

Also, while developing this code I have used some special Plugins for Flutter which after installing gives VS code the capability to support handle, and manage the HTTP functions and their requests as in our case the Application is connected to my local CGI server via an HTTP webserver.

Now, the output page and the testing of the Flutter Mobile Application is as follows:

So, as we can see from the above testing I conclude that on this Mobile Application we can run any kinds of commands which are supported by Linux. Not only after installing some packages just like we do in Linux we can do the same here on this Application as well and can execute the commands of any kind of software whether it might be the command related to Hadoop, python, Docker, AWS, and much more...

For making this Application work I have also created a local CGI program that was working on my Virtual Machine and was running as a Backend server for me. The backend program is as follows:

Here, while making this CGI program I have imported 2 modules from the python library i.e. subprocess and CGI module as shown above. I have also used the getoutput method to run the command given by the user in the flutter Application. Also, I used getvalue command to fetch the command given by the user.

This was the last task in this Summer Research Intern journey and I'm very thankful to all my mates who were supportive and helped me a lot to troubleshoot the issues which I was facing during the task but solving and troubleshooting is the most favorite part of mine as we get to know and learn a lot while troubleshooting the issues. I would like to thank LinuxWorld for conducting such a great Program and special thanks to my Guru, my Life Mentor, and my whole sole Mr. Vimal Daga sir who is also known by the name world Record holder. Thank you so much sir for those great teachings and really I learned a lot during this Journey. Thanks a lot, sir for the things which you are doing for us and for helping India to become future-ready. I'm very lucky and feeling blessed to be trained under your mentorship!

Thanks a lot for Reading the Article! Hope this article brings a clearer idea to you all!

Thanks a lot for stopping by...