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. スクリーンショット 2020-07-30 22.15.09.png

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.

image.png

Advantages of Docker containerization (example)

Target (Host PC) environment

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.

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. スクリーンショット 2020-07-31 0.41.31.png

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.

VS Code Extensions installation

Install the following three Extensions.

スクリーンショット 2020-07-30 23.44.14.png スクリーンショット 2020-07-30 20.25.05.png スクリーンショット 2020-07-30 20.25.30.png

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. スクリーンショット 2020-07-30 23.50.29.png

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 .... スクリーンショット 2020-07-31 0.26.14.png

Click Open. スクリーンショット 2020-07-31 0.26.54.png

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). スクリーンショット 2020-07-31 0.29.10.png

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 .
スクリーンショット 2020-07-31 0.31.24.png

Run the Flutter sample app

Sample app for Linux Desktop

# flutter run -d linux
スクリーンショット 2020-07-31 0.47.26.png

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. スクリーンショット 2020-07-31 1.22.16.png

Sample app for Web

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

# flutter run -d chrome

Recommended Posts

Flutter in Docker-How to build and use a Flutter development environment inside a Docker container
[Django] Use VS Code + Remote Containers to quickly build a Django container (Docker) development environment.
How to use Docker to containerize your application and how to use Docker Compose to run your application in a development environment
How to run a Django application on a Docker container (development and production environment)
Build a Docker environment that can use PyTorch and JupyterLab
[Django] Build a Django container (Docker) development environment quickly with PyCharm
Use WebDAV in a Portable Docker environment
[DynamoDB] [Docker] Build a development environment for DynamoDB and Django with docker-compose
How to make a container name a subdomain and make it accessible in Docker
Build a C language development environment with a container
[Python] Build a Django development environment with Docker
Use the Kaggle API inside a Docker container
Build a Minecraft plugin development environment in Eclipse
Build a development environment using Jupyter and Flask with Python in Docker (supports both VS Code / code-server)
Build a PYNQ environment on Ultra96 V2 and log in to Jupyter Notebook
How to build a Django (python) environment on docker
I want to easily build a model-based development environment
[Go + Gin] I tried to build a Docker environment
How to build a development environment for TensorFlow (1.0.0) (Mac)
Build a Docker container and save png from altair
Build a development environment with Poetry Django Docker Pycharm
Build a lightweight Fast API development environment using Docker
Build a Django development environment with Docker! (Docker-compose / Django / postgreSQL / nginx)
Pros and cons of converting Django's development environment to Docker
[Memo] Build a development environment for Django + Nuxt.js with Docker
Build a Python development environment in Eclipse (add HTML editor)
Build a Python environment and transfer data to the server
Build Docker environment (Linux 8) and start Apache HTTP Server container
How to build a python2.7 series development environment with Vagrant
Build a Flask development environment at low cost using Docker
Put Jupyter and Docker Compose on your Chromebook and use it as a light development environment!
How to delete a Docker container
How to build a LAMP environment using Vagrant and VirtulBox Note
Build and try an OpenCV & Python environment in minutes using Docker
I want to create a pipfile and reflect it in docker
Create a simple Python development environment with VS Code and Docker
Learn how to use Docker through building a Django + MySQL environment
Learning history to participate in team application development with Python ~ Build Docker / Django / Nginx / MariaDB environment ~
I made a Docker container to use JUMAN ++, KNP, python (for pyKNP).
After buying a new Mac, use pyenv + poetry to build a Python environment.
Easily build a development environment with Laragon
How to debug a Python program by remotely connecting to a Docker container in WSL2 environment with VS Code
Method to build Python environment in Xcode 6
How to build a sphinx translation environment
I wanted to use jupyter notebook with docker in pip environment (opticspy)
I want to build a Python environment
How to use PyCharm with Glue development endpoints running inside a VPC
Build a CentOS Linux 8 environment with Docker and start Apache HTTP Server
Connect to postgreSQL from Python and use stored procedures in a loop.
[Linux] Build a jenkins environment with Docker
How to use tensorflow under docker environment
I tried to build a Mac Python development environment with pythonz + direnv
Introduction to docker Create ubuntu environment in ubuntu
How to use is and == in Python
Build Linux on a Windows environment. Steps to install Laradock and migrate
[Linux] Build a Docker environment with Amazon Linux 2
Build a Python + bottle + MySQL environment with Docker on RaspberryPi3! [Trial and error]
Use libsixel to output Sixel in Python and output a Matplotlib graph to the terminal.
A complete guidebook to using pyenv, pip and python in an offline environment
Build a python environment to learn the theory and implementation of deep learning
Build a TensorFlow development environment on Amazon EC2 with command copy and paste