Flutter Web升级至3.7.9后RefreshIndicator失效问题求助

问题背景 #

升级Flutter从3.3.x到3.7.9后，RefreshIndicator在Web端完全无法触发下拉刷新——即使列表内容足够长，也无法触发过滚动，而移动端功能一切正常。复现代码如下：

import 'package:flutter/material.dart';
import 'dart:math';

void main() => runApp(const MyHomePage());

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    Key? key,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String title = 'Hello';
  var rng = Random();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: RefreshIndicator(
          onRefresh: () async => setState(() {
            title = 'Hey';
          }),
          child: ListView.builder(
            physics: const AlwaysScrollableScrollPhysics(),
            itemBuilder: (_, i) => Container(
              padding: const EdgeInsets.all(10),
              color: Colors.lightBlue,
              width: double.infinity,
              height: 50,
              child: Text(
                rng.nextInt(100).toString(),
                style: Theme.of(context).textTheme.bodyLarge!.copyWith(
                      color: Colors.white,
                    ),
              ),
            ),
            itemCount: 200,
          ),
        ),
      ),
    );
  }
}

问题原因 #

Flutter 3.7版本对Web端默认滚动行为做了修改：默认的ScrollBehavior在Web端禁用了过滚动（overscroll）效果，而RefreshIndicator正是依赖过滚动的手势触发机制来启动刷新流程。

解决方法 #

方法1：全局自定义ScrollBehavior #

创建支持Web端过滚动的自定义滚动行为，全局应用到整个App：

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class WebSupportScrollBehavior extends MaterialScrollBehavior {
  // 允许触摸和鼠标触发拖拽滚动
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };

  // 启用Web端的过滚动效果，为RefreshIndicator提供触发条件
  @override
  ScrollPhysics getScrollPhysics(BuildContext context) {
    return const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics());
  }
}

然后在MaterialApp中配置这个行为：

MaterialApp(
  scrollBehavior: WebSupportScrollBehavior(),
  // 其他原有配置...
)

方法2：单独为ListView配置Physics #

如果只想针对当前列表生效，可以直接修改ListView的physics参数：

ListView.builder(
  physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
  // 其他原有配置...
)

方法3：修正onRefresh的异步逻辑 #

你的onRefresh虽然标记为async，但内部是同步执行setState，可能导致刷新状态异常。建议添加异步延迟模拟真实请求，或者确保返回的Future正确完成：

onRefresh: () async {
  // 模拟网络请求或其他异步操作
  await Future.delayed(const Duration(milliseconds: 200));
  setState(() {
    title = 'Hey';
  });
},

说明 #

• 方法1是全局解决方案，适合需要统一Web端滚动行为的场景；
• 方法2仅对当前列表生效，适合局部调整；
• 方法3主要是确保刷新逻辑的异步性，避免刷新状态提前结束。

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