The original

App development is no longer all about writing code. Multiple languages, architectures, and environments make app development more complex and expensive to maintain.

Dokcer helps simplify and speed up the development process, providing the freedom to choose tools and maintain a variety of different development environments for each project.

This article will explore how Docker can simplify the development process of Flutter app.

Advantages of using Docker

There are countless advantages to using Docker containers. Here are just a few of the most important ones:

  • If you upgrade your system (or use a friend’s computer), you will have to manually download all the relevant compilation tools to build the Flutter app. Docker can skip the manual configuration process. Just download the Dockerfile from your Github (save the relevant build configuration) and run it. Compiling, testing, and debugging the Flutter app only need to wait for the Docker container to download and run.
  • Thoroughly forgetIt's running fine on my computerThe Dokcer container uses the same Dockerfile, and all tools are identical at runtime, regardless of which cloud service platform or operating system you are currently running on.
  • Docker containers are lightweight and portable because they don’t require a separate operating system. Compared to virtual machines, the resource requirements of this architecture vary with the load of dependencies and start up quickly.
  • It is scalable and does not require an operating system to be installed in a Docker container. Unlike virtual machines that need to apply for permanent resources.

What is a Docker container

A Docker container image is a lightweight, stand-alone collection of executable software packages containing everything you need to run an application (code, runtime, system tools, system libraries, and related configurations). It becomes a Docker container when running on a Docker engine.

See more about Docker containers and the difference between containers and virtual machines

Configuration docker

First download the docker engine corresponding to the operating system.

Note: Using Docker on Windows requires hardware accelerated virtualization to be turned on in the BIOS. Check out the related discussion on StackOverflow.

Make sure docker works properly after installation (macOS and Linux use terminals, Windows use PowerShell).

docker --version
Copy the code

The docker version number installed for the current operating system will then be displayed

Docker version 19.03.8, build afacb8b
Copy the code

Docker can be tested by using the following command (the hello-world image will be downloaded from DokcerHub)

docker run hello-world
Copy the code

If it is the first time, the following information is displayed

Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
ca4f61b1923c: Pull complete
Digest: sha256:ca0eeb6fb05351dfc8759c20733c91def84cb8007aa89a5bf606bc8b315b9fc7
Status: Downloaded newer image for hello-world:latest
Hello from Docker!
This message shows that your installation appears to be working correctly.
...
Copy the code

If you are a Linux user, you need to give root permission in order to use it in the VS Code environment. Create docker groups to add users.

As follows:

Create a Docker group

sudo groupadd docker
Copy the code

2. Add users to the docker group

sudo usermod -aG docker $USER
Copy the code

3. In Linux, run the following command to activate the group

newgrp docker
Copy the code

4, verify that no sudo can run docker command

docker run hello-world
Copy the code

See the official Guide for post-Installation Linux operations

Configuration VS Code

Next, the Docker container will be accessed from the VS Code environment so that the Flutter directory can be accessed directly from VS Code. This will simplify the Flutter development process

  • Download the VS Code
  • Download and install two VS Code plug-ins
    • docker
    • Remote Development

Create a Docker container

Create the flutter_docker directory

mkdir flutter_docker
Copy the code

2. Use VS Code to open this directory

code flutter_docker
Copy the code

Create Dockerfile. 4. Add the following content to Dockerfile

FROM ubuntu:18.04

# Pre-requirements
RUN apt update && apt install -y curl git unzip xz-utils zip libglu1-mesa openjdk-8-jdk wget

# Set a new user
RUN useradd -ms /bin/bash developer 
USER developer
WORKDIR /home/developer

Prepare android directories and system variables
RUN mkdir -p Android/sdk
ENV ANDROID_SDK_ROOT /home/developer/Android/sdk
RUN mkdir -p .android && touch .android/repositories.cfg

