Flutter如何使用Future等待列表非空后渲染页面以解决图表空白问题

核心实现逻辑是在Provider中增加加载状态标记，UI层根据不同状态返回对应页面，同时保证数据更新后Provider触发通知刷新UI即可解决问题。

步骤1：修改EnterpriseProvider添加状态管理 #

在你的EnterpriseProvider类中新增加载状态、请求触发方法，请求完成后调用notifyListeners通知UI刷新：

class EnterpriseProvider extends ChangeNotifier {
  bool _isLoading = false;
  bool get isLoading => _isLoading;
  List<List<dynamic>> _indicator = [];
  List<List<dynamic>> get indicator => _indicator;

  // 触发数据请求的方法
  Future<void> fetchIndicator() async {
    _isLoading = true;
    notifyListeners();
    try {
      // 替换为你实际的HTTP请求逻辑
      final response = await yourHttpRequestMethod();
      _indicator = response.data;
    } catch (e) {
      // 可自行添加错误状态处理
      print("请求失败：$e");
    } finally {
      _isLoading = false;
      notifyListeners();
    }
  }

  // 其余原有逻辑保持不变
}

步骤2：修改HomeScreen增加状态判断 #

调整HomeScreen的build逻辑，根据加载状态、数据状态返回对应页面：

// 若需要在页面初始化时自动触发请求，可改为StatefulWidget
class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  void initState() {
    super.initState();
    // 页面初始化完成后触发数据请求
    WidgetsBinding.instance.addPostFrameCallback((_) {
      Provider.of<EnterpriseProvider>(context, listen: false).fetchIndicator();
    });
  }

  @override
  Widget build(BuildContext context) {
    final enterpriseProvider = Provider.of<EnterpriseProvider>(context);
    // 加载中返回加载屏
    if (enterpriseProvider.isLoading) {
      return const Scaffold(
        body: Center(child: CircularProgressIndicator()),
      );
    }

    final resp = enterpriseProvider.indicator;
    final List<IpcData> data = createIpcList(resp);
    
    // 无数据时返回空占位页
    if (data.isEmpty) {
      return Scaffold(
        appBar: AppBar(title: const Text('Hola')),
        body: const Center(child: Text('暂无数据')),
      );
    }

    // 有数据时返回正常页面
    return Scaffold(
      appBar: AppBar(title: const Text('Hola')),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(
            child: Container(
              child: ResultList(formattedData: data)
            ),
          ),
        ],
      )
    );
  }

  List<IpcData> createIpcList(List<List<dynamic>> resp) {
    return resp.map((e) => IpcData(e[0], e[1])).toList();
  }
}

注意事项 #

• 如果你原本是在其他位置已经触发了fetchIndicator请求，可保留HomeScreen为StatelessWidget，只保留build中的状态判断逻辑即可
• 如果修改后数据更新但ResultList仍不刷新，检查该组件内部是否用State缓存了旧的formattedData，可重写didUpdateWidget方法同步外部传入的新数据。

内容的提问来源于stack exchange，提问作者Matías Baeza Graf