Flutter Web构建后UI样式与开发版本不一致问题求助

用Flutter构建Web应用后，按钮及部分组件样式与开发版本存在差异，但手动定义按钮的具体属性后样式恢复正常。推测可能存在默认属性无法读取的问题，相关信息如下：

Dockerfile配置 #

RUN flutter clean
RUN flutter pub get
RUN flutter build web --no-tree-shake-icons --dart-define=PROFILE=prod

版本对比截图 #

• 开发版本：
  
• 部署版本：
  

MaterialApp调用代码 #

Widget build(BuildContext context) {
return BlocProvider(
    create: (context) => authenticationBloc,
    child: BlocBuilder<AuthenticationBloc, AuthenticationState>(
      bloc: authenticationBloc,
      buildWhen: (previous, current) =>
          current is AuthenticationAuthenticated ||
          current is AuthenticationUnauthenticated,
      builder: (context, state) {
        if (state is AuthenticationInitial) {
          return const Center(
            child: CircularProgressIndicator(),
          );
        }
        return MaterialApp.router(
            title: profile?.config()["title"],
            theme: theme(),
            debugShowCheckedModeBanner: false,
            routerConfig: AppRoutes.routes);
      },
    ));
}

排查方向 #

• 检查theme()函数实现：确认生产环境下是否因PROFILE=prod环境变量的影响，导致主题中的默认组件样式（如按钮的颜色、形状、内边距等）未正确赋值，比如主题逻辑中存在环境分支但生产分支未正确设置默认值。
• 验证构建优化影响：尝试添加--no-minify参数重新构建（flutter build web --no-tree-shake-icons --no-minify --dart-define=PROFILE=prod），排查是否是代码压缩导致主题或组件默认样式的引用被误删。
• 检查资源加载情况：查看主题中是否依赖自定义字体、图标或其他资源，确认这些资源在生产构建后是否被正确打包，且在部署环境中能正常加载——资源缺失会导致组件样式降级为基础样式，和开发版本产生差异。
• 对比环境变量逻辑：确认开发环境和生产环境中PROFILE变量的取值是否一致，排查是否因环境变量差异导致组件样式逻辑触发了错误分支。
• 检查浏览器控制台：部署后打开浏览器开发者工具，查看是否有样式加载失败、资源404等报错，这些问题可能直接导致组件样式异常。

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