How to Dockerize, Automate the Build and Deployment Process for Flutter?

This is the 5th article of our “How to” series.

For the uninitiated, we are a bunch of developers who is very well known as DevOps solution providers and loves to write code, sharing knowledge. During our webinar, one of the students asks as a lot of stuff regarding the deployment process of Docker. And we thought let’s write some articles about it.

We have done 4 different articles based on Android, Python(Django), .NET (MVC), and PHP. If you want to read on how to Dockerize .NET(MVC) then Click Here. And for more tech posts check out our blog section.

So, Let’s dive into solving the question: How exactly we should Dockrize, automate the build and deployment process for Flutter?

Here are several things that you need for sure during the process:

• Dockerfile and Docker container
• Devcontainer

Now let’s go step by step for building and deployment process for Flutter:

1. Setup the Docker and Docker container:

Now, It may sound cliche for some developers but we think that It is an important step. Many times even our experts have done mistakes like this where one forgets some initial settings and we put our efforts into rewriting the codes. So, Setup code and confirm if your docker generates the below line:

Docker version
Docker version 19.04.08


Now as you are done with Docker’s basic setup let’s create a docker container. Below are the basic steps to set up a docker container:

1. Create a folder and give an appropriate name like Flutter project_docker.

2. Open this folder in VS Code (VS means Visual Studio Code) below is the code of doing just that:

CODE FLUTTER PROJECT_DOCKER


3. Now make a “Dockerfile”
docker file is nothing but a simple text language that can build a docker image with a pack of the required dependencies based on the command written in the Dockerfile.

4. Create basic codes within docker like prerequisites, new user run, flutter SDK.
These are very basic codes that you could find anywhere on the internet.

5. Create a different folder name .DEVTRAINER and after it does create a folder name DEVCONTAINER.JSON

6. Add the docker flutter folder to this new folder. But be careful while doing that. Specifically to Mac and Windows users please don’t define the folder inside devcontainer.json If you would do that system tells you that the docker container build fails.

7. Create a folder and give an appropriate name. This folder is used for creating different codes and your flutter projects. In simple words, this is your Workspace.

2. Run Docker container:

Here are the steps to run the docker container:

1. Due to the VS Code, we already installed the remote development extension. You can see the icon below the left side of your screen. Click on it in order to enable that icon.

2. Select the option called “remote container: open folder in a container
Now go to the root dictionary and select the docker file click “open” to build the container.

3. Run Flutter:

First of all, run the below command in order to verify that the process until we have done is working properly:

FLUTTER DOCKER


Probably some of you may see the yellow signs having exhaullary marks beside android studio and connected device;

1st is for dart plugins that we haven’t done because we don’t need them. Why that so? Because we already installed VS code.

2nd is as we have not connected any devices with our laptop.

Now connect your phone (Android device) using the USB port. And set up the connection of the PTP file.

Once again, use docker flutter code to see that we are done with the queries.

Now, In order to create and run projects of flutter run the command,

FLUTTER DOCKER XYZ


Xyz represents the name of your project. And so you can do your work (creating your project) from here on.

So, that’s it guys, this is a simple procedure for how one could be able to create and deploy the process of Dockerization within Flutter Mobile App Development. We will bring the next article on cost-cutting using the help of Docker and Kubernetes. So stay tuned and follow us.