ConsumerStatefulWidget中setState未正常生效（Riverpod）问题排查

问题场景 #

自定义了一个继承StatelessWidget的MyAppBar，通过构造函数传入标题：

class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
  final String? title;
  @override
  Size get preferredSize => Size.fromHeight(AppBar().preferredSize.height);

  const MyAppBar({super.key, this.title});

  @override
  Widget build(BuildContext context) {
    return AppBar(title: Text(title ?? "CFlytics"));
  }
}

在ConsumerStatefulWidget中使用该组件时，直接调用setState更新本地状态变量appbartitle，AppBar标题完全无变化：

class _MyHomePageState extends State<MyHomePage> {
  String? appbartitle;

  @override
  Widget build(BuildContext context) {
    final myData =ref.watch(someProvider);
    return Scaffold(
      appBar: MyAppBar(title: appbartitle),

      body: myData.when(
          data: (data) {
            setState(() {appbartitle = "123";});
            return ...;
          },

          loading: () {return ...;},
          error: () {return ...;},
      )
    );
  }
}

但用Future.delayed(Duration(milliseconds: 0))包裹setState代码时，标题可正常更新：

Future.delayed(const Duration(milliseconds: 0), () {
  setState(() {appbartitle = "new title";});
});

原因解析 #

核心问题在于**setState的调用时机**：

• 在myData.when的data回调里直接调用setState时，这个回调是在组件的build同步执行流程中触发的。此时当前的build还未完成，Flutter会标记组件需要重建，但这次重建请求会被合并到当前build周期结束后处理。而AppBar已经在本次build中完成了渲染，所以不会立刻响应状态变化。
• Future.delayed(Duration.zero)会把setState的执行放到微任务队列中，等当前build流程彻底结束、界面已经绘制完成后，再执行状态更新并触发重建，此时AppBar会重新渲染，标题就能正常更新。

正确实现方式 #

方式一：利用Riverpod状态替代本地状态 #

既然已经使用Riverpod做状态管理，没必要维护本地状态变量，直接将标题状态托管到Provider中，数据变化时自动触发组件重建：

// 定义标题状态Provider
final appBarTitleProvider = StateProvider<String?>((ref) => null);

// 页面中使用
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final myData = ref.watch(someProvider);
    final appBarTitle = ref.watch(appBarTitleProvider);
    
    return Scaffold(
      appBar: MyAppBar(title: appBarTitle),
      body: myData.when(
        data: (data) {
          // 更新Provider中的标题状态
          ref.read(appBarTitleProvider.notifier).state = "123";
          return ...;
        },
        loading: () => ...,
        error: () => ...,
      ),
    );
  }
}

方式二：避免在build流程中直接更新状态 #

如果一定要使用本地状态，不要在build的同步回调中调用setState，可以通过addPostFrameCallback将状态更新推迟到当前帧绘制完成后：

data: (data) {
  WidgetsBinding.instance.addPostFrameCallback((_) {
    setState(() {
      appbartitle = "123";
    });
  });
  return ...;
}

更合理的做法是监听Provider的变化，在组件初始化时添加监听，避免在build中做状态更新：

@override
void initState() {
  super.initState();
  // 监听someProvider的数据变化
  ref.listen<AsyncValue<MyData>>(someProvider, (previous, next) {
    if (next is AsyncData) {
      setState(() {
        appbartitle = "123";
      });
    }
  });
}

@override
Widget build(BuildContext context) {
  final myData = ref.watch(someProvider);
  return Scaffold(
    appBar: MyAppBar(title: appbartitle),
    body: myData.when(
      data: (data) => ...,
      loading: () => ...,
      error: () => ...,
    ),
  );
}

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