Flutter en contenedor Docker Compose para ejecutar en navegador web

Tiempo de lectura: < 1 minuto

Hola, hoy vamos a ver cómo podemos utilizar un Docker Compose para ejecutar Flutter en el navegador web de la máquina anfitriona dónde se ejecuta Docker.

Lo primero que vamos a hacer es crear el archivo docker-compose.yml y añadir este contenido:

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

En ./ruta_app está la APP en Flutter o directorio de APP.

El archivo flutter_arm está dentro de ./Dockerfile, lo creamos y añadimos este contenido (aunque ponga arm, funciona en una máquina no arm):

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

#Mantener el contenedor en ejecucion

CMD ["tail", "-f", "/dev/null"]

En este Dockerfile, hemos agregado la instalación de las dependencias libgl1-mesa-dev y libgtk-3-dev, que son necesarias para ejecutar Flutter en modo web.

Ahora, para ejecutar la web tendremos que hacer lo siguiente:

1. Levantamos el docker:

docker compose up -d

2. Instalamos las dependencias:

 docker exec -it flutter flutter pub get

3. Compila al web:

docker exec -it flutter flutter build web

4. Lanza la web en debug.

flutter run -d web-server --web-port 8080