Flutter优雅加载异步数据：解决状态变更页面闪烁问题

核心思路 #

避免在build方法中直接调用异步方法（每次Widget重建都会重复执行，导致短暂空白），而是通过状态生命周期方法获取Application实例，提前加载数据，再根据加载状态渲染对应UI。

具体实现方案 #

方案一：手动维护加载状态（适合需要精细控制流程）

将Widget转为StatefulWidget，在状态类中管理数据和加载状态：

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

  @override
  State<SurveyList> createState() => _SurveyListState();
}

class _SurveyListState extends State<SurveyList> {
  late final Application _app;
  List<Survey>? _surveys;
  bool _isLoading = true;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 在这里安全获取Application实例，关闭监听避免不必要重建
    _app = Provider.of<Application>(context, listen: false);
    // 仅首次加载时执行异步操作，防止重复调用
    if (_surveys == null) {
      _loadSurveys();
    }
  }

  Future<void> _loadSurveys() async {
    try {
      // 先加载缓存数据，快速显示内容
      final cachedSurveys = await _app.getSurveysFromCache();
      setState(() {
        _surveys = cachedSurveys;
      });
      // 再请求最新数据并更新
      final latestSurveys = await _app.getSurveys();
      setState(() {
        _surveys = latestSurveys;
      });
    } catch (e) {
      debugPrint('加载失败：$e');
      // 可添加错误提示逻辑，比如保留缓存数据
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    if (_isLoading) {
      // 加载中显示指示器，替换空白Container解决闪黑
      return const Center(child: CircularProgressIndicator());
    }

    if (_surveys == null || _surveys!.isEmpty) {
      return const Center(child: Text('暂无数据'));
    }

    // 渲染实际列表内容
    return ListView.builder(
      itemCount: _surveys!.length,
      itemBuilder: (context, index) => ListTile(title: Text(_surveys![index].title)),
    );
  }
}

方案二：结合FutureBuilder（代码更简洁）

利用FutureBuilder自动管理加载状态，同时确保异步任务仅执行一次：

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

  @override
  State<SurveyList> createState() => _SurveyListState();
}

class _SurveyListState extends State<SurveyList> {
  late final Application _app;
  late final Future<List<Survey>> _surveysFuture;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _app = Provider.of<Application>(context, listen: false);
    // 仅初始化一次Future，避免Widget重建时重复执行异步操作
    _surveysFuture = _loadSurveys();
  }

  Future<List<Survey>> _loadSurveys() async {
    // 优先读取缓存
    final cachedSurveys = await _app.getSurveysFromCache();
    try {
      // 请求最新数据，失败则返回缓存
      final latestSurveys = await _app.getSurveys();
      return latestSurveys;
    } catch (_) {
      return cachedSurveys;
    }
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<Survey>>(
      future: _surveysFuture,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        }
        if (snapshot.hasError || !snapshot.hasData || snapshot.data!.isEmpty) {
          return const Center(child: Text('暂无数据'));
        }
        return ListView.builder(
          itemCount: snapshot.data!.length,
          itemBuilder: (context, index) => ListTile(title: Text(snapshot.data![index].title)),
        );
      },
    );
  }
}

关键注意点 #

• 使用didChangeDependencies而非initState：initState中无法安全通过Provider.of获取实例，didChangeDependencies在initState后执行，可正常访问context。
• listen: false：获取Application实例时关闭监听，避免其状态变化导致当前Widget不必要重建。
• 替换空白Container：加载中显示加载指示器或缓存内容，彻底解决闪黑问题。

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