Flutter使用Supabase查询用户名返回格式异常无法正确显示

显示异常和拿不到纯用户名由两个错误导致：

• Supabase 表查询默认返回数组结构的结果，即使按主键ID匹配仅存在1条记录，返回值也是[{字段名: 值}]格式的数组，直接对整个结果调用toString()会输出完整结构文本，无法提取单独的用户名。
• getUsername是异步返回的Future方法，直接在字符串插值里写'$getUsername'时，Dart不会等待异步执行完成，而是直接把函数对象本身转成字符串，最终显示的是函数实例的默认文本，和查询结果没有关系。

第一步：重构查询方法，直接返回纯用户名 #

给方法加上明确的返回类型，使用Supabase提供的single()转换器直接获取单条记录的Map结构，直接提取username字段，同时做空安全兜底：

Future<String> getUsername() async {
  final user = supabase.auth.currentUser;
  if (user == null) return "未登录";
  final response = await supabase
      .from("profiles")
      .select("username")
      .eq("id", user.id)
      .single() // 单条匹配时直接返回Map结构，无需手动取数组下标
      .execute();
  // 提取username字段，空值时返回兜底文本
  return response.data['username']?.toString() ?? "未设置用户名";
}

第二步：使用FutureBuilder等待异步结果再渲染文本 #

异步方法不能直接传入Text组件，需要通过FutureBuilder监听异步任务状态，等结果返回后再渲染用户名文本，替换原来的Text代码如下：

child: FutureBuilder<String>(
  future: getUsername(),
  builder: (context, snapshot) {
    // 查询加载中显示占位
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const Text("加载中...", style: TextStyle(fontSize: 14));
    }
    // 查询出错显示兜底提示
    if (snapshot.hasError) {
      return const Text("加载失败", style: TextStyle(fontSize: 14));
    }
    // 拿到纯用户名后正常显示
    return Text(
      snapshot.data ?? "",
      style: const TextStyle(fontSize: 14),
    );
  },
)

优化提示：如果页面存在频繁重建的场景，建议在State的initState生命周期里提前调用getUsername()并把结果Future存到变量里，再传给FutureBuilder的future参数，避免每次重建都重复触发数据库查询。

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