Flutter问卷调查插件survey_flow的使用

Flutter问卷调查插件survey_flow的使用

概述

Survey Flow 是一个用于在 Flutter 应用中创建调查或测验的插件。它允许你轻松定义调查结构并自定义其外观，并且包含一系列预构建的小部件来帮助你显示问题并收集用户响应。

示例

自定义设计 + 底部弹出框

安装

要将 Survey Flow 添加到你的 Flutter 应用中，请将其添加到 pubspec.yaml 文件中：

dependencies:
  survey_flow: ^latest_version

然后运行 flutter pub get 下载包。

使用

要使用 Survey Flow，请在 Dart 代码中导入该包：

import 'package:survey_flow/survey_flow.dart';

创建调查

要创建调查，可以使用 SurveyStep 类之一或创建自己的类：

final List<SurveyStep> steps = [
   InformationStep(
      title: '信息标题',
      description: '描述信息',
      image: StepImage.svg(
         'https://www.svgrepo.com/show/24762/round-done-button.svg',
         source: StepImageSource.network,
         width: 0.3,
      ),
      primaryButton: StepButton(
         action: 'action:notificationsPermission',
         text: '下一步',
      ),
   ),
];

显示调查

要显示调查，使用 SurveyFlow 小部件：

class MySurveyScreen extends StatefulWidget {
   @override
   _MySurveyScreenState createState() => _MySurveyScreenState();
}

class _MySurveyScreenState extends State<MySurveyScreen> {
   final List<SurveyStep> survey = // 创建你的调查

   @override
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title: Text('我的调查')),
         body: SurveyFlow(
            initialSteps: survey,
            onSubmit: (results) {
               // 处理调查结果
            },
            onFinish: () {
               // 处理调查完成
            },
         ),
      );
   }
}

在这个示例中，我们创建了一个显示 SurveyFlow 小部件的屏幕，其中包含我们的 SurveyStep，当用户提交最后一个步骤或某些步骤具有 submit 动作时，将调用 onSubmit 回调（你可以在这里查看动作的工作方式），并且当用户完成调查时将调用 onFinish 回调。

显示模态调查

要显示模态调查，使用 showModalSurveyFlow 函数：

final List<SurveyStep> survey = // 创建你的调查

showModalSurveyFlow(
   context: context,
   initialSteps: survey, 
   onSubmit: (results) {
      // 处理调查结果
   },
   onFinish: () {
      // 处理调查完成
   },
);

预定义的步骤类型

信息步骤 (InformationStep)

InformationStep(
   title: '信息标题',
   description: '描述信息',
   image: StepImage.svg(
      'https://www.svgrepo.com/show/24762/round-done-button.svg',
      source: StepImageSource.network,
      width: 0.3,
   ),
   primaryButton: StepButton.next(),
);

单选步骤 (SingleSelectStep)

SingleSelectStep(
  title: '选择一个选项以继续',
  description: '描述信息',
  options: [
     SelectOption(
        text: '自定义导航选项',
        description: '如果你选择此选项，下一个步骤将是 number_request_step',
        value: 'option_1',
        navigationConditions: [
           ButtonNavigationCondition(
            nextStepId: 'number_request_step',
           ),
        ],
    ),
     SelectOption(
        text: '通知权限',
        value: 'option_2',
        action: 'action:notificationsPermission',
     ),
     SelectOption(
        text: '选项 3',
        description: '选项描述',
        value: 'option_3',
     ),
     SelectOption(
        text: '选项 4',
        value: 'option_4',
     ),
  ],
);

多选步骤 (MultiSelectStep)

MultiSelectStep(
   title: '请选择 1 到 2 个选项以继续',
   description: '描述信息',
   minimumAmountOfOptionsSelected: 1,
   maximumAmountOfOptionsSelected: 2,
   options: [
      SelectOption(
         text: '选项 1',
         description: '选项描述',
         value: 'option_1',
      ),
      SelectOption(
         text: '选项 2',
         value: 'option_2',
      ),
      SelectOption(
         text: '选项 3',
         description: '选项描述',
         value: 'option_3',
      ),
      SelectOption(
         text: '选项 4',
         value: 'option_4',
      ),
   ],
);

数字请求步骤 (NumberRequestStep)

NumberRequestStep(
   id: 'number_request_step',
   title: '数字请求标题',
   description: '描述信息',
   hint: '请输入年龄',
   primaryButton: StepButton.next(
      predicate: ButtonPredicate.moreThan(18),
   ),
   secondaryButton: StepButton.skip(),
);

文本请求步骤 (TextRequestStep)

TextRequestStep(
   title: '文本请求标题',
   description: '描述信息',
   hint: '请输入姓名',
   primaryButton: StepButton.next(),
   secondaryButton: StepButton.skip(),
);

日期请求步骤 (DateRequestStep)

DateRequestStep(
   title: '日期请求标题',
   description: '描述信息',
   hint: '请输入出生日期',
   primaryButton: StepButton.next(),
);

自定义步骤 (Custom Step)

class CustomSurveyStep implements SurveyStep {
   const CustomSurveyStep({
      required this.id,
      required this.title,
      required this.description,
      required this.primaryButton,
      required this.image,
      this.backgroundImage,
   });

   @override
   final String id;

   @override
   final String title;

   @override
   final String description;

   @override
   final StepImage? backgroundImage;

   final StepImage image;
   final StepButton primaryButton;
}

你可以通过继承 SurveyStep 来创建自己的步骤，并为其添加自定义的小部件处理程序。想象力是唯一的限制 ☺️

请求类型 (RequestType)

enum RequestType {
  text,
  textMultiline,
  name,
  email,
  numberInt,
  numberDouble,
  date,
  time,
  dateAndTime,
}

步骤按钮 (StepButton)

enum StepButtonType { primary, secondary }

enum StepButtonStyle { elevated, outlined, text }

按钮谓词 (ButtonPredicate)

ButtonPredicate.moreThan(18);

enum ButtonPredicateType {
   notEmpty,
   lengthMoreThan,
   matches,
   equals,
   lessThan,
   moreThan,
}

按钮导航条件 (ButtonNavigationCondition)

ButtonNavigationCondition.moreThan('my_step_id', 18);

enum ButtonNavigationConditionType {
   nextStep,
   notEmpty,
   lengthMoreThan,
   matches,
   equals,
   lessThan,
   moreThan,
}

选择选项 (SelectOption)

SelectOption(
   text: '选项标题',
   value: '选项值',
   description: '选项描述',
   action: 'action:next',
);

步骤图像 (StepImage)

StepImage.svg(
   'assets/badge.svg',
   source: StepImageSource.local,
   position: ImagePosition(right: 0.0, top: 0.0),
)

enum StepImageSource {
  local,
  network,
}

enum StepImageType {
   image,
   svg,
   lottie,
}

调查主题数据 (SurveyFlowThemeData)

你可以使用 SurveyFlowThemeData 为 SurveyFlow 小部件设置自己的样式。

JSON序列化

你可以使用 JSON 提供调查步骤。每个模型都支持 JSON 序列化。

这意味着你可以使用 Firebase Remote Config、本地 JSON、你的后端或其他服务动态更改调查，而无需更新应用程序。

// 如果你有自己的步骤，请添加转换器
stepsConverters.addAll({
  'customStep': (v) => CustomSurveyStep.fromJson(v),
});

final String initialStepsData = await rootBundle.loadString("assets/initial_steps.json");
final List<dynamic> initialStepsDecoded = jsonDecode(initialStepsData);

// 使用 SurveyStepConverter 从 JSON 转换模型
// 你可以直接在模型中使用注解。
final List<SurveyStep> initialSteps = initialStepsDecoded
        .map((e) => const SurveyStepConverter().fromJson(e as Map<String, dynamic>?))
        .toList();

[
   {
      "id": "information_svg_step",
      "stepType": "information",
      "title": "信息标题",
      "description": "描述信息",
      "image": {
         "path": "https://www.svgrepo.com/show/24762/round-done-button.svg",
         "source": "network",
         "type": "svg",
         "width": 0.3
      },
      "primaryButton": {
         "action": "action:showBottomSheetSurvey",
         "text": "下一步"
      }
   }
]