Flutter + Docker: The Fastest Way to Build Web & Android Apps

---

Flutter + Docker: The Fastest Way to Build Web & Android Apps

Whether you're setting up a CI/CD pipeline or onboarding to a new project, reducing complexity is always a win. The Flutter-Docker repository provides a simple way to build and test web (and Android) applications without the hassle of setting up dependencies manually.

Use Case 1: Quickly Onboard to a New Project

When joining a new project, the first thing you want to do is see what it looks like. But setting up the right environment, installing dependencies, and configuring tools can take time. In many cases, you might just need to ask your teammate what software version they are using, and that’s all you need to explore the project. If luck favors you, the latest version might even work out of the box.

Fastest Way to Run a New Project

With this Docker setup, you don’t need to install anything on your system. In just two commands, you can preview the web version of any project. You might just have to ask your teammate what Flutter version they are using, and that’s all you need to explore the project. If luck favors you, the latest Flutter version might even work for you.

1. Pull the Docker image:

   docker pull ghcr.io/iarunsaragadam/flutter-web-builder:latest

1. Build the project in a container:

   docker run --rm -v "$PWD":/app -w /app ghcr.io/iarunsaragadam/flutter-web-builder:latest

1. Serve the built web application using Nginx:

   docker run --rm -v "$PWD"/build/web:/usr/share/nginx/html -p 8080:80 nginx

Now, simply open http://localhost:8080, and you’re instantly running the built web project—without installing any dependencies!

Use Case 2: Streamline Your CI/CD Pipeline

One of the biggest challenges in software deployment is ensuring consistent build environments. Software versions, dependencies, and local configurations can all introduce inconsistencies in the CI/CD process.

How Docker Helps

• Reduce Setup Time: No need to manually install dependencies on CI/CD machines.
• Ensure Consistency: The Docker image guarantees that the build runs the same way across different environments.
• Simplify Commands: With a single Docker command, you can automate the build process.

How to Integrate in CI/CD

To build a web application within a CI/CD pipeline, simply use:

docker run --rm -v "$PWD":/app -w /app ghcr.io/iarunsaragadam/flutter-web-builder:latest flutter build web

For Android builds:

docker run --rm -v "$PWD":/app -w /app ghcr.io/iarunsaragadam/flutter-android-builder:latest flutter build apk

These commands clean the project, fetch dependencies using flutter pub get, and then proceed with the build—ensuring a fully automated and reproducible pipeline.

Sample CI/CD Pipelines (Not Tested)

GitHub Actions Pipeline

name: Flutter Docker Build

on: [push, pull_request]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Build Flutter Web with Docker
        run: |
          docker run --rm -v "$PWD":/app -w /app ghcr.io/iarunsaragadam/flutter-web-builder:latest flutter build web

      - name: Serve Build with Nginx
        run: |
          docker run --rm -v "$PWD"/build/web:/usr/share/nginx/html -p 8080:80 nginx

Azure DevOps Pipeline

trigger:
  - main

pool:
  vmImage: 'ubuntu-latest'

steps:
  - checkout: self

  - script: |
      docker run --rm -v "$(Build.SourcesDirectory)":/app -w /app ghcr.io/iarunsaragadam/flutter-web-builder:latest flutter build web
    displayName: 'Build Flutter Web with Docker'

  - script: |
      docker run --rm -v "$(Build.SourcesDirectory)/build/web":/usr/share/nginx/html -p 8080:80 nginx
    displayName: 'Serve Build with Nginx'

Disclaimer: These pipeline configurations are provided as a starting point and have not been tested. Please modify them as needed for your specific project.

What About iOS?

Unfortunately, iOS builds cannot be done using this Docker-based approach. Apple requires iOS applications to be built and signed on macOS using Xcode. This means that to build iOS applications, you'll need access to a macOS machine or a macOS-based CI/CD service like GitHub Actions (macOS runners) or Codemagic.

Why This Matters

• Saves Time: Skip dependency setup and run a new project instantly.
• Reduces Errors: Avoid environment-related issues by running builds in a consistent Docker container.
• Improves CI/CD Pipelines: Automate and streamline web and Android builds with minimal effort.

Conclusion

Whether you’re automating builds in a CI/CD pipeline or quickly previewing a new project without installing anything, Flutter-Docker is a powerful tool to simplify your workflow. With just a few Docker commands, you can avoid setup headaches and focus on what really matters—building great applications.

Comments

[Soujanya Vemu]

Fantastic guide! This approach using Docker with Flutter is a game-changer for developers looking to streamline their build process across multiple platforms. Can’t wait to try this out in my projects. Thanks for sharing this valuable insight!