Hello, today we’re going to see how we can use a Docker Compose to run Flutter in the web browser of the host machine where Docker is running.
The first thing we’re going to do is create the docker-compose.yml file and add this 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_path:/home/mobiledevops/app
- /tmp/.X11-unix:/tmp/.X11-unix
networks:
- docker-network
networks:
docker-network:
driver: bridge
external: true
The APP in Flutter or APP directory is located at ./app_path.
The flutter_arm file is inside ./Dockerfile, we create it and add this 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 dependencies libgl1-mesa-dev and libgtk-3-dev, which are necessary to run Flutter in web mode.
Now, to run the web, we’ll need to do the following:
- Bring up the docker:
docker compose up -d
2Install the dependencies:
docker exec -it flutter flutter pub get
3. Build for the web:
docker exec -it flutter flutter build web
4. Launch the web in debug mode.
flutter run -d web-server --web-port 8080
