Flutter问卷调查插件surveysparrow_flutter_sdk的使用

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

Flutter问卷调查插件surveysparrow_flutter_sdk的使用

SurveyS Sparrow 的 SDK 介绍

SurveyS Sparrow 的 SDK 可以让你在移动应用的不同触点收集用户反馈。你可以通过几行代码轻松地将调查嵌入到你的移动应用中。本文档将引导你了解 SDK 的的功能，以便在开始集成移动 SDK 到你的应用之前。

如何工作？

你可以安装 SDK 到 Xcode 或 Android Studio，并根据需要配置何时触发调查。基于这些条件，当特定条件满足时，你将能够调用调查。例如，假设你的应用允许人们预订出租车（如 Uber 或 Lyft）。你可能希望在行程完成后显示反馈调查。你可以很容易地使用我们的 SDK 来实现这一点。

SpotCheck 文档

SpotCheck 文档在这里：SpotCheck-Flutter-Docs

调查正常 SDK 分享

调查正常 SDK 分享在这里：SDK Share

请通过 GitHub 提交 bug/问题，我们会尽快修复。

示例代码

import 'package:example/SpotCheckScreen.dart';
import 'package:flutter/material.dart';
import 'package:surveysparrow_flutter_sdk/surveysparrow.dart';

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

final SpotCheck spotCheck = SpotCheck(
  domainName: "",
  targetToken: "",
  // 不应传递 userDetails 为 const
  userDetails: {},
  variables: {},
  customProperties: {},
  sparrowLang: "",
);

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 这个 widget 是你应用程序的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SurveyScreen(),
    );
  }
}

class SurveyScreen extends StatelessWidget {
  SurveyScreen({
    Key? key,
  }) : super(key: key);
  final domainController = TextEditingController();
  final tokenController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("SurveySparrow"),
      ),
      body: Builder(
        builder: ((context) => Center(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.center,
                childrenen: [
                  ElevatedButton(
                      onPressed: () {
                        Navigator.of(context).push(
                          MaterialPageRoute(
                            builder: (context) => const SpotCheckScreen(),
                          ),
                        );
                      },
                      child: const Text("SpotCheck"))
                ],
              ),
            )),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何使用 surveysparrow_flutter_sdk 插件来在 Flutter 应用中集成问卷调查功能的代码示例。这个插件允许你从 SurveySparrow 平台加载和显示问卷。

首先，确保你已经在你的 pubspec.yaml 文件中添加了 surveysparrow_flutter_sdk 依赖：

dependencies:
  flutter:
    sdk: flutter
  surveysparrow_flutter_sdk: ^最新版本号  # 请替换为实际的最新版本号

然后，运行 flutter pub get 来获取依赖包。

接下来，在你的 Flutter 项目中，你可以按照以下步骤使用 surveysparrow_flutter_sdk：

  1. 导入插件：

在你的 Dart 文件中（例如 main.dart），导入插件：

import 'package:surveysparrow_flutter_sdk/surveysparrow_flutter_sdk.dart';
  1. 初始化插件并加载问卷：

在你的 Flutter 应用中，初始化插件并加载问卷。你需要提供问卷的 URL 或 ID。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter SurveySparrow Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SurveySparrowPage(
        surveyUrl: 'https://app.surveysparrow.com/s3/your-survey-url',  // 替换为你的问卷 URL
        onCompletion: (result) {
          // 用户完成问卷后的回调处理
          print('Survey completed with result: $result');
        },
        onError: (error) {
          // 加载问卷时发生错误的回调处理
          print('Error loading survey: $error');
        },
      ),
    );
  }
}

class SurveySparrowPage extends StatefulWidget {
  final String surveyUrl;
  final Function(Map<String, dynamic>) onCompletion;
  final Function(String) onError;

  SurveySparrowPage({
    required this.surveyUrl,
    required this.onCompletion,
    required this.onError,
  });

  @override
  _SurveySparrowPageState createState() => _SurveySparrowPageState();
}

class _SurveySparrowPageState extends State<SurveySparrowPage> {
  late SurveySparrowClient surveySparrowClient;

  @override
  void initState() {
    super.initState();
    surveySparrowClient = SurveySparrowClient(
      surveyUrl: widget.surveyUrl,
      onCompletion: widget.onCompletion,
      onError: widget.onError,
    );

    // 加载问卷
    surveySparrowClient.loadSurvey();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SurveySparrow Demo'),
      ),
      body: surveySparrowClient.widget,  // 显示问卷的 Widget
    );
  }
}

class SurveySparrowClient {
  late final String surveyUrl;
  late final Widget widget;
  final Function(Map<String, dynamic>) onCompletion;
  final Function(String) onError;

  SurveySparrowClient({
    required this.surveyUrl,
    required this.onCompletion,
    required this.onError,
  }) {
    // 初始化插件并获取问卷的 Widget
    SurveySparrowFlutterPlugin.instance.loadSurvey(
      surveyUrl: surveyUrl,
      completionHandler: (result) {
        onCompletion(result);
      },
      errorHandler: (error) {
        onError(error);
      },
    ).then((surveyWidget) {
      widget = surveyWidget!;
    }).catchError((error) {
      onError(error.toString());
    });
  }

  void loadSurvey() {
    // 这个方法会在 initState 中被调用，以初始化问卷加载
  }
}

注意：

  • 上述代码是一个简化的示例，用于展示如何集成 surveysparrow_flutter_sdk。
  • 实际的 SurveySparrowFlutterPlugin API 可能有所不同，因此请参考 SurveySparrow Flutter SDK 的官方文档（如果可用）以获取最新和最准确的用法。
  • 替换 'https://app.surveysparrow.com/s3/your-survey-url' 为你的实际问卷 URL。
  • onCompletion 和 onError 回调用于处理用户完成问卷和加载问卷时发生错误的情况。

确保你已经正确配置了 SurveySparrow 账户，并且问卷 URL 是有效的。希望这个示例能帮助你在 Flutter 应用中集成 SurveySparrow 问卷调查功能。

回到顶部