Flutter App Integration with Docker

In this blog going to create a flutter app where you can run any Linux or Docker commands

1. Create attractive GUI

2.Make sure you implement other technologies if possible

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

So, let’s integrate Flutter with Docker:

#Concepts Used:

• Basic knowledge of Dart, Flutter, OOPS.
• Python CGI
• Launching Apache Server

#Service provided:

• Creation of Docker Container inside the RedHat8.
• Information regarding docker.

NOTE: →We created CGI in RHEL8 .

→I launched the Apache server using:

# systemctl start httpd

Firstly I used the concept of 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.

I also added a button on pressing which will take us to the next page . But for that you have to write the name of the service you want to use in the text field provided.

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().

Now, for creating the second page I used “ import ‘package:http/http.dart’; “ package to use the Python-CGI code written in the backend server. And for making this package executable I added “ http: ^0.13.3 “ to my app dependencies.

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.23.7", "/cgi-bin/app1.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:

So, after performing all the above-specified steps , I have completed my Task_11 successfully.