Docker App

So, let’s integrate Flutter with Docker:

#Concepts Used:

  • 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:

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

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’ “; .

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,])),),);}

--

--

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