Flutter仿WhatsApp应用Null Safety错误解决求助

问题根源分析 #

你的代码存在三个核心问题导致空安全报错：

1. 语法命名错误：Chat Model类名、is group/current message变量名带空格，违反Dart驼峰命名规范，导致构造函数与变量无法匹配。
2. 缺失成员变量：chatpage组件未定义chatModel属性，直接调用widget.chatModel!.name会因变量不存在触发空安全错误。
3. 可空变量未处理：ChatModel的name设为可空类型，强制解包!存在空值崩溃风险。

分步修复方案 #

1. 修正ChatModel类（规范命名+空安全优化）

将联系人名称设为必填非空字段（符合业务逻辑，联系人必须有名称），修正所有命名错误：

class ChatModel {
  String name; // 非空必填，避免空安全问题
  String? icon;
  bool? isGroup;
  String? time;
  String? currentMessage;

  ChatModel({
    required this.name, // 用required标记必填参数
    this.icon,
    this.isGroup,
    this.time,
    this.currentMessage,
  });
}

2. 修复聊天页面（添加必要参数/列表遍历）

根据页面类型分两种场景处理：

场景1：单个聊天详情页（接收指定联系人数据）

给chatpage添加必填的ChatModel参数，直接使用非空的name字段：

class ChatPage extends StatefulWidget {
  final ChatModel chatModel; // 定义必填参数

  const ChatPage({super.key, required this.chatModel});

  @override
  State<ChatPage> createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          widget.chatModel.name, // 直接使用非空name
          style: const TextStyle(
            fontSize: 18.5,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      // 其他页面内容
    );
  }
}

场景2：聊天列表页（遍历联系人列表）

用ListView.builder遍历chats列表，直接获取每个ChatModel的name：

class ChatListPage extends StatefulWidget {
  const ChatListPage({super.key});

  @override
  State<ChatListPage> createState() => _ChatListPageState();
}

class _ChatListPageState extends State<ChatListPage> {
  List<ChatModel> chats = [
    ChatModel(
      name: "Ahmed omar",
      icon: "person.svg",
      isGroup: false,
      time: "10:00",
      currentMessage: "Hi Ahmed"),
    ChatModel(
      name: "Hussien Mohamed",
      icon: "person.svg",
      isGroup: true,
      time: "10:00",
      currentMessage: "Hi everyone"),
    // 其他联系人数据
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: chats.length,
        itemBuilder: (context, index) {
          final chat = chats[index];
          return ListTile(
            title: Text(
              chat.name,
              style: const TextStyle(
                fontSize: 18.5,
                fontWeight: FontWeight.bold,
              ),
            ),
            // 其他列表项内容（头像、时间、消息预览等）
          );
        },
      ),
    );
  }
}

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