Reading time: < 1 minute
Hello, today we’re going to see how to use 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
