Flutter：在Widget build内执行函数是否为不良实践？含主题与Todo场景

一、SystemUiOverlayStyle永久监听与主题更新的实现问题 #

当前方案的潜在问题 #

1. 在build方法中调用状态修改方法（changeTheme）不符合Flutter最佳实践：build方法应仅负责纯渲染逻辑，包含副作用操作可能引发不必要的重绘循环，或导致状态不一致。
2. 手动维护buildOnce、darkmodePrev这类变量容易出错：当Widget因屏幕旋转、父组件重绘等原因重建时，变量状态可能不符合预期，导致主题更新逻辑失效。

更优的实现方式 #

方式1：用WidgetsBindingObserver监听系统主题变化

在State类中混入该观察者，直接监听系统主题的原生变化，避免依赖build循环：

class _MyPageState extends State<MyPage> with WidgetsBindingObserver {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    // 初始化时同步一次主题
    _syncSystemUiTheme(Theme.of(context).brightness);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangePlatformBrightness() {
    super.didChangePlatformBrightness();
    final brightness = WidgetsBinding.instance.window.platformBrightness;
    _syncSystemUiTheme(brightness);
  }

  void _syncSystemUiTheme(Brightness brightness) {
    final isDarkMode = brightness == Brightness.dark;
    BlocProvider.of<SysUiCubit>(context).changeTheme(context, isDarkMode);
  }
}

方式2：通过Bloc同步主题与SystemUi样式

如果主题由Bloc管理，可直接在BlocBuilder中绑定AnnotatedRegion，无需额外调用更新方法：

@override
Widget build(BuildContext context) {
  return BlocBuilder<SysUiCubit, SysUiState>(
    builder: (context, state) {
      final overlayStyle = state.isDarkMode 
          ? SystemUiOverlayStyle.light 
          : SystemUiOverlayStyle.dark;
      return AnnotatedRegion<SystemUiOverlayStyle>(
        value: overlayStyle,
        child: MaterialApp(
          themeMode: state.isDarkMode ? ThemeMode.dark : ThemeMode.light,
          // 其他配置
        ),
      );
    },
  );
}

二、Todo列表中context.watch<TodoListCubit>()的使用问题 #

当前写法的可优化点 #

context.watch<TodoListCubit>()本身并非不良实践，但如果组件同时使用BlocListener，会导致状态变化被重复监听：

• context.watch会触发整个组件重建
• BlocListener会单独执行副作用逻辑

这种写法会让UI渲染与副作用逻辑耦合，代码结构不够清晰。

更简洁的实现方式 #

将UI渲染与副作用逻辑分离，用BlocBuilder负责列表渲染，BlocListener处理回调：

@override
Widget build(BuildContext context) {
  return BlocListener<TodoListCubit, TodoListState>(
    listener: (context, state) {
      // 处理状态变化的副作用，如提示弹窗、导航等
      if (state.status == TodoStatus.success) {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('操作成功'))
        );
      }
    },
    child: BlocBuilder<TodoListCubit, TodoListState>(
      builder: (context, state) {
        final todos = state.todo;
        return ListView.builder(
          itemCount: todos.length,
          itemBuilder: (context, index) => ListTile(
            title: Text(todos[index].title)
          ),
        );
      },
    ),
  );
}

如果不需要副作用逻辑，可直接简化为仅用BlocBuilder，进一步精简代码。

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