# Set up android SDK
RUN get -O sdk-tools.zip https://dl.google.com/android/repository/sdk-tools-linux-4333796.zip
RUN unzip sdk-tools.zip && rm sdk-tools.zip
RUN mv tools Android/sdk/tools
RUN cd Android/sdk/tools/bin && yes | ./sdkmanager --licenses
RUN cd Android/sdk/tools/bin && ./sdkmanager "build-tools; 29.0.2" "sources; android-29"
ENV PATH "$PATH:/home/deveoper/Android/sdk/platform-tools"

Download the Flutter SDK
RUN git clone https://github.com/flutter/flutter.git
ENV PATH "$PATH:/home/developer/flutter/bin"

# test flutter
RUN flutter doctor
Copy the code

Json file. 6. Add the following content to devContainer.

{
    "name": "flutter_docker"."context": "."."dockerFile": ".. /Dockerfile"."remoteUser": "developer"."mounts": [
        "source=/dev/bus/usb,target=/dev/bus/usb,type=bind"]."settings": {
        "terminal.integrated.shell.linux": null
    },
    "runArgs": ["--privileged"]."extensions": ["dart-core.flutter"]."workspaceMount": "source=${localWorkspaceFolder}/workspace,target=/home/developer/workspace,type=bind,consistency=delegated"."workspaceFolder":"/home/developer/workspace"
}
Copy the code

Note: macOS and Windows users cannot access the USB port using the mounts attribute. Do not define this property in devContainer.json, or it will cause the Docker container to fail to build. More on that later.

7. Add the workspace folder to the root directory. This folder will be used to store content created by the Flutter project inside the Docker container.

You can now build the run container in the VS Code environment. Before we do that, let’s take a look at Dockerfile and devContainer.json.

Of course you can use the official team-maintained Flutter Docker images, such as Cirrusci/Flutter

Understand Dockerfile

Dockerfile is a text file that contains the commands used by the user to package the image on the command line. Docker can automatically build the image by reading the Dockerfile instructions.

This build process is implemented by the Docker daemon, not the CLI.

The Dokcerfile we defined will download and install all the necessary tools needed to develop Flutter Apps.

Before using the RUN command, all the necessary packages were downloaded and installed via apt.

  • curl git unzip xz-utils zip libglu2-mesaFlutter SDK relies on
  • openjdk-8-jdkThe Android SDK relies on
  • wgetTo download certainAndroid tools

3. Add the non-root user developer, set it to the current user, and change the current working folder to the home directory

RUN useradd -ms /bin/bash developer
USER developer
WORKDIR /home/developer
Copy the code

4. Create the Android SDK installation directory. Set the ANDROID_SDK_ROOT environment variable used by flutter

RUN mkdir -p Android/sdk
ENV ANDROID_SDK_ROOT /home/developer/Android/sdk
RUN mkdir -p .android && touch .android/repositories.cfg
Copy the code

5. Download the latest SDK tools. Unzip and move to the correct folder. Then use sdkManager to accept the Android License and download it. Finally, add the ADB path.

I specifically specified API29 here, or you can specify other Versions of Android if you want to use them.

RUN wget -O sdk-tools.zip https://dl.google.com/android/repository/sdk-tools-linux-4333796.zip RUN unzip sdk-tools.zip && rm sdk-tools.zip RUN mv tools Android/sdk/tools RUN cd Android/sdk/tools/bin && yes | ./sdkmanager --licenses RUN cd Android/sdk/tools/bin && ./sdkmanager "build-tools; 29.0.2 "" patcher. v4" "platform-tools" "platforms; android-29" "sources; android-29" ENV PATH "$PATH:/home/developer/Android/sdk/platform-tools"Copy the code

Clone the Flutter from github repository and add the PATH environment variable to the Flutter command.

RUN git clone https://github.com/flutter/flutter.git
ENV PATH "$PATH:/home/developer/flutter/bin"
Copy the code

7. Finally run the flutter doctor command to download the Dart SDK to check that the flutter is correctly configured.

RUN flutter doctor
Copy the code

Understand devcontainer. Json

