Reading Time: < 1 minute
Hello, today we are going to see how we can use Docker Compose to run Flutter in the web browser of the host machine where Docker is running.
The first thing we are going to do is create the docker-compose.yml file and add the following content:
version: "3.1"
services:
flutter:
build:
context: ./Dockerfile
dockerfile: flutter_arm
restart: unless-stopped
container_name: flutter
environment:
- DISPLAY=host.docker.internal:0
ports:
- 8080:8080
volumes:
- ./ruta_app:/home/mobiledevops/app
- /tmp/.X11-unix:/tmp/.X11-unix
networks:
- docker-network
networks:
docker-network:
driver: bridge
external: true
In ./ruta_app, you will find the Flutter app or the app directory.
The flutter_arm file is located inside ./Dockerfile, create it and add the following content (even though it says arm, it works on a non-arm machine):
FROM ubuntu:latest
RUN apt-get update && \
apt-get install -y curl git wget unzip libgl1-mesa-dev libgtk-3-dev
RUN git clone --depth=1 --branch=stable https://github.com/flutter/flutter.git /usr/local/flutter
ENV PATH="/usr/local/flutter/bin:/usr/local/flutter/bin/cache/dart-sdk/bin:${PATH}"
RUN flutter channel stable && flutter upgrade
RUN flutter config --enable-web
WORKDIR /home/mobiledevops/app
# Keep the container running
CMD ["tail", "-f", "/dev/null"]
In this Dockerfile, we have added the installation of the libgl1-mesa-dev and libgtk-3-dev dependencies, which are necessary to run Flutter in web mode.
Now, to run the web version, follow these steps:
- Start the Docker container:
docker-compose up -d
2. Install the dependencies:
docker exec -it flutter flutter pub get
3. Build the web version:
docker exec -it flutter flutter build web
4. Launch the web version in debug mode.
flutter run -d web-server --web-port 8080
The Docker Compose container for running Flutter in a web browser on the host machine where Docker is running. In this tutorial, we will learn how to set up a Docker Compose environment to run Flutter applications and access them from the web browser of the host machine.
The first step is to create a docker-compose.yml file with the following content:
version: "3.1"
services:
flutter:
build:
context: ./Dockerfile
dockerfile: flutter_arm
restart: unless-stopped
container_name: flutter
environment:
- DISPLAY=host.docker.internal:0
ports:
- 8080:8080
volumes:
- ./app_directory:/home/mobiledevops/app
- /tmp/.X11-unix:/tmp/.X11-unix
networks:
- docker-network
networks:
docker-network:
driver: bridge
external: true
In the ./app_directory, you should place your Flutter app or the app directory.
The flutter_arm file is located inside the ./Dockerfile directory. Create the file and add the following content (even though it says “arm,” it will work on non-arm machines):
FROM ubuntu:latest
RUN apt-get update && \
apt-get install -y curl git wget unzip libgl1-mesa-dev libgtk-3-dev
RUN git clone --depth=1 --branch=stable https://github.com/flutter/flutter.git /usr/local/flutter
ENV PATH="/usr/local/flutter/bin:/usr/local/flutter/bin/cache/dart-sdk/bin:${PATH}"
RUN flutter channel stable && flutter upgrade
RUN flutter config --enable-web
WORKDIR /home/mobiledevops/app
# Keep the container running
CMD ["tail", "-f", "/dev/null"]
In this Dockerfile, we have added the installation of the necessary dependencies such as libgl1-mesa-dev and libgtk-3-dev to run Flutter in web mode.
To run the web version, follow these steps:
- Start the Docker container:
docker-compose up -d
2. Install the dependencies:
docker exec -it flutter flutter pub get
3. Build the web version:
docker exec -it flutter flutter build web
4. Launch the web version in debug mode:
flutter run -d web-server --web-port 8080
