Flutter in Docker-How to build and use a Flutter development environment inside a Docker container

1.First of all

We will show you how to build a Flutter development environment in a Docker container (Ubuntu 20.04 LTS this time) and build an environment similar to that developed on a Host PC from a Host PC with macOS or Linux OS. By using this mechanism, you can build a development environment remotely (server) and access it from your local PC to develop Flutter apps.

Flutter in Docker overview

(Supplement) I have not tried this time, but in principle, the Android version (operation on the emulator using Aundroid Studio) should be able to operate in the Docker container.

Advantages of Docker containerization (example)

• Easy to duplicate / delete the development environment, and the same environment can be distributed to third parties
• Convenient for CI / CD if the environment is made into a Docker container
• It does not depend on the OS (Linux or macOS), and it is possible to check the operation in environments other than Android / iOS.

Target (Host PC) environment

• macOS
• Linux OS (Basically any distribution is OK as long as it is a 64-bit Linux environment running Flutter and Docker)

2. Docker installation

I will omit the installation method of Docker itself, but basically it is okay if you follow the procedure on the official website.

• macOS: Install Docker Desktop on Mac
• Linux (Ubuntu): Install Docker Engine on Ubuntu

3. Create a Docker container image

This section describes the procedure for creating a Docker container image. The OS (rootfs) in the Docker container is Ubuntu 20.04. This time, I will not use the Dockerfile, but will explain everything manually.

Get Ubuntu 20.04 image (rootfs)

$ docker pull ubuntu:20.04

Start Docker container

Start the Docker container with the following command and enter the container. Basically, without security (--privileged), you can access with the same privileges as the OS of the Host PC.

In addition, since the parameters specified here are also used in the Docker-compose configuration file described later, please execute with these settings first.

$ docker run -it --name flutter-docker ¥
     --privileged -h flutter -u root -w /root ¥
     --add-host=flutter:127.0.1.1 --net=host ubuntu:20.04

If there is no problem, the prompt changes to # and the operation is switched to the operation inside the Docker container. For example, if you type the ʻuname` command, you will see that you are on a Linux OS.

# root@flutter:~# uname -a
Linux flutter 4.19.76-linuxkit #1 SMP Tue May 26 11:42:35 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux

Installation of necessary tools

Install the required packages for Ubuntu OS inside the Docker container. When installing xserver-xorg, you will be asked for locale and keyboard information, but that's fine (US if safe).

# apt update
# apt install git unzip clang xserver-xorg pkg-config libgtk-3-dev curl cmake ninja-build

Install Chrome browser (if needed)

# apt install wget gnupg
# sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
# wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
# apt update
# apt-get install google-chrome-stable

Reference: https://qiita.com/pyon_kiti_jp/items/e6032eb6061a4774aece

Install Flutter SDK

Git clone the Flutter SDK and place it under / opt.

# https://github.com/flutter/flutter.git
# mv flutter /opt/

Save container image

This is the end of all the work in the container. So it will come out of the container.

# exit

Save the created container as a Docker image file. Since the parameters specified here are also used in the Docker-compose configuration file described later, please execute with these settings first.

$ docker commit flutter-docker flutter-docker/ubuntu:latest

4. Host PC settings (only for macOS)

Since the GUI application in the Docker container runs on the X11 protocol, it is necessary to transfer the screen of the GUI application to the X11 server on the Host PC side. In the case of macOS, there is XQuartz as the X11 server on the Host side, so install and use it.

Install XQuartz

$ brew cask install xquartz

Reboot the Host PC. After rebooting, make sure the DISPLAY environment variable is set as follows:

$ echo $DISPLAY
/private/tmp/com.apple.launchd.NagCeWDLYl/org.macosforge.xquartz:0

Allow access from X11 clients in Docker containers.

$ xhost +$(hostname)
$ xhost + local:root

Launch XQuartz from the command line or LaunchPad.

5. Host PC settings (for Linux OS only)

In the case of Linux OS, I think that it is the X11 default in most cases, so I will only do the following.

$ xhost + local:root

6. VS Code environment construction

Install VS Code and Extensions etc. to use Docker container from VS Code.

VS Code installation

Please install by referring to the following.

• Linux (Ubuntu): https://qiita.com/yoshiyasu1111/items/e21a77ed68b52cb5f7c8
• macOS: https://qiita.com/watamura/items/51c70fbb848e5f956fd6

VS Code Extensions installation

Install the following three Extensions.

7. Create a Docker Compose file

