The widget on which setState() or markNeedsBuild() was called exception

一、异常信息

I/flutter (30504): [E]: message: {error: setState() or markNeedsBuild() called during build.
I/flutter (30504): This Overlay 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.
I/flutter (30504): The widget on which setState() or markNeedsBuild() was called was:
I/flutter (30504):   Overlay-[LabeledGlobalKey<OverlayState>#b5023]
I/flutter (30504): The widget which was currently being built when the offending call was made was:
I/flutter (30504):   NotificationListener<KeepAliveNotification>, stackTrace: #0      Element.markNeedsBuild.<anonymous closure> (package:flutter/src/widgets/framework.dart:4424:11)
I/flutter (30504): #1      Element.markNeedsBuild (package:flutter/src/widgets/framework.dart:4439:6)
I/flutter (30504): #2      State.setState (package:flutter/s
I/flutter (30504): [E]: message: {error: 'package:flutter/src/widgets/navigator.dart': Failed assertion: line 2845 pos 18: '!navigator._debugLocked': is not true., stackTrace: #0      _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:51:61)
I/flutter (30504): #1      _AssertionError._throwNew (dart:core-patch/errors_patch.dart:40:5)
I/flutter (30504): #2      _RouteEntry.handlePush.<anonymous closure> (package:flutter/src/widgets/navigator.dart:2845:18)
I/flutter (30504): #3      TickerFuture.whenCompleteOrCancel.thunk (package:flutter/src/scheduler/ticker.dart:407:15)
I/flutter (30504): #4      _rootRunUnary (dart:async/zone.dart:1434:47)
I/flutter (30504): #5      _CustomZone.runUnary (dart:async/zone.dart:1335:19)
I/flutter (30504): <asynchronous suspension>
I/flutter (30504): #6      TickerFuture.whenCompleteOrCancel.thunk (package:flutter/src/scheduler/ticker.dart:406:5)
I/flutter (30504): <asynchronous suspension>
I/flutter (30504): }
[GETX] Instance "StudentRecordingController" has been created
[GETX] Instance "StudentRecordingController" has been initialized
I/flutter (30504): [E]: message: {exception : HttpException: Invalid statusCode: 403, uri = https://cdn.lingoace.com/avator/1925098231/2uk0cy-20210727073545, stackTrace: }
I/HwViewRootImpl(30504): removeInvalidNode jank list is null
 

二、产生该问题的类

 
class HistoryRecordingWidget extends StatefulWidget {
  const HistoryRecordingWidget({Key? key}) : super(key: key);
 
  @override
  State<HistoryRecordingWidget> createState() => _HistoryRecordingWidgetState();
}
 
class _HistoryRecordingWidgetState extends State<HistoryRecordingWidget> {
  // TapGestureRecognizer _recognizer = TapGestureRecognizer();
  late TapGestureRecognizer _recognizer;
 
  @override
  void initState() {
    super.initState();
    _recognizer = TapGestureRecognizer();
    _recognizer..onTap = _handleOnTap();
  }
 
  _handleOnTap() {
    if (mounted) {
 
    }
  }
 
  @override
  void dispose() {
    _recognizer.dispose();
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(
          color: Colors.blue,
          width: 0.5,
        ),
      ),     
      child: Text.rich(
        TextSpan(
          children: [
            TextSpan(
              text: "Student Recording tips",
            ),
            TextSpan(
                text: "Student Recording tips in history2",
                style: TextStyle(
                  color: Color(0xFF777FDE),
                  fontWeight: FontWeight.w400,
                  decoration: TextDecoration.underline,
                ),
                // recognizer: _recognizer
                //   ..onTap = () {
                //     _handleOnTap();
                //   }),
                recognizer: _recognizer),
          ],
        ),
      ),
    );
  }
}

三、修复方案

1、TapGestureRecognizer 直接出实话。

2、_recognizer.onTap 的复制使用匿名函数。并且点击事件的赋值不在intState中进行初始化。

recognizer: _recognizer
                  ..onTap = () {
                    _handleOnTap();
                  }),

修复后的代码如下：

class _HistoryRecordingWidgetState extends State<HistoryRecordingWidget> {
  TapGestureRecognizer _recognizer = TapGestureRecognizer();
 
  _handleOnTap() {
    if (mounted) {
        //to do 
    }
  }
 
  @override
  void dispose() {
    _recognizer.dispose();
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(
          color: Colors.blue,
          width: 0.5,
        ),
      ),
      child: Text.rich(
        TextSpan(
          children: [
            TextSpan(
              text: "Student Recording tips",
            ),
            TextSpan(
              text:"Student Recording tips in history2",
              style: TextStyle(
                color: Color(0xFF777FDE),
                fontWeight: FontWeight.w400,
                decoration: TextDecoration.underline,
              ),
              recognizer: _recognizer
                ..onTap = () {
                  _handleOnTap();
                },
            ),
          ],
        ),
      ),
    );
  }
}

四、同样的案例

当子一个子Widget中，有点击事件处理时，但是点击处理的逻辑是通过匿名函数传递到子类的，这种情况建议传递过来的匿名函数放在匿名函数中。

类似的代码接口如下：

class TestWidget extends StatelessWidget {
  final VoidCallback? click;
  const TestWidget({Key? key,this.click}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        ///在匿名函数中调用外部传递的匿名函数
        if(click != null) {
          click!();
        }
      },
      child: Container(
        color: Colors.blue,
        width: 100,
        height: 100,
      ),
    );
  }
}