Docker App

So, let’s integrate Flutter with Docker:

  • Basic knowledge of Dart, Flutter, OOPS.
  • Python CGI
  • Launching Apache Server
  • Creation of Docker Container inside the RedHat8.
  • Information regarding docker.

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

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

Uri.http("192.168.1.9", "/cgi-bin/app1.py", {"x": cmd, "y": name});
import 'package:flutter/material.dart';import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';import 'package:http/http.dart' as http;String containername, osname, version, port, volume, network;String imagename, pullversion;String x;one() async {var url ='http://192.168.1.9/cgi-bin/web.py?x=$containername&y=$osname&z=$version';var resp = await http.get(url);print(resp.body);}net() async {var url ='http://192.168.1.9/cgi-bin/net.py?CN=$containername&NET=$network&OSN=$osname&VSN=$version';var resp = await http.get(url);print(resp.body);}forport() async {var url ='http://192.168.1.9/cgi-bin/port.py?CN=$containername&PORT=$port&OSN=$osname&VSN=$version';var resp = await http.get(url);print(resp.body);}forvolume() async {var url ='http://192.168.1.9/cgi-bin/vol.py?CN=$containername&VOL=$volume&OSN=$osname&VSN=$version';var resp = await http.get(url);print(resp.body);}volnet() async {var url ='http://192.168.1.9/cgi-bin/vol_net.py?CN=$containername&VOL=$volume&NET=$network&OSN=$osname&VSN=$version';var resp = await http.get(url);print(resp.body);}portnet() async {var url ='http://192.168.1.9/cgi-bin/port_net.py?CN=$containername&PORT=$port&NET=$network&OSN=$osname&VSN=$version';var resp = await http.get(url);print(resp.body);}volport() async {var url ='http://192.168.1.9/cgi-bin/vol_port.py?CN=$containername&VOL=$volume&PORT=$port&OSN=$osname&VSN=$version';var resp = await http.get(url);print(resp.body);}volnetport() async {var url ='http://192.168.1.9/cgi-bin/vol_net_port.py?CN=$containername&VOL=$volume&NET=$network&PORT=$port&OSN=$osname&VSN=$version';var resp = await http.get(url);print(resp.body);}web(imagename, pullversion) async {var url ='http://192.168.1.9/cgi-bin/pulll.py?image=$imagename&version=$pullversion';var response = await http.get(url);print(response.body);}appdocker() {print("container launched");}mydocker() {FlutterStatusbarcolor.setStatusBarColor(Colors.blue[900]);var forCMD = Container(width: double.infinity,height: double.infinity,decoration: BoxDecoration(image: DecorationImage(image: AssetImage('images/8.JPG'), fit: BoxFit.cover)),child: SingleChildScrollView(scrollDirection: Axis.vertical,child: Column(children: <Widget>[SizedBox(height: 40),Container(width: 300,decoration: BoxDecoration(color: Colors.white70,borderRadius: BorderRadius.circular(20.7),border: Border.all(color: Colors.black87,width: 2,),),child: TextField(onChanged: (value) {x = value;},autocorrect: false,style: TextStyle(fontSize: 22.0, color: Colors.black),textAlign: TextAlign.center,decoration: InputDecoration(focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.black26),borderRadius: BorderRadius.circular(25.7),),enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.red),borderRadius: BorderRadius.circular(25.7),),hintText: "Docker Command",prefixIcon: Icon(Icons.tablet_android),fillColor: Colors.black),),),SizedBox(height: 40),FlatButton(onPressed: () {appdocker();},child: Container(decoration: BoxDecoration(color: Colors.blueAccent,borderRadius: BorderRadius.circular(10),border: Border.all(color: Colors.black87,width: 2,),),child: Text('Run Command', style: TextStyle(fontSize: 35)),),),],),),);var newbody = Container(width: double.infinity,height: double.infinity,decoration: BoxDecoration(image: DecorationImage(image: AssetImage('images/12.png'), fit: BoxFit.cover)),child: SingleChildScrollView(scrollDirection: Axis.vertical,child: Column(children: <Widget>[SizedBox(height: 40),Container(width: 300,decoration: BoxDecoration(color: Colors.white70,borderRadius: BorderRadius.circular(20.7),border: Border.all(color: Colors.black87,width: 2,),),child: TextField(onChanged: (value) {imagename = value;},autocorrect: false,style: TextStyle(fontSize: 22.0, color: Colors.black),textAlign: TextAlign.center,decoration: InputDecoration(focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.black26),borderRadius: BorderRadius.circular(25.7),),enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.red),borderRadius: BorderRadius.circular(25.7),),hintText: "Image",prefixIcon: Icon(Icons.tablet_android),fillColor: Colors.black),),),SizedBox(height: 40),Container(width: 300,decoration: BoxDecoration(color: Colors.white70,borderRadius: BorderRadius.circular(25.7),border: Border.all(color: Colors.black87,width: 2,),),child: TextField(onChanged: (value) {pullversion = value;},autocorrect: false,style: TextStyle(fontSize: 22.0, color: Colors.black),textAlign: TextAlign.center,decoration: InputDecoration(focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.black26),borderRadius: BorderRadius.circular(25.7),),enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.red),borderRadius: BorderRadius.circular(25.7),),hintText: "Version",prefixIcon: Icon(Icons.tablet_android),fillColor: Colors.black),),),SizedBox(height: 40),FlatButton(onPressed: () {web(imagename, pullversion);},child: Container(decoration: BoxDecoration(color: Colors.greenAccent,borderRadius: BorderRadius.circular(10),border: Border.all(color: Colors.black87,width: 2,),),child: Text('Pull Image', style: TextStyle(fontSize: 35)),),),],),),);var mybody = Container(width: double.infinity,height: double.infinity,decoration: BoxDecoration(image: DecorationImage(image: AssetImage('images/10.png'), fit: BoxFit.fill)),child: SingleChildScrollView(scrollDirection: Axis.vertical,child: Column(children: <Widget>[SizedBox(height: 40),Container(width: 300,decoration: BoxDecoration(color: Colors.white70,borderRadius: BorderRadius.circular(25.7),border: Border.all(color: Colors.black87,width: 2,),),child: TextField(onChanged: (value) {containername = value;},autocorrect: false,style: TextStyle(fontSize: 22.0, color: Colors.black),textAlign: TextAlign.center,decoration: InputDecoration(focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.black26),borderRadius: BorderRadius.circular(25.7),),enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.red),borderRadius: BorderRadius.circular(25.7),),hintText: "Container Name",prefixIcon: Icon(Icons.tablet_android),fillColor: Colors.black),),),SizedBox(height: 40),Container(width: 300,decoration: BoxDecoration(color: Colors.white70,borderRadius: BorderRadius.circular(25.7),border: Border.all(color: Colors.black87,width: 2,),),child: TextField(onChanged: (value) {osname = value;},autocorrect: false,style: TextStyle(fontSize: 22.0, color: Colors.black),textAlign: TextAlign.center,decoration: InputDecoration(focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.black26),borderRadius: BorderRadius.circular(25.7),),enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.red),borderRadius: BorderRadius.circular(25.7),),hintText: "Image name",prefixIcon: Icon(Icons.tablet_android),fillColor: Colors.black),),),SizedBox(height: 40),Container(width: 300,decoration: BoxDecoration(color: Colors.white70,borderRadius: BorderRadius.circular(25.7),border: Border.all(color: Colors.black87,width: 2,),),child: TextField(onChanged: (value) {version = value;},autocorrect: false,style: TextStyle(fontSize: 22.0, color: Colors.black),textAlign: TextAlign.center,decoration: InputDecoration(focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.black26),borderRadius: BorderRadius.circular(25.7),),enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.red),borderRadius: BorderRadius.circular(25.7),),hintText: "Version",prefixIcon: Icon(Icons.tablet_android),fillColor: Colors.black),),),SizedBox(height: 40),Container(width: 300,decoration: BoxDecoration(color: Colors.white70,borderRadius: BorderRadius.circular(25.7),border: Border.all(color: Colors.black87,width: 2,),),child: TextField(onChanged: (value) {port = value;},autocorrect: false,style: TextStyle(fontSize: 22.0, color: Colors.black),textAlign: TextAlign.center,decoration: InputDecoration(focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.black26),borderRadius: BorderRadius.circular(25.7),),enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.red),borderRadius: BorderRadius.circular(25.7),),hintText: "Port Number",prefixIcon: Icon(Icons.tablet_android),fillColor: Colors.black),),),SizedBox(height: 40),Container(width: 300,decoration: BoxDecoration(color: Colors.white70,borderRadius: BorderRadius.circular(25.7),border: Border.all(color: Colors.black87,width: 2,),),child: TextField(onChanged: (value) {volume = value;},autocorrect: false,style: TextStyle(fontSize: 22.0, color: Colors.black),textAlign: TextAlign.center,decoration: InputDecoration(focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.black26),borderRadius: BorderRadius.circular(25.7),),enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.red),borderRadius: BorderRadius.circular(25.7),),hintText: "Attach Volume",prefixIcon: Icon(Icons.tablet_android),fillColor: Colors.black),),),SizedBox(height: 40),Container(width: 300,decoration: BoxDecoration(color: Colors.white70,borderRadius: BorderRadius.circular(25.7),border: Border.all(color: Colors.black87,width: 2,),),child: TextField(onChanged: (value) {network = value;},autocorrect: false,style: TextStyle(fontSize: 22.0, color: Colors.black),textAlign: TextAlign.center,decoration: InputDecoration(focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.black26),borderRadius: BorderRadius.circular(25.7),),enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.red),borderRadius: BorderRadius.circular(25.7),),hintText: "Network",prefixIcon: Icon(Icons.tablet_android),fillColor: Colors.black),),),SizedBox(height: 40),FlatButton(onPressed: () => {if (port == "none" && volume == "none" && network == "none"){one(),}else if (port == "none" && volume == "none"){net(),}else if (port == "none" && network == "none"){forvolume(),}else if (volume == "none" && network == "none"){forport(),}else if (port == "none"){volnet(),}else if (volume == "none"){portnet(),}else if (network == "none"){volport(),}else{volnetport(),}},child: Container(decoration: BoxDecoration(color: Colors.blueAccent,borderRadius: BorderRadius.circular(10),border: Border.all(color: Colors.black87,width: 2,),),child: Text('Run Container', style: TextStyle(fontSize: 35)),),),SizedBox(height: 60)],),),);// margin: EdgeInsets.all(20),// color: Colors.blue,// child: Text('second'),return MaterialApp(debugShowCheckedModeBanner: false,home: DefaultTabController(length: 3,child: Scaffold(appBar: PreferredSize(preferredSize: Size.square(90),child: AppBar(title: Center(child: Text('docker',style: TextStyle(fontSize: 50),),),backgroundColor: Colors.lightBlue,leading: Image.asset("images/9.png"),bottom: TabBar(labelColor: Colors.white,unselectedLabelColor: Colors.white30,unselectedLabelStyle: TextStyle(fontSize: 10),tabs: [Tab(child: Container(child: Text('Run', style: TextStyle(fontSize: 23)),),),Tab(child: Container(child: Text('Pull', style: TextStyle(fontSize: 23)),),),Tab(child: Container(child: Text('CMD', style: TextStyle(fontSize: 23)),),),],),),),/*appBar: AppBar(backgroundColor: Colors.white,title: Center(child: Text('Audio Player', style: TextStyle(color: Colors.black)),)),*/body: TabBarView(children: <Widget>[mybody,newbody,forCMD,])),),);}

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

(from:Kinesis)-[:VIA_SPARK]->(to:Neo4j)

How to ace Dynamic Programming in competitions

Migrating from Jabber to Cisco Webex Teams, but have Slack Users?

Migrating from Jabber to Cisco Webex Teams roadmap

Cost of Failure

Product Nerding with Annie Dunham

Profit Sharing Tokens: A new incentivization mechanism for an open web

Enable gVisor based container sandboxing in a Tanzu Kubernetes Grid Cluster

Making an entangled state of 001/010/110 or 0001/0010/0100/1000 on quantum computing

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ishita Mittal

Ishita Mittal

More from Medium

Flutter Basics

Flutter Challenge — Flutter Puzzle Hack

Using Hive In Your Flutter Mobile Project

Task Manager App using Flutter with persistent Data Storage — Part 1