Flutter页面突发黑红显示异常求助

正常界面效果 #

当前异常界面 #

StallInfo组件昨晚显示正常，现在仅呈现黑红界面。已在多台设备测试，移除右侧logo图片后问题仍存在，且无任何异常抛出。

相关代码 #

import 'package:flutter/material.dart';
import 'package:nle_app/models/stall.dart';
import 'package:nle_app/constants/colors.dart';

class StallInfo extends StatelessWidget {
  final stall = Stall.generateRestaurant();
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(top: 40),
      padding: const EdgeInsets.symmetric(horizontal: 25),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    stall.name,
                    style: const TextStyle(
                      fontSize: 25,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 10),
                  Row(
                    children: [
                      Container(
                          padding: EdgeInsets.all(5),
                          decoration: BoxDecoration(
                            color: Colors.blueGrey.withOpacity(0.4),
                            borderRadius: BorderRadius.circular(5),
                          ),
                          child: Text(
                            stall.label,
                            style: const TextStyle(
                              color: Colors.white,
                            ),
                          )),
                      const SizedBox(
                        width: 10,
                      ),
                    ],
                  )
                ],
              ),
              ClipRRect(
                borderRadius: BorderRadius.circular(50),
                child: Image.asset(
                  stall.logoUrl,
                  width: 80,
                ),
              ),
            ],
          ),
          const SizedBox(
            height: 5,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                stall.desc,
                style: const TextStyle(fontSize: 16),
              ),
              Row(
                children: [
                  const Icon(
                    Icons.star_outline,
                    color: Colors.amber,
                  ),
                  Text(
                    '${stall.score}',
                    style: const TextStyle(
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(width: 15),
                ],
              )
            ],
          )
        ],
      ),
    );
  }
}

排查方向及解决建议 #

• 检查全局主题配置：黑红配色通常是Flutter默认错误主题或异常主题继承导致，检查项目根目录的MaterialApp组件，确认theme参数是否被错误修改，比如primarySwatch、backgroundColor等设置为黑红组合。
• 验证Stall数据有效性：Stall.generateRestaurant()生成的数据可能出现异常（如字段为空、乱码），临时替换为硬编码测试数据，看界面是否恢复正常：

  final stall = Stall(
    name: "测试餐厅",
    label: "中餐",
    desc: "美味家常菜",
    score: 4.5,
    logoUrl: "assets/images/test_logo.png"
  );
  

• 排查父组件影响：检查StallInfo所在的父容器是否设置了错误的背景色、文本样式，或通过InheritedWidget传递了异常的主题数据，导致子组件继承了错误的样式。
• 清理缓存重启项目：执行flutter clean清除编译缓存，再运行flutter pub get重新拉取依赖，最后重启项目，排除缓存损坏导致的渲染异常。
• 检查colors.dart文件：导入的constants/colors.dart是否被修改，里面的全局颜色常量是否被替换为黑红相关值，导致组件间接使用了错误颜色。

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