Devcontainer.json tells VS Code how to access (or create) a development environment with defined tools and runtime stacks.

Visit here for more information

The properties we use in devContainer.json are as follows:

  • Name: indicates the name of the container
  • Context: docker relative todevcontainer.jsonThe working directory for the file build.
  • DockerFile: The location of a dockerFile, relative todevcontainer.jsonFile.
  • RemoteUser: The user name to be used in the container
  • Mounts: a mount point group that is added to a container while it is running. Here we put/dev/bus/usbMount so that the container can detect any Android device linked to the system (macOS and Windows are not available)
  • Settings: Adds to the container/machine specified Settings filesettings.jsonValue.
  • RunArgs: Valid Docker arguments,string array. use--priviglegedYou can ensure that containers can access devices linked to your system.
  • Extensions: Specifies the array of extension ids that should be installed when the container is created.dart-code.flutterFlutter is an official expansion of flutter development.
  • WorkspaceMount: Overrides the default mount workspace locally
  • WorkspaceFolder: The default path that VS Code should open when linking to a container.

See more devcontianer.json properties here

Build running Docker containers

If you have installed the Remote Development plug-in for VS Code, you will see the icon displayed in the lower left corner of the VS Code window.

1. Click the icon

2. Select the pop-up option remote-containers: Open Folder in Container

3. Select the root directory that contains the Dockerfile(among other Settings) container to open and start building the Docker container. This takes a little time, as it needs to download and configure all the tools for the container.

When the build is complete, the bash terminal of the Docker container will be opened automatically.

To start developing

First run the Flutter Doctor to verify that all configurations are correct.

You may see yellow alerts next to Android Studio and Connected Device.

Android Studio’s warning is that we have not installed the Flutter and DART plug-ins. Since we’re developing with VS Code, we can ignore it.

Connected device alert because we are not Connected to the device.

Important: The following steps only apply to Linux operating systems that can be accessed via a USB port on an Android device. If it’s macOS or Windows, you can skip it.

Now connect android devices via USB ports.

Set PTP or file transfer connection mode on your phone.

You won’t see the yellow alert when you run it again.

If you do not see a green check, it may be a problem with adb on the current system. Adb must be connected. ADB daemons running on mobile phones cannot connect to two ADB Servers at the same time. So on the current system, run the following command to disconnect ADB from ADB kill-server. Now you should be able to connect to the device through ADB in docker.

Create a FLUTTER project using Flutter Create Demo.

The Demo project will be created in the Workspace directory.

Go to this directory and run

cd demo
flutter run
Copy the code

This will run the Flutter app directly from the Docker container on the connected phone.

MacOS and Windows developers

MacOS and Windows developers cannot access the phone from the Docker container via the USB port. So access is only possible by establishing a wireless connection with the phone via TCP/IP.

Adb must be installed on the operating system. Adb is in the Android SDK platform-tools directory, remember to set the PATH variable, and then connect to the phone, start debugging mode.

1. List the devices currently connected

adb devices
Copy the code

2. Enable the wireless connection

Adb tcpIP 555 ADB Connect 192.168.0.5:5555 ADB DevicesCopy the code

Replace the IP address with the wifi address connected to the phone. Note: the phone and computer must be on the same LOCAL area network.

3, disconnect the USB connection of the phone, and then run ADB Devices to verify whether the device is still connected.

5. Run ADB Devices on the terminal in the docker container to verify whether the device is accessible. An empty list is displayed. 6

Adb Connect 192.168.0.5:5555 ADB DevicesCopy the code

The IP address and port should be the same as the one connected to the computer. Also be sure to open the allow USB debug window that pops up on your phone

7. If unauthorized is available, do as follows

Adb kill-server ADB Connect 192.168.0.5:5555 ADB DevicesCopy the code

This makes unauthorized visits disappear.

8, flutter doctor

conclusion

Docker can help simplify the Flutter application development process and ensure a consistent development process.

github