In order to use the Flutter SDK in the Docker container from VS Code, create the Docker Compose and the VS Code Extensions Remote Development configuration file you just installed. The created file is placed at https://github.com/Kurun-pan/flutter-docker, so please use it according to the Host OS (Linux or macOS).

$ mkdir flutter_docker
$ cd flutter_docker

Create two files under the current directory (flutter_docker): the docker-compose.yml file and the .devcontainer / devcontainer.json file.

When Host OS is macOS

The point was to set host.docker.internal: 0 in the DISPLAY environment variable, but it didn't work, so the {write your host name !!} part specifies the macOS hostname. please. .. If anyone knows the right way, please let me know.

https://github.com/Kurun-pan/flutter-docker/tree/master/macos

docker-compose.yml

version: "3"
services:
    flutter:
        image: flutter-docker/ubuntu:latest
        working_dir: /root/workspace
        command: sleep infinity
        environment:
            - HOME=/root
            - no_proxy=127.0.0.1,localhost
            #- DISPLAY="host.docker.internal:0"
            - DISPLAY={write your host name!!}:0
        volumes:
            - ~/.gitconfig:/home/root/.gitconfig
            - ./:/root/workspace
            - ~/.Xauthority:/root/.Xauthority
        network_mode: "host"
        extra_hosts:
            - flutter:127.0.1.1

json:.devcontainer/devcontainer.json

{
    "name": "Flutter docker",
    "dockerComposeFile": [
        "../docker-compose.yml",
    ],
    "service": "flutter",
    "remoteUser": "root",
    "remoteEnv": {
        "QT_X11_NO_MITSHM": "1",
        "PATH": "/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/opt/flutter/bin",
    },
    "settings": {
        "terminal.integrated.shell.linux": null
    },
    "runArgs": [
        "--privileged",
        "-P",
    ],
    "extensions": ["dart-code.flutter"],
    "workspaceMount": "source=${localWorkspaceFolder}/workspace,target=/root/workspace,type=bind,consistency=delegated",
    "workspaceFolder": "/root/workspace"
}

When Host OS is Linux

For Linux OS, bind-mount / dev / dri to make DRM (DRI) available to Flutter apps in Docker containers with OpenGL.

https://github.com/Kurun-pan/flutter-docker/tree/master/linux

docker-compose.yml

version: "3"
services:
    flutter:
        image: flutter-docker/ubuntu:latest
        working_dir: /root/workspace
        command: sleep infinity
        environment:
            - HOME=/root
            - no_proxy=127.0.0.1,localhost
        volumes:
            - ~/.gitconfig:/home/root/.gitconfig
            - ./:/root/workspace
            - /tmp/.X11-unix:/tmp/.X11-unix
        devices:
            - /dev/dri:/dev/dri
        network_mode: "host"
        extra_hosts:
            - flutter:127.0.1.1

Inherit the DISPLAY environment variable of the Host OS.

json:.devcontainer/devcontainer.json

{
    "name": "Flutter docker",
    "dockerComposeFile": [
        "../docker-compose.yml",
    ],
    "service": "flutter",
    "remoteUser": "root",
    "remoteEnv": {
        "QT_X11_NO_MITSHM": "1",
        "DISPLAY": "${localEnv:DISPLAY}",
        "XAUTHORITY": "/tmp/.X11-unix",
        "PATH": "/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/opt/flutter/bin",
    },
    "settings": {
        "terminal.integrated.shell.linux": null
    },
    "runArgs": [
        "--privileged",
        "-P",
    ],
    "extensions": ["dart-code.flutter"],
    "workspaceMount": "source=${localWorkspaceFolder}/workspace,target=/root/workspace,type=bind,consistency=delegated",
    "workspaceFolder": "/root/workspace"
}

8. Run Flutter in Docker

VS Code launch

Launch VS Code in the directory where docker-compose.yml exists.

$ code .

Open VSCode Remote Container

Click the > < part at the bottom left of the window, or open the command palette with shift + alt + p and selectRemote-containers: Open Folder in Container ....

Click Open.

A terminal opens at the bottom of the VS Code window. The target of this terminal operation is the created Docker container image (flutter-docker / ubuntu: latest).

Flutter sample app project creation

From here, run the following command in the VS Code terminal (Docker container) to run the Flutter sample app.

# flutter config --enable-linux-desktop
# flutter config --enable-web
# mkdir sample
# cd sample
# flutter create .

Run the Flutter sample app

Sample app for Linux Desktop

# flutter run -d linux

In addition to executing commands, you can open the dart source code with VS Code and execute apps or debug using breakpoints by GUI operation.

Sample app for Web

Please wait for a while as it is being supported. ..

# flutter run -d chrome