Flutter Web浏览器刷新按钮问题：页面刷新后数据无法加载

1. 修复刷新后数据加载失败的问题 #

确保数据加载逻辑正确初始化 #

把数据请求的Future实例放在State类的成员变量中，而非直接在build方法里创建，避免每次重建widget都重复发起无效请求：

class _MyPageState extends State<MyPage> {
  late Future<List<Data>> _fetchDataFuture;

  @override
  void initState() {
    super.initState();
    // 页面初始化（包括刷新后）时触发数据请求
    _fetchDataFuture = fetchDataFromApi();
  }

  Future<List<Data>> fetchDataFromApi() async {
    final response = await http.get(Uri.parse('your-api-url'));
    if (response.statusCode == 200) {
      return parseData(response.body);
    } else {
      throw Exception('Failed to load data');
    }
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<Data>>(
      future: _fetchDataFuture,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return ShimmerWidget(); // 显示shimmer加载效果
        } else if (snapshot.hasError) {
          // 加载失败时显示重试选项
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('加载失败：${snapshot.error}'),
              const SizedBox(height: 16),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _fetchDataFuture = fetchDataFromApi();
                  });
                },
                child: const Text('重试'),
              )
            ],
          );
        } else if (snapshot.hasData) {
          // 渲染正常数据列表
          return ListView.builder(
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) => DataItem(data: snapshot.data![index]),
          );
        } else {
          return const Text('暂无数据');
        }
      },
    );
  }
}

监听页面刷新事件强制初始化数据 #

如果上述方法无效，可监听浏览器load事件，确保刷新后重新触发数据加载：

import 'dart:html' as html;

class _MyPageState extends State<MyPage> {
  late Future<List<Data>> _fetchDataFuture;

  @override
  void initState() {
    super.initState();
    // 监听页面加载完成事件，适配刷新场景
    html.window.addEventListener('load', (event) {
      setState(() {
        _fetchDataFuture = fetchDataFromApi();
      });
    });
    _fetchDataFuture = fetchDataFromApi();
  }

  // 其余代码同上
}

2. 解决html.window.location.reload()无限循环问题 #

无限循环的核心原因是你在页面初始化生命周期（如initState、didChangeDependencies）里无条件调用了reload()，导致页面每次加载完成后又触发刷新，形成闭环。

正确使用reload()的场景 #

仅在用户主动触发重试或特定条件满足时调用：

// 错误示例（会触发无限循环）：
@override
void initState() {
  super.initState();
  html.window.location.reload(); // 每次页面初始化都刷新，循环往复
}

// 正确示例：仅用户主动操作时触发
ElevatedButton(
  onPressed: () {
    // 用户点击重试按钮时刷新页面
    html.window.location.reload();
  },
  child: const Text('刷新页面重试'),
)

用本地存储标记刷新状态（可选） #

如果必须自动刷新，可通过localStorage标记是否需要刷新，避免循环：

import 'dart:html' as html;

@override
void initState() {
  super.initState();
  final storage = html.window.localStorage;
  // 检查是否需要刷新，避免重复触发
  if (storage['needReload'] == 'true') {
    storage.remove('needReload'); // 清除标记
    html.window.location.reload();
  }
}

// 在需要触发刷新的业务逻辑中设置标记
void triggerPageReload() {
  html.window.localStorage['needReload'] = 'true';
  html.window.location.reload();
}

额外排查点 #

• 打开浏览器开发者工具（F12）的Network标签，确认刷新后API请求是否正常发送、响应状态码是否为200；
• 检查shimmer效果的触发条件，确保仅在ConnectionState.waiting时显示，避免因状态判断错误导致一直加载。

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