Flutter中根据变量值修改IconButton颜色及空值问题解决

错误根源 #

• 变量拼写错误：tatalLeave应为totalLeave，拼写错误可能导致变量未被正确赋值，触发空值问题。
• SQLite的SUM函数在表为空或无有效数据时返回null，countAllLeave直接返回该空值，赋值给变量后，UI中使用!强制非空断言触发错误。
• 仅在点击按钮时调用数据获取方法，页面加载初期变量可能处于未初始化状态。

具体修复步骤 #

1. 修正变量拼写错误

统一将所有tatalLeave改为totalLeave，避免因变量名错误导致的逻辑异常：

int? totalLeave = 0;

IconButton(
  onPressed: () {
    getTotalLeave();
  },
  icon: Icon(
    Icons.notifications_active_rounded,
    color: totalLeave ?? 0 >= 40 ? Colors.red : Colors.white,
    size: 30.0,
  ),
)

2. 处理SQLite查询的空值返回

在countAllLeave中，当SUM返回null时默认返回0，确保不会向下传递空值：

Future<int> countAllLeave() async { // 修改返回类型为非空int
  Database db = await database;
  final allLeave = Sqflite.firstIntValue(
      await db.rawQuery('SELECT SUM(num_leave_days) FROM leave_Details'));
  return allLeave ?? 0; // 空值时返回0
}

同步更新getTotalLeave的变量类型，避免接收空值：

// 获取总请假天数
getTotalLeave() async {
  int count = await DatabaseHelper.instance.countAllLeave(); // 移除?
  setState(() {
    totalLeave = count;
    print(totalLeave);
  });
}

3. 移除强制空断言，使用安全判断

现在totalLeave不会再为空，可直接进行数值判断：

Icon(
  Icons.notifications_active_rounded,
  color: totalLeave >= 40 ? Colors.red : Colors.white,
  size: 30.0,
)

4. 页面初始化时自动加载数据

在initState中调用getTotalLeave，确保页面加载时就获取最新数据：

@override
void initState() {
  super.initState();
  getTotalLeave(); // 初始化时触发数据查询
}

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