Flutter BlocBuilder报错：build期间调用setState()或markNeedsBuild()

在使用flutter_bloc包时遇到setState() or markNeedsBuild() called during build错误，排查后发现是ElevatedButton的onPressed条件判断代码导致的——这段代码原本用于根据表单验证状态禁用/启用按钮。移除条件判断直接设置onPressed为函数时程序正常，但需要保留按钮状态随输入验证结果变化的功能。请问标准解决方式是什么？是否应该由BLoC处理表单验证？

报错信息 #

The following assertion was thrown building BlocBuilder<MyCubit, MyState>(dirty, dependencies: [_InheritedProviderScope<MyCubit?>], state: _BlocBuilderBaseState<MyCubit, MyState>#8c21a):
setState() or markNeedsBuild() called during build.

This Form widget cannot be marked as needing to build because the framework is already in the process of building widgets. A widget can be marked as needing to be built during the build phase only if one of its ancestors is currently building. This exception is allowed because the framework builds parent widgets before children, which means a dirty descendant will always be built. Otherwise, the framework might not visit this widget during this build phase.
The widget on which setState() or markNeedsBuild() was called was: Form-[LabeledGlobalKey<FormState>#24535]
  state: FormState#05273
The widget which was currently being built when the offending call was made was: BlocBuilder<MyCubit, MyState>
  dirty
  dependencies: [_InheritedProviderScope<MyCubit?>]
  state: _BlocBuilderBaseState<MyCubit, MyState>#8c21a
The relevant error-causing widget was: 
  BlocBuilder<MyCubit, MyState> BlocBuilder:file:///E:/Projekte/untitled9/lib/main.dart:47:18

相关代码 #

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

import 'my_cubit.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocProvider<MyCubit>(
      create: (context) => MyCubit(),
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {
  final formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Demo Home Page'),
      ),
      body: Form(
        key: formKey,
        child: Center(
          child: BlocBuilder<MyCubit, MyState>(
            builder: (context, state) {
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  TextFormField(
                    initialValue: state.text,
                    onChanged: (value) {
                      if (!formKey.currentState!.validate()) {
                        return;
                      }

                      final newData = state.copyWith(text: value);
                      BlocProvider.of<MyCubit>(context).changeData(newData);
                    },
                    validator: (v) => v!.trim().isNotEmpty ? null : 'error',
                  ),
                  ElevatedButton(
                    onPressed: formKey.currentState == null || !formKey.currentState!.validate() ? null : () { // this causes the error
                      print('hi');
                    },
                    child: const Text('Press'),
                  ),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

原因分析 #

调用formKey.currentState!.validate()时，表单会触发内部状态更新（比如显示错误提示文本），而这个操作是在BlocBuilder的build过程中执行的。此时Flutter框架正处于构建阶段，不允许调用markNeedsBuild()或setState()，因此抛出异常。

标准解决方式 #

方式1：避免在build方法中直接调用validate() #

通过监听表单状态变化，将验证结果保存到页面State中，再根据这个状态控制按钮的可用性：

class _MyHomePageState extends State<MyHomePage> {
  final formKey = GlobalKey<FormState>();
  bool isFormValid = false; // 存储表单验证状态

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Demo Home Page')),
      body: Form(
        key: formKey,
        onChanged: () { // 监听表单内容变化
          setState(() {
            // 在表单变化时执行验证，更新状态
            isFormValid = formKey.currentState?.validate() ?? false;
          });
        },
        child: Center(
          child: BlocBuilder<MyCubit, MyState>(
            builder: (context, state) {
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  TextFormField(
                    initialValue: state.text,
                    onChanged: (value) {
                      final newData = state.copyWith(text: value);
                      BlocProvider.of<MyCubit>(context).changeData(newData);
                    },
                    validator: (v) => v!.trim().isNotEmpty ? null : 'error',
                  ),
                  ElevatedButton(
                    // 根据预存的验证状态控制按钮
                    onPressed: isFormValid ? () { print('hi'); } : null,
                    child: const Text('Press'),
                  ),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

这种方式将验证操作从build流程中移出，只在表单实际变化时执行，避免了框架构建期间的状态更新冲突。

方式2：将表单验证逻辑移到BLoC/Cubit中（推荐） #

遵循Bloc的分层设计理念，把表单验证这类业务逻辑从UI层剥离到Cubit中，让UI只负责根据状态渲染：

1. 更新MyState，添加验证状态字段：

class MyState {
  final String text;
  final bool isFormValid; // 标记表单是否验证通过

  MyState({required this.text, this.isFormValid = false});

  MyState copyWith({String? text, bool? isFormValid}) {
    return MyState(
      text: text ?? this.text,
      isFormValid: isFormValid ?? this.isFormValid,
    );
  }
}

2. 在MyCubit中实现验证逻辑：

class MyCubit extends Cubit<MyState> {
  MyCubit() : super(MyState(text: ''));

  void changeData(MyState newData) {
    // 在这里执行表单验证
    bool isValid = newData.text.trim().isNotEmpty;
    // 发射包含验证状态的新状态
    emit(newData.copyWith(isFormValid: isValid));
  }
}

3. 修改UI代码，直接使用Cubit状态控制按钮：

class _MyHomePageState extends State<MyHomePage> {
  final formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Demo Home Page')),
      body: Form(
        key: formKey,
        child: Center(
          child: BlocBuilder<MyCubit, MyState>(
            builder: (context, state) {
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  TextFormField(
                    initialValue: state.text,
                    onChanged: (value) {
                      final newData = state.copyWith(text: value);
                      BlocProvider.of<MyCubit>(context).changeData(newData);
                    },
                    validator: (v) => v!.trim().isNotEmpty ? null : 'error',
                  ),
                  ElevatedButton(
                    // 直接使用Cubit中的验证状态控制按钮
                    onPressed: state.isFormValid ? () { print('hi'); } : null,
                    child: const Text('Press'),
                  ),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

这种方式让业务逻辑与UI完全解耦，更易维护和测试，是Bloc架构的标准实践。

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