如何用FutureBuilder在Flutter首页展示Django Rest Framework用户信息

核心实现步骤 #

你已经完成了API地址配置、数据模型和接口封装，直接在首页通过FutureBuilder对接接口即可，以下是具体实现：

1. 首页集成FutureBuilder（无状态组件版本）

直接在首页的Widget中用FutureBuilder包裹需要展示姓名的Text组件，处理加载、错误、成功三种状态：

import 'package:flutter/material.dart';
import 'api_service.dart';
import 'user_profile.dart';

class HomePage extends StatelessWidget {
  final ApiService _apiService = ApiService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('首页')),
      body: Center(
        child: FutureBuilder<UserProfile>(
          // 传入封装好的获取用户信息接口
          future: _apiService.getUserProfile(),
          builder: (context, snapshot) {
            // 加载中：显示加载指示器
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const CircularProgressIndicator();
            }
            // 请求出错：显示错误信息
            else if (snapshot.hasError) {
              return Text('获取用户信息失败：${snapshot.error}');
            }
            // 数据返回成功：显示用户姓名
            else if (snapshot.hasData) {
              final user = snapshot.data!;
              return Text(
                '欢迎回来，${user.firstName} ${user.lastName}',
                style: const TextStyle(fontSize: 20),
              );
            }
            // 无数据兜底
            else {
              return const Text('暂无用户信息');
            }
          },
        ),
      ),
    );
  }
}

2. 优化：避免重复请求（有状态组件版本）

如果首页是有状态组件，建议在initState中初始化请求Future，防止每次Widget重建都重复发起API请求：

import 'package:flutter/material.dart';
import 'api_service.dart';
import 'user_profile.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late Future<UserProfile> _userProfileFuture;
  final ApiService _apiService = ApiService();

  @override
  void initState() {
    super.initState();
    // 仅在初始化时发起一次请求
    _userProfileFuture = _apiService.getUserProfile();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('首页')),
      body: Center(
        child: FutureBuilder<UserProfile>(
          future: _userProfileFuture,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const CircularProgressIndicator();
            } else if (snapshot.hasError) {
              return Text('获取用户信息失败：${snapshot.error}');
            } else if (snapshot.hasData) {
              final user = snapshot.data!;
              return Text(
                '欢迎回来，${user.firstName} ${user.lastName}',
                style: const TextStyle(fontSize: 20),
              );
            } else {
              return const Text('暂无用户信息');
            }
          },
        ),
      ),
    );
  }
}

3. 关键注意事项

• 认证token传递：确保api_service.dart中的getUserProfile接口已在请求头中携带登录后的认证信息（比如JWT的Authorization: Bearer ${token}），否则DRF会返回401未授权。
• 数据模型匹配：确认user_profile.dart中的fromJson方法正确映射DRF返回的字段名（比如DRF默认返回first_name、last_name，需对应到模型的firstName、lastName）。

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