Flutter滑块评分：实现提交前用户确认功能求助

核心修改点 #

1. 修复默认滑块值：将_scaleNotifier初始值从0改为1.0，匹配你要求的默认1分设置。
2. 添加确认对话框：在提交按钮点击事件中弹出确认弹窗，仅在用户确认后执行提交逻辑。
3. 保留上下文用于弹窗：在_submit的ValueListenableBuilder中保留BuildContext，确保能正常唤起对话框。

修改后的关键代码片段 #

class SurveyFeedbackDialog {
  
  ValueNotifier<bool> _processingNotifier = ValueNotifier(false);
  // 修正默认值为1.0
  ValueNotifier<double> _scaleNotifier = ValueNotifier(1.0);
  
  // _scaleNumbers、_scaleSlider 保持原有代码不变

  Widget get _submit {
    return ValueListenableBuilder(
      // 保留BuildContext用于弹窗展示
      builder: ((BuildContext context, bool value, __) {
        return AppButton(
          title: 'Submit',
          disabled: value,
          isProcessing: value,
          pressed: () {
            // 弹出确认对话框
            showDialog(
              context: context,
              barrierDismissible: false,
              builder: (dialogContext) => AlertDialog(
                title: const Text('确认提交'),
                content: Text('你确定要提交当前的反馈评分吗？当前评分：${_scaleNotifier.value.floor()}分'),
                actions: [
                  TextButton(
                    onPressed: () => Navigator.of(dialogContext).pop(),
                    child: const Text('取消'),
                  ),
                  TextButton(
                    onPressed: () {
                      Navigator.of(dialogContext).pop();
                      // 用户确认后执行提交流程
                      _processingNotifier.value = true;
                      
                      var requestParam = SurveyFeedbackRequest(
                        answer: _scaleNotifier.value.floor().toString(),
                        surveyId: _survey.id,
                        globalToken: AppConfig.globalToken,
                        mobileno: AppConfig.playerInfo!.msisdn!.replaceAll("+", ""),
                      );

                      _surveyBloc.submitFeedback(requestParam);
                      EventLogger.instance.TrackEvent(pageName: 'SurveyFeedback', event: 'completed');
                    },
                    child: const Text('确认'),
                  ),
                ],
              ),
            );
          },
        );
      }),
      valueListenable: _processingNotifier,
    );
  }
}

说明 #

• 弹窗使用Flutter原生AlertDialog实现，明确提示用户当前选择的评分，避免误提交。
• 仅在用户点击「确认」后才会触发API请求和状态更新，完全符合提交前确认的需求。
• 设置barrierDismissible: false防止用户点击弹窗外部误关闭，提升交互安全性。

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