Flutter异步获取数据致星标状态错误，如何优化界面显示？

问题核心 #

异步获取收藏状态的ObtenerEstadoFavorito方法未完成时，界面已提前渲染，导致星标默认使用未选中状态。无需延迟界面显示，通过加载状态占位+异步状态正确更新即可解决。

具体修复方案 #

1. 添加加载状态变量，优化异步方法逻辑

在状态类中新增加载状态标记，异步请求完成后更新状态，避免界面提前渲染错误值：

class perfilclientestate extends State<PerfilCliente>{
  String estadofavorito;
  bool estadoiconofavorito;
  List InfoperfilCliente=[];
  bool _isLoading = true; // 新增加载状态标记

  @override
  void initState() {
    super.initState(); // 必须调用super.initState()
    ObtenerEstadoFavorito();
  }

  // 将方法移到initState外部，改用async/await简化异步逻辑
  void ObtenerEstadoFavorito() async {
    try {
      final value = await searchdelegateperfilclienteservices.ObtenerEstadoFavorito(
        infovalidacionloginmodel2.getIdUsuario(),
        widget.perfilseleccionado['2']
      );
      setState(() {
        InfoperfilCliente.addAll(value);
        estadofavorito = InfoperfilCliente[0].IdEstadoFavorito;
        _isLoading = false; // 请求完成，标记加载结束
      });
    } catch (e) {
      print('获取收藏状态失败: $e');
      setState(() {
        _isLoading = false; // 即使请求失败也要结束加载状态
      });
    }
  }
}

2. 根据加载状态渲染界面

在build方法中，加载完成前显示加载组件（如圆形进度条），完成后再渲染详情内容：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.blueAccent,
      title: const Text("name"),
      centerTitle: true,
    ),
    body: _isLoading 
        ? const Center(child: CircularProgressIndicator()) // 加载中占位
        : PerfilUsuario(),
  );
}

3. 修正星标状态判断逻辑

避免在UI层直接赋值状态变量，直接通过estadofavorito的值判断星标状态：

Widget PerfilUsuario(){
  return Container(
    child: StarButton(
      isStarred: estadofavorito == "1", // 直接判断状态，无需额外赋值
      iconSize: 40,
      valueChanged: (value){
        setState(() {
          estadoiconofavorito = value;
          // 此处可添加收藏/取消收藏的接口调用逻辑
        });
      }
    ),
  );
}

额外注意点 #

• 原代码中initState内定义ObtenerEstadoFavorito的写法不符合规范，需将方法移到initState外部
• 必须调用super.initState()，否则会触发Flutter框架错误
• 异步请求需添加错误处理，避免因接口异常导致界面一直处于加载状态

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