Flutter_收起键盘按钮_点击空白收起键盘

QQ20220815-174243.gif

苹果手机输入法，没有收起键盘按钮，在表单逻辑中，不是很友好。
解决： 点击空白页面收起键盘，以及在输入法上方自定义一个收起键盘按钮。

使用

        return FocusMonitoring(
          child: Scaffold(
                      TextField(
                        ...............
              )
           )
        );

组件

/// 取消焦点收起键盘
class FocusMonitoring extends StatefulWidget {
  final Widget child;

  const FocusMonitoring({Key? key, required this.child}) : super(key: key);

  @override
  State createState() => _FocusMonitoringState();
}

class _FocusMonitoringState extends State
    with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return KeyboardVisibilityBuilder(builder: (context, isKeyboardVisible) {
      try {
        if (Platform.isIOS) {
          if (isKeyboardVisible) {
            Future.delayed(Duration(milliseconds: 500), () {
              showOverlay(context);
            });
          } else {
            removeOverlay();
          }
        }

        return tapView(isKeyboardVisible);
      } catch (e) {
        return tapView(isKeyboardVisible);
      }
    });
  }

  tapView(bool isKeyboardVisible) {
    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () {
        hideKeyBoard();
      },
      child: Container(
        margin: EdgeInsets.only(
            bottom: (isKeyboardVisible && Platform.isIOS) ? 34.r.r : 0),
        child: widget.child,
      ),
    );
  }

  ///收起键盘
  hideKeyBoard() {
    FocusScopeNode currentFocus = FocusScope.of(context);
    if (!currentFocus.hasPrimaryFocus && currentFocus.focusedChild != null) {
      FocusManager.instance.primaryFocus?.unfocus();
    }
  }

  OverlayEntry? overlayEntry;
  late AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
        duration: Duration(milliseconds: 200),
        reverseDuration: Duration(milliseconds: 200),
        vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    controller.dispose();
  }

  showOverlay(BuildContext context) {
    if (overlayEntry != null) {
      removeOverlay();
    }
    FocusScopeNode currentFocus = FocusScope.of(context);
    if (currentFocus.hasPrimaryFocus || currentFocus.focusedChild == null) {
      return;
    }
    OverlayState? overlayState = Overlay.of(context);

    overlayEntry = OverlayEntry(builder: (context) {
      return Positioned(
          bottom: MediaQuery.of(context).viewInsets.bottom,
          right: 0.0,
          left: 0.0,
          child: FadeTransition(
            opacity: controller,
            child: GestureDetector(
              onTap: () {
                hideKeyBoard();
              },
              child: Container(
                alignment: Alignment.center,
                color: TCS.grayf5f,
                height: 34.r,
                child: TU.d10("收起键盘"),
              ),
            ),
          ));
    });
    overlayState?.insert(overlayEntry!);
    controller.forward();
  }

  removeOverlay() {
    controller.reverse();
    if (overlayEntry != null) {
      overlayEntry?.remove();
      overlayEntry = null;
    }
  }
}

class Unfocus {
  Unfocus() {
    FocusManager.instance.primaryFocus?.unfocus();
  }
}