Docker部署Flutter Web应用主题颜色异常问题及解决

问题概述 #

使用Docker部署Flutter Web应用时，主题颜色显示异常，但本地构建运行时显示正常。

相关代码 #

main.dart #

Future<void> main() async {
  ConfigManager().init();
  Stripe.publishableKey = Config.publishableKey;
  Stripe.merchantIdentifier = 'merchant.flutter.stripe.test';
  await Stripe.instance.applySettings();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      initialRoute: Payment.routeName,
      routes: <String, WidgetBuilder>{
        Payment.routeName: (_) => const Payment(),
      },
    );
  }
}

原Dockerfile #

#Stage 1 - Install dependencies and build the app
FROM debian:latest AS build-env

# Install flutter dependencies
RUN apt-get update
RUN apt-get install -y curl git wget unzip libgconf-2-4 gdb libstdc++6 libglu1-mesa fonts-droid-fallback lib32stdc++6 python3
RUN apt-get clean

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

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

# Run flutter doctor
RUN flutter doctor -v
# Enable flutter web
RUN flutter config --enable-web

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

# Stage 2 - Create the run-time image
FROM nginx:1.21.1-alpine
COPY --from=build-env /app/build/web /usr/share/nginx/html

效果对比 #

• 期望效果：
  
• 实际效果：
  

本地Flutter版本 #

解决方案 #

感谢@Ankush Chavan的帮助，问题已解决。核心原因是原Dockerfile直接克隆Flutter仓库使用最新版本，与本地Flutter版本不一致，导致构建产物出现差异。通过FVM固定Flutter版本，统一本地和容器内的构建环境，解决了颜色显示异常问题。

更新后的Dockerfile #

#Stage 1 - Install dependencies and build the app
FROM dart:3.1.0 as build-env

ARG FVM_VERSION=2.4.1

RUN apt-get update --quiet --yes
RUN apt-get install --quiet --yes \
    unzip \
    apt-utils

RUN dart pub global activate fvm $FVM_VERSION
RUN fvm install 3.13.1
RUN fvm global 3.13.1
ENV PATH="/root/fvm/default/bin:${PATH}"
# Run flutter doctor
RUN flutter doctor -v
# Enable flutter web
RUN flutter config --enable-web

# 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:1.21.1-alpine
COPY --from=build-env /app/build/web /usr/share/nginx/html
COPY nginx.conf /etc/nginx/
EXPOSE 8080
CMD ["nginx", "-g", "daemon off;"]

内容的提问来源于stack exchange，提问作者Harikrishnan R