Flutter中UserAccountsDrawerHeader文本中途消失问题求助

在使用带有UserAccountsDrawerHeader的Drawer组件时，通过FutureBuilder加载的文本会中途消失，直接设置文本则显示正常，问题出在accountName属性上。

相关代码如下：

class namecabeceradrawer extends State<NameCabeceraDrawer> {
  Widget NameUserDrawer() {
    return Container(
      margin: EdgeInsets.only(top: 42),
      child: Text(nameusuario),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: FutureBuilder(
          future: futureServices,
          builder: (context, AsyncSnapshot snapshot) {
            List listainfocabeceradrawer = snapshot.data;
            if (snapshot.hasData) {
              return Center(
                child: Container(
                  child: ListView.builder(
                      itemCount: listainfocabeceradrawer.length,
                      itemBuilder: (context, i) {
                        nameusuario = listainfocabeceradrawer[i].NameUsuario;
                        return Container(
                          child: NameUserDrawer(),
                        );
                      }),
                ),
              );
            } else if (snapshot.hasError) {
              return Text("${snapshot.error}");
            }
            return Center(child: CircularProgressIndicator());
          }),
    );
    throw UnimplementedError();
  }
}

截图：

问题根源 #

1. 状态管理混乱：在ListView.builder的构建逻辑中直接修改nameusuario状态变量，触发组件重复重建，导致FutureBuilder反复执行，引发文本闪烁、消失。
2. 冗余列表嵌套：UserAccountsDrawerHeader仅需单个用户名，使用ListView.builder完全多余，反而加剧状态冲突。
3. 数据处理不严谨：未对snapshot.data做判空处理，直接赋值给List类型变量存在安全隐患。

修复步骤 #

1. 移除冗余列表组件：直接从快照数据中提取用户名，无需通过列表循环渲染。
2. 规范状态更新：避免在build方法中直接修改状态变量，通过直接传递数据或setState安全更新。
3. 优化FutureBuilder逻辑：增加数据判空、状态判断，确保异步流程稳定。

修复后的代码示例：

class NameCabeceraDrawer extends StatefulWidget {
  @override
  _NameCabeceraDrawerState createState() => _NameCabeceraDrawerState();
}

class _NameCabeceraDrawerState extends State<NameCabeceraDrawer> {
  Future<List<dynamic>> futureServices;

  @override
  void initState() {
    super.initState();
    // 在initState中初始化异步请求，避免build重建时重复发起请求
    futureServices = fetchUserInfo();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<dynamic>>(
      future: futureServices,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError) {
          return Text('加载失败: ${snapshot.error}');
        } else if (snapshot.hasData && snapshot.data.isNotEmpty) {
          String userName = snapshot.data[0].NameUsuario;
          return Container(
            margin: EdgeInsets.only(top: 42),
            child: Text(userName),
          );
        } else {
          return Text('无用户数据');
        }
      },
    );
  }

  // 替换为实际的异步数据获取逻辑
  Future<List<dynamic>> fetchUserInfo() async {
    await Future.delayed(Duration(seconds: 1));
    return [{'NameUsuario': 'Carlos Alejandro'}];
  }
}

集成到UserAccountsDrawerHeader #

将修复后的组件直接作为accountName参数传入即可：

Drawer(
  child: ListView(
    children: [
      UserAccountsDrawerHeader(
        accountName: NameCabeceraDrawer(),
        accountEmail: Text('user@example.com'),
        currentAccountPicture: CircleAvatar(
          child: Icon(Icons.person),
        ),
      ),
      // 其他Drawer菜单项
    ],
  ),
);

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