🎯SUMMER TASK-11 🎯

BUILDING DOCKER APP USING FLUTTER:-

TASK11 DESCRIPTION:-

♦️ Team Task ♦️

⚡Till date whatever we have learnt 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)

Firstly I used the Python-CGI to act as the back-end server:-

I have written this in python, so that the user can interact with CLI internally and fetch the output on web-page.

Hereby, is the code for python-CGI:-

Now comes the most exciting part that was to create the Frontend, look and feel or the interface of the App.

Now for writing any code in dart language and finally making it executable I used the “material.dart” package so make it simpler for me do write the code. So for imprting the package I used the command : “ import ‘package:flutter/material.dart’ “; .

For creating the App I created a Stateless widget Class and used the MaterialApp() widget and as the child of the widget I used Scaffold, and inside the body of the Scaffold I used the container widget to give the appearance to my desired app.

Inside Container all the properties of the app are comprised by me, whether its the Text widget, TextField(), Image(), Circle Avatar() ,etc and I have also used some more small woidgets that gave the final touch to the first/ home page of my app, some of which were SizedBox(), BoxDecoration(), TextStyle(), and much more.

After creating the look and feel of my home page , I used the concept of Page Navigation to move from one page to another page of my app and to accomplish this I used the widget MaterialPageRoute() and to make this run I used Navigator.push() which will enable me to reach to the next page of my app. And I also saved the entire widget tree in a variable called “context”, so that I can easily navigate through the pages of the app.

So, after doing all the above specified things I can move to the next page by typing the name of the service in the text field , and clicking the “SERVICE” TextButton().

I created a Stateful widget class so that anything that comes from the backend and needs to be changed on the fly , can be displayed on the app screen.

Mainly in the second page I kept two TextField() of enter the name and image, button to send the input to the backend, FloatingActionButton() to move back to the home page and one info icon floating button to give information about Docker . On pressing the “OUTPUT” button the name and image of the container was sent to the backend using the command given below.

Uri.http(“192.168.56.110”, “/cgi-bin/main.py”, {“x”: cmd, “y”: name});

Then after the creation of the container with the given name and image I needed to display the confirmation message that came from the backend in the front end I used “$” with the variable in which the message from the backend was saved.

And finally, the facility of this app was that on clicking the info icon FloatingActionButton(), it can also show the ModalBottomSheet using showModalBottomSheet() and building the sheet using the builder which will show the information regarding “ What is a Docker “.

So the output on clicking the info icon FloatingActionButton() is as below:

Thanks for reading✨