Containerizing Flutter web apps with Docker with ubuntu for mac silicon

4 min readFeb 25, 2023

I was recently doing flutter web app development. But it took me lot of time to docker build , more precisely lot of time it took me to figure out what I was doing wrong.

I was using my MacBook Pro with Mac Silicon (arm64) chip.

I was facing 3 types of issues,

1. Error containing Compilation to SkSL failed. Similar to below one.

Compilation to SkSL failed.
/...../flutter/packages/flutter/lib/src/material/sh
aders/ink_sparkle.frag: GLSL to SPIRV failed; Compilation error. 3 error(s) and
1 warning(s).

This was due to the version of flutter .

2. Error containing si_signo=Segmentation fault(11), si_code=1, si_addr=(nil). Similar to below one.

#14 2.390 ===== CRASH =====
#14 2.390 si_signo=Segmentation fault(11), si_code=1, si_addr=(nil)
#14 2.390 version=2.19.2 (stable) (Tue Feb 7 18:37:17 2023 +0000) on "linux_x64"
#14 2.391 pid=8, thread=51, isolate_group=main(0x400318a000), isolate=main(0x40031ea800)
#14 2.391 os=linux, arch=x64, comp=no, sim=no3.

This happened when I was trying a very popular docker image cirrusci/flutter from https://hub.docker.com/r/cirrusci/flutter. this was caused because this docker image is based on OS/ARCH => linux/amd64

And I was using MacBook with ARCH => arm64. That was causing the error.

3. Error containing Ensure you have network connectivity and then try again. Similar to below one.

#10 47.06 Downloading Material fonts...                                       37ms
#10 47.10 Downloading Material fonts...                                       17ms
#10 47.13 Failed to download https://storage.googleapis.com/flutter_infra_release/flutter/fonts/3012db47f3130e62f7cc0beabff968a33cbec8d8/fonts.zip. Ensure you have network connectivity and then try again.
#10 47.13 HandshakeException: Connection terminated during handshake

If you are having similar challenge then you are in the right place.

Solution

I have overcome all the issues, and made a docker image in docker hub.

https://hub.docker.com/repository/docker/therdm/flutter_ubuntu_arm/general

We will be using that image in this solution.

You need to create a default.conf file, in the project root folder.

and paste following code there.

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    root /usr/share/nginx/html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # redirect server error pages to the static page /50x.html
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

next create a Dockerfile file, in the project root folder.

and paste following code there.

# Stage 1 - Install dependencies and build the app
FROM therdm/flutter_ubuntu_arm:latest AS builder

# Copy files to container and build
RUN mkdir /app
COPY . /app
WORKDIR /app
RUN flutter pub get
RUN flutter build web

# Stage 2 - Create the run-time image
FROM nginx:stable-alpine AS runner

COPY default.conf /etc/nginx/conf.d
# COPY package.json /usr/share/nginx/html
COPY --from=builder /app/build/web /usr/share/nginx/html

If you are using ARCH => amd64
Then Instead of
# Stage 1 - Install dependencies and build the app
FROM therdm/flutter_ubuntu_arm:latest AS builder
you can use the below one.
# Stage 1 - Install dependencies and build the app
FROM cirrusci/flutter:latest AS builder
I have not tested it. but it should work.

Done. now just run this Dockerfile with following command

or you can use full

FROM ubuntu:20.04 AS builder

RUN apt-get update
RUN apt-get install -y bash curl file git unzip xz-utils zip libglu1-mesa
RUN apt-get clean

 #Clone the flutter repo
RUN git clone https://github.com/flutter/flutter.git /usr/local/flutter

 #Set flutter path
 #RUN /usr/local/flutter/bin/flutter doctor -v
ENV PATH="/usr/local/flutter/bin:/usr/local/flutter/bin/cache/dart-sdk/bin:${PATH}"

 #Change stable channel
RUN flutter channel stable

 #Enable web capabilities
RUN flutter config --enable-web
RUN flutter upgrade
RUN flutter pub global activate webdev

RUN flutter doctor -v

# Copy files to container and build
RUN mkdir /app
COPY . /app
WORKDIR /app
RUN flutter pub get
RUN flutter build web

# Stage 2 - Create the run-time image
FROM nginx:stable-alpine AS runner

COPY default.conf /etc/nginx/conf.d
# COPY package.json /usr/share/nginx/html
COPY --from=builder /app/build/web /usr/share/nginx/html