Flutter如何实现首个对话框无输入超时后自动弹出第二个对话框

这个需求完全可以实现，核心思路是通过可重置的定时器监听用户输入行为，配合文本内容校验实现无操作自动弹窗。

实现步骤 #

• 第一步：在当前页面的State类中声明所需变量

// 需导入Timer依赖
import 'dart:async';

// 校验用常量
const String OKAY = "OKAY";
// 文本编辑控制器
late final TextEditingController _textEditingController;
// 无操作定时器
Timer? _inactivityTimer;
// 超时阈值，这里设置为5分钟，可自行调整
const Duration _timeoutDuration = Duration(minutes: 5);

• 第二步：修改第一个弹窗逻辑，添加输入监听

原代码中将TextFormField嵌套在TextButton内的写法存在交互问题，点击输入框会触发按钮点击事件关闭弹窗，示例中已修正该写法

// 弹出第一个输入对话框的方法
void _showFirstDialog() {
  showDialog(
    context: context,
    barrierDismissible: false,
    builder: (context) {
      // 弹窗渲染完成后启动定时器
      WidgetsBinding.instance.addPostFrameCallback((_) {
        _startTimer();
      });
      return AlertDialog(
        title: const Text('请输入指定内容'),
        content: const Text('输入"OKAY"可关闭对话框'),
        actions: <Widget>[
          TextFormField(
            controller: _textEditingController,
            // 每次输入内容就重置定时器
            onChanged: (value) {
              _resetTimer();
            },
            validator: (String? word){
              if (word?.trim() != OKAY){
                _NoDialog();
                return "输入错误";
              } else{
                // 输入正确关闭前先销毁定时器
                _cancelTimer();
                Navigator.pop(context);
                return null;
              }
            },
          ),
        ],
      );
    }
  ).then((_) {
    // 无论什么原因关闭弹窗，都销毁定时器避免内存泄漏
    _cancelTimer();
  });
}

• 第三步：实现定时器相关逻辑与超时弹窗

// 启动定时器
void _startTimer() {
  _inactivityTimer = Timer(_timeoutDuration, _handleTimeout);
}

// 重置定时器
void _resetTimer() {
  _cancelTimer();
  _startTimer();
}

// 销毁定时器
void _cancelTimer() {
  if (_inactivityTimer?.isActive ?? false) {
    _inactivityTimer?.cancel();
    _inactivityTimer = null;
  }
}

// 超时触发逻辑
void _handleTimeout() {
  // 校验当前文本为空且页面还处于挂载状态再弹第二个框
  if (_textEditingController.text.trim().isEmpty && mounted) {
    _cancelTimer();
    // 弹出第二个超时对话框
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (context) => AlertDialog(
        title: const Text('长时间未操作'),
        content: const Text('你已5分钟未输入任何内容'),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text('确认'),
          )
        ],
      )
    );
  }
}

注意事项 #

• 页面销毁时需要主动销毁控制器和定时器，避免内存泄漏：

@override
void dispose() {
  _textEditingController.dispose();
  _cancelTimer();
  super.dispose();
}

• 如果需要判断用户完全无任何屏幕操作（不仅仅是输入框输入），可以在根布局包裹Listener组件监听全局触摸事件，每次有触摸事件就触发_resetTimer即可，适配全页面无操作的场景。

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