Flutter中SQFlite数据库数据已加载但无法显示的问题

问题描述 #

使用SQFlite本地数据库，数据已成功加载并打印（打印内容：[{id: 1, username: sara, email: sara3@gmail.com, weight: 180, height: 180, gender: Female, age: 2023-12-12T00:00:00.000}]），但界面Text组件仅显示空白，无报错信息。

核心问题分析 #

1. 数据库字段与Model映射不匹配：数据库中存储的字段是username，但UserModel的属性是userName，且fromMap方法中尝试读取json['userName']，而数据库返回的键是username，导致userName始终为null，最终Text显示空白。
2. FutureBuilder中数据访问方式错误：getDatabaseModelWithId()返回的是UserModel?对象，不是Map，但代码中用user['username']的Map方式访问属性，无法正确取到值。

修复步骤 #

1. 修正UserModel的字段映射 #

修改UserModel的fromMap方法，将userName的映射改为读取数据库中的username字段：

final String? id;
final String? userName;
final String? email;
final String? age;
final int? weight;
final int? height;
final String? gender;

const UserModel({
  this.id,
  this.userName,
  this.email,
  this.age,
  this.weight,
  this.height,
  this.gender,
});

// 修正fromMap方法，读取数据库的username字段赋值给userName
factory UserModel.fromMap(Map<String, dynamic> json) => UserModel(
      id: json['id'].toString(), // 数据库id为整数类型，转String避免类型错误
      userName: json['username'] as String?,
      email: json['email'] as String?,
      age: json['age'] as String?,
      weight: json['weight'] as int?,
      height: json['height'] as int?,
      gender: json['gender'] as String?,
    );

Map<String, dynamic> toMap() => <String, dynamic>{
      'id': id,
      'userName': userName,
      'email': email,
      'age': age,
      'weight': weight,
      'height': height,
      'gender': gender,
    };

2. 修正FutureBuilder中数据访问方式 #

因为snapshot.data是UserModel对象，需用对象属性访问方式，同时添加空值兜底：

FutureBuilder<UserModel?>(
  future: databaseHelper?.getDatabaseModelWithId(),
  builder: (context, AsyncSnapshot<UserModel?> snapshot) {
    final user = snapshot.data;
    if (snapshot.hasData && user != null) {
      return Row(
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                user.userName ?? '未知用户', // 空值兜底避免空白
                style: GoogleFonts.poppins(
                  textStyle: const TextStyle(
                      color: Colors.white,
                      letterSpacing: .5,
                      fontSize: 32),
                ),
              ),
              const SizedBox(height: 5),
              Text(
                now,
                style: GoogleFonts.poppins(
                  textStyle: const TextStyle(
                      color: Colors.white38,
                      letterSpacing: .5,
                      fontSize: 15),
                ),
              ),
            ],
          )
        ],
      );
    } else {
      return const Text("加载中或无数据");
    }
  },
),

3. 额外优化提示 #

• 数据库id如果是整数类型，转换为String后再赋值给Model的id属性，避免类型转换异常。
• 给Text组件添加空值兜底文本，便于调试时快速识别字段为空的情况。

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