Flutter中如何实现API周期性拉取且无需每次刷新页面

核心逻辑分两部分：用周期定时器实现固定间隔拉取，通过窄范围状态监听实现局部UI更新，避免整页重建。

具体实现步骤 #

1. 周期拉取逻辑实现 #

使用Flutter内置的Timer.periodic实现5秒间隔的任务调度，注意必须绑定页面生命周期，页面销毁时取消定时器，避免内存泄漏和无效请求。

2. 局部刷新实现 #

不要直接调用页面根setState（会触发整个build方法重执行），使用ValueNotifier+ValueListenableBuilder做定向更新：只有监听数据变化的组件会在数据更新时重建，其余UI完全不受影响。如果项目中已经接入Bloc、Riverpod、GetX等状态管理库，原理一致，只需要把数据监听范围缩小到数据展示组件即可。

完整可运行示例代码 #

import 'dart:async';
import 'package:flutter/material.dart';
// 如果你用dio做网络请求就引入，没有的话替换成自己的请求逻辑
// import 'package:dio/dio.dart';

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

  @override
  State<AutoFetchPage> createState() => _AutoFetchPageState();
}

class _AutoFetchPageState extends State<AutoFetchPage> {
  // 定时器实例
  late Timer _fetchTimer;
  // 存储接口数据的可监听对象
  final ValueNotifier<dynamic> _apiData = ValueNotifier(null);
  // 请求防抖标记，避免重复请求
  bool _isFetching = false;

  // 接口拉取逻辑
  Future<void> _loadDataFromApi() async {
    if (_isFetching) return;
    _isFetching = true;
    try {
      // 替换成你实际的接口请求地址和逻辑
      // final res = await Dio().get('你的接口地址');
      // 模拟网络请求延迟
      await Future.delayed(const Duration(milliseconds: 300));
      _apiData.value = {'time': DateTime.now().toString(), 'value': '模拟接口返回数据'};
    } catch (e) {
      debugPrint('数据拉取异常: $e');
    } finally {
      _isFetching = false;
    }
  }

  @override
  void initState() {
    super.initState();
    // 首屏先加载一次数据，不用等第一个5秒
    _loadDataFromApi();
    // 启动5秒间隔的定时拉取
    _fetchTimer = Timer.periodic(const Duration(seconds: 5), (timer) {
      _loadDataFromApi();
    });
  }

  @override
  void dispose() {
    // 页面销毁时释放资源，必须执行
    _fetchTimer.cancel();
    _apiData.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('定时拉取数据Demo')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 这部分内容不会随数据拉取重建
            const Text(
              '固定展示区域',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 12),
            const Text('这部分UI不会在每次拉取数据时刷新，不会触发整页重建'),
            const Divider(height: 40),
            const Text(
              '动态数据区域',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 12),
            // 只有这个包裹的组件会在数据更新时刷新
            ValueListenableBuilder(
              valueListenable: _apiData,
              builder: (context, data, child) {
                if (data == null) {
                  return const CircularProgressIndicator();
                }
                return Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('最新拉取时间: ${data['time']}'),
                    const SizedBox(height: 8),
                    Text('返回内容: ${data['value']}'),
                  ],
                );
              },
            )
          ],
        ),
      ),
    );
  }
}

优化注意点 #

• 可以配合WidgetsBindingObserver监听应用前后台状态，应用退到后台时暂停定时器，回到前台时恢复拉取，减少不必要的流量和性能消耗。
• 如果页面有下拉刷新、手动触发刷新的逻辑，直接复用_loadDataFromApi方法即可，不会和定时任务冲突。
• 不要在定时任务里做繁重的数据解析逻辑，避免阻塞UI线程。

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