Flutter调查问卷插件nps_survey的使用

发布于 1周前 作者 nodeper 来自 Flutter

Flutter调查问卷插件nps_survey的使用

nps_survey

一个Flutter组件，旨在从用户那里收集净推荐值（Net Promoter Scores, NPS）。

示例

Example from iOS

安装

在您的pubspec.yaml文件中添加依赖：

dependencies:
  nps_survey: ^latest_version # 替换为最新版本号

然后运行以下命令来安装包：

flutter pub add nps_survey

使用方法

导入库

在Dart文件中导入此库：

import 'package:nps_survey/nps_survey.dart';

显示对话框

通过调用showNPSDialog方法显示NPS调查对话框。您可以传递上下文和回调函数作为参数。当用户提交反馈后，回调函数将被触发，并接收到用户的反馈文本和评分。

NPSSurvey().showNPSDialog(
    context: context,
    callback: (feedback, score) {
      print('User Feedback: $feedback');
      print('Score: $score');
    }
);

完整示例Demo

下面是一个完整的Flutter应用程序示例，演示了如何使用nps_survey插件：

// ignore_for_file: avoid_print
import 'package:flutter/material.dart';
import 'package:nps_survey/nps_survey.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter nps_survey Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter nps_survey'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void _displayPopup() {
    NPSSurvey().showNPSDialog(
      context: context,
      callback: (feedback, score) {
        print('User Feedback: $feedback');
        print('Score: $score');
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            _displayPopup();
          },
          child: const Text("Display the nps_survey popup"),
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

这个例子创建了一个简单的Flutter应用，在主界面上有一个按钮，点击该按钮会弹出NPS调查对话框。用户可以输入反馈并选择评分，之后这些信息会被打印到控制台。

希望这能帮助您更好地理解和使用nps_survey插件！如果您有任何问题或需要进一步的帮助，请随时提问。


更多关于Flutter调查问卷插件nps_survey的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter调查问卷插件nps_survey的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用nps_survey插件的一个详细代码示例。nps_survey插件允许你轻松地创建并展示NPS（净推荐值）调查问卷。

第一步：添加依赖

首先，你需要在你的pubspec.yaml文件中添加nps_survey插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  nps_survey: ^最新版本号  # 请替换为当前最新版本号

第二步：导入插件

在你的Dart文件中导入nps_survey插件。

import 'package:nps_survey/nps_survey.dart';

第三步：配置并展示NPS调查问卷

以下是一个完整的示例，展示了如何配置并展示一个NPS调查问卷。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter NPS Survey Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SurveyScreen(),
    );
  }
}

class SurveyScreen extends StatefulWidget {
  @override
  _SurveyScreenState createState() => _SurveyScreenState();
}

class _SurveyScreenState extends State<SurveyScreen> {
  final NPSSurveyController _surveyController = NPSSurveyController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('NPS Survey Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 显示NPS调查问卷
            final result = await _surveyController.showSurvey(
              context: context,
              title: '客户满意度调查',
              subTitle: '请对我们的服务进行评分',
              commentPlaceholder: '请输入您的建议或意见',
              submitButtonText: '提交',
              // 自定义评分选项（可选）
              customRatings: [
                NPSSurveyRating(value: 0, label: '非常不满意'),
                NPSSurveyRating(value: 1, label: '不满意'),
                NPSSurveyRating(value: 2, label: '一般'),
                NPSSurveyRating(value: 3, label: '满意'),
                NPSSurveyRating(value: 4, label: '非常满意'),
              ],
              // 提交后的回调函数
              onSubmit: (surveyResult) {
                // 处理提交结果
                print('Survey Result: ${surveyResult.toMap()}');
              },
            );

            // 处理关闭事件（例如用户取消）
            if (result == null) {
              print('Survey closed without submission.');
            }
          },
          child: Text('开始调查'),
        ),
      ),
    );
  }
}

解释

  1. 依赖添加：在pubspec.yaml文件中添加nps_survey依赖。
  2. 导入插件：在你的Dart文件中导入nps_survey。
  3. 创建控制器：使用NPSSurveyController来管理调查问卷的显示和结果。
  4. 显示调查问卷：通过调用_surveyController.showSurvey方法来显示NPS调查问卷。你可以配置标题、副标题、提交按钮文本等参数，还可以自定义评分选项。
  5. 处理结果：通过onSubmit回调函数来处理用户提交的调查结果。

注意事项

  • 确保你使用的nps_survey插件版本与Flutter SDK兼容。
  • 仔细阅读nps_survey插件的官方文档，了解更多配置选项和高级用法。

这个示例展示了如何使用nps_survey插件来创建和显示一个简单的NPS调查问卷，并处理用户提交的结果。你可以根据自己的需求进行进一步的自定义和扩展。

回到顶部