Integrating Docker with Flutter

In this Blog we will:-

1. Create attractive GUI

2. Make sure you implement other technologies if possible

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

#Concepts Used:

i) Basic knowledge of Dart, Flutter, OOPS.

ii) Python CGI

iii) Launching Apache Server

#Service provided:

1. Creation of Docker Container inside the RedHat8.

2. Information regarding docker.

NOTE: →We created CGI in RHEL8.

→We launched the Apache server using:

# systemctl start httpd

Firstly We used the concept of Python-CGI to act as the back-end server:

We have written this in python so that the user can interact with CLI internally and fetch the output on the 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 We used the “material. dart” package to make it simpler for us to write the code. So for importing the package We used the command: “ import ‘package: flutter/material.dart’ ”.

For creating the App We created a Stateless widget Class and used the MaterialApp() widget and as the child of the widget we used Scaffold, and inside the body of the Scaffold, We 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 We have also used some more small widgets 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, we used the concept of Page Navigation to move from one page to another page of my app, and to accomplish this We used the widget MaterialPageRoute() and to make this run we used Navigator. push() which will enable me to reach the next page of my app. And we also saved the entire widget tree in a variable called “context”, so that We can easily navigate through the pages of the app.

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

We 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 on the second page, we kept two TextField() or enter the name and image, a 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 were sent to the backend using the command given below.

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

Then after the creation of the container with the given name and image We needed to display the confirmation message that came from the backend in the front end we 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:

Successfully Compleated the final task of Summer Training

Thank You for Reading the blog hope it helped you..!