Flutter调查问卷流程插件flutter_survey_flow的使用

Flutter调查问卷流程插件flutter_survey_flow的使用

Flutter Survey Flow 是一个全面的包，旨在帮助在 Flutter 应用程序中创建和管理调查。它提供了多种调查步骤，包括单选题、多选题、是非题、日期选择器、时间选择器、滑块、切换开关、评分等。此包非常适合需要用户反馈、数据收集或任何形式交互式问卷的应用。

特性

• 单选题（单项选择）：允许用户从列表中选择一个选项。
• 多选题（多项选择）：允许用户从列表中选择多个选项。
• 是非题：简单的二元选择问题。
• 日期选择器：允许用户选择一个日期。
• 时间选择器：允许用户选择一个时间。
• 滑块：允许用户在一个范围内评分或选择值。
• 切换开关：允许用户在两种状态之间切换。
• 评分：允许用户在某个范围内评分。
• 通知和准备步骤：自定义的通知和准备步骤。

入门指南

前提条件

• Flutter SDK: >=1.17.0
• Dart SDK: >=3.2.2 <4.0.0

安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_survey_flow: ^0.0.1

然后运行 flutter pub get 来安装该包。

使用方法

基本示例

以下是如何在 Flutter 应用程序中使用 Flutter Survey Flow 包的基本示例：

import 'package:flutter/material.dart';
import 'package:flutter_survey_flow/flutter_survey_flow.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Survey Flow Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const SurveyFlowScreen(),
    );
  }
}

高级示例

以下是如何在 Flutter 应用程序中使用 Flutter Survey Flow 包的高级示例：

import 'package:flutter/material.dart';
import 'package:flutter_survey_flow/flutter_survey_flow.dart';

void main() {
  runApp(const MyApp());
}

/// MyApp 是应用程序的根小部件。
/// 它设置应用程序的主题和主屏幕。
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Survey Flow Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Survey Flow Demo Home Page'),
    );
  }
}

/// MyHomePage 是一个状态小部件，演示了如何使用 Flutter Survey Flow 包的各种调查步骤。
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  /// 增加计数器并开始调查。
  void _incrementCounter() {
    setState(() {
      _counter++;
    });

    FlutterSurveyFlow.startSurvey(
      context: context,
      steps: [
        SurveyStep.multipleChoiceSingleSelect(
          id: '1',
          title: '你最喜欢的颜色是什么？',
          description: '请选择一个选项',
          options: [
            SurveyOption(
              id: '1',
              title: '红色',
            ),
            SurveyOption(
              id: '2',
              title: '绿色',
            ),
            SurveyOption(
              id: '3',
              title: '蓝色',
            ),
            SurveyOption(
              id: '4',
              title: '黄色',
            ),
          ],
        ),
        SurveyStep<String>.yesNo(
          id: '2',
          title: '你喜欢 Flutter 吗？',
          description: '请选择是或否',
        ),
        SurveyStep<DateTime>.datePicker(
          id: '3',
          title: '你的生日是什么时候？',
          description: '请从日期选择器中选择你的出生日期',
          answer: DateTime.now(),
        ),
        SurveyStep<TimeOfDay>.timePicker(
          id: '4',
          title: '你几点起床？',
          description: '请从时间选择器中选择你偏好的时间',
          answer: TimeOfDay.now().replacing(minute: 0),
        ),
        SurveyStep<double>.slider(
          id: '5',
          title: '你对这个应用满意吗？',
          description: '请在 0 到 100 的范围内评分',
          answer: 50.0, // 默认值
        ),
        SurveyStep<bool>.toggleSwitch(
          id: '6',
          title: '你想接收通知吗？',
          description: '请选择是或否',
          answer: true,
        ),
        SurveyStep<int>.rating(
          id: '7',
          title: '给这个应用评分',
          description: '请在 1 到 5 的范围内评分',
          answer: 5,
        ),
        SurveyStep<bool>.notification(
          id: '8',
          title: '感谢你完成调查！',
          message: '你的反馈非常重要。',
          answer: true,
        ),
      ],
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '你已经按了多少次按钮：',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
    );
  }
}