如何移除Flutter中Refresh Indicator组件的箭头及默认阴影？

一、移除下拉刷新的箭头样式 #

新版本RefreshIndicator默认新增了箭头指示器，你可以通过两种方式移除：

1. 全局Theme统一配置

在ThemeData中覆盖默认的指示器构建逻辑，只保留进度圈：

ThemeData(
  refreshIndicatorTheme: RefreshIndicatorThemeData(
    builder: (context, state, child) {
      return CircularProgressIndicator(
        value: state.value,
        strokeWidth: 2, // 可根据设计调整进度圈粗细
      );
    },
  ),
)

2. 单个组件单独设置

仅修改目标RefreshIndicator，直接指定builder属性跳过箭头渲染：

RefreshIndicator(
  builder: (context, state, child) {
    return CircularProgressIndicator(
      value: state.value,
      strokeWidth: 2,
    );
  },
  onRefresh: () async {
    // 你的刷新逻辑
    await Future.delayed(const Duration(seconds: 1));
  },
  child: ListView.builder(
    itemCount: 20,
    itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
  ),
)

二、移除默认阴影效果 #

RefreshIndicator的阴影来自内部的Material组件，可通过以下方式消除：

1. 全局Theme去除阴影

在refreshIndicatorTheme中设置阴影层级为0，或直接将阴影色设为透明：

ThemeData(
  refreshIndicatorTheme: RefreshIndicatorThemeData(
    elevation: 0, // 移除阴影层级
    shadowColor: Colors.transparent, // 确保阴影完全透明
  ),
)

2. 单个组件去除阴影

给特定RefreshIndicator的自定义builder里的Material设置elevation: 0：

RefreshIndicator(
  builder: (context, state, child) {
    return Material(
      elevation: 0, // 移除阴影
      child: CircularProgressIndicator(
        value: state.value,
        strokeWidth: 2,
      ),
    );
  },
  onRefresh: _onRefresh,
  child: ListView(...),
)

补充说明 #

如果需要完全匹配设计稿，还可以在builder中返回自定义加载Widget，实现更个性化的刷新指示器。

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