Flutter集成获取用户数据API异常：如何修复并在AppBar中展示用户头像与用户名

我来帮你排查并修复代码里的问题，你的getdata()方法和AppBar的实现有几个关键调整点，咱们一步步来改：

1. 修复Dio响应解析的问题 #

Dio发起GET请求后，response.data已经是自动解析完成的Map<String, dynamic>对象了，不需要再用json.decode(response.toString())二次解析——这会导致解析错误，因为把已经是Map的对象转成字符串再解码会出问题，直接用response.data即可。

2. 替换头像为网络图片 #

你当前用的是本地静态资源Image.asset，需要换成Image.network来加载API返回的头像链接，同时要处理加载中和加载失败的情况，提升用户体验。

3. 完善加载状态管理 #

你的isLoading变量已经定义，但没有在请求完成/失败后更新状态，会导致页面一直处于加载状态或者显示空内容。要在getdata()的try和catch块里都更新isLoading为false。

4. 优化AppBar布局结构 #

原来的Column布局会让头像和用户名上下排列，改成Row可以让它们横向对齐，更符合AppBar的常规布局。

修正后的完整代码 #

class Dashboard extends StatefulWidget { 
  const Dashboard({Key? key}) : super(key: key); 
  @override 
  State<Dashboard> createState() => _DashboardState(); 
} 
class _DashboardState extends State<Dashboard> { 
  bool dashboard = true; // 修正原变量名拼写错误
  bool isLoading = true; 
  String profilePicture = ''; 
  String username = ''; 

  @override 
  void initState() { 
    super.initState(); 
    loading(); 
  } 

  loading() async { 
    await getdata(); 
  } 

  getdata() async { 
    try { 
      // 直接使用Dio自动解析后的response.data
      final response = await Dio().get(BASE_API + "user/getUserById/" + (loginUserData["id"] ?? "")); 
      print("response: $response"); 
      
      setState(() { 
        // 若头像路径是相对地址，记得拼接BASE_API域名
        profilePicture = response.data['data']['image']; 
        username = response.data['data']['userName']; 
        isLoading = false; // 请求成功后更新加载状态
      }); 
    } catch (e) { 
      print("获取用户数据失败: $e"); 
      setState(() { 
        isLoading = false; // 请求失败也要更新加载状态
      }); 
    } 
  } 

  Widget appbar() { 
    return Padding( 
      padding: const EdgeInsets.only(top: 10), 
      child: isLoading ? 
        // 加载中占位符
        const Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            CircularProgressIndicator(color: Colors.white),
          ],
        ) :
        Row( 
          mainAxisAlignment: MainAxisAlignment.start, 
          crossAxisAlignment: CrossAxisAlignment.center, // 垂直居中对齐
          children: [ 
            // 网络头像+错误兜底
            CircleAvatar(
              radius: 20,
              backgroundImage: NetworkImage(profilePicture),
              errorWidget: (context, url, error) => Image.asset(
                "assets/images/userimage.png",
                scale: 1,
              ),
            ),
            const SizedBox(width: 10), // 头像与用户名的间距
            Text( 
              username.isNotEmpty ? username : "未知用户", // 处理空用户名情况
              style: const TextStyle(color: Colors.white, fontSize:12), 
            ), 
          ], 
        ), 
    ); 
  }

  // 补全build方法，将自定义appbar接入AppBar
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: appbar(),
      ),
      // 其他页面内容...
    );
  }
}

额外注意点 #

• 确保loginUserData["id"]不为空，这里加了?? ""的非空兜底，避免API请求链接错误。
• 如果API返回的头像链接是相对路径，需要拼接BASE_API的域名，比如profilePicture = BASE_API + response.data['data']['image'];。
• 可以给Image.network添加缓存策略，提升重复加载的速度。

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