Flutter用户反馈插件senior_feedback的使用

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

Flutter用户反馈插件senior_feedback的使用

此插件为Senior的反馈服务提供了视觉体验。其目的是让集成到Senior平台的其他应用能够使用此插件来收集反馈，并在内部处理这些反馈。

如何使用

首先，在pubspec.yaml文件中添加依赖项并执行flutter pub get命令：

dependencies:
  senior_feedback: ^1.0.0

请注意检查pub.dev上的最新版本号。

接下来，导入senior_feedback包：

import 'package:senior_feedback/senior_feedback.dart';

在主线程中初始化SeniorFeedback类，并传递应用程序密钥（将用于关联发送的反馈）。还可以通过可选参数baseUrl进行环境切换以供测试使用：

SeniorFeedback.initialize(
  apiKey: '{API_KEY}',
  baseUrl: '{BASE_URL}',
);

调用底部弹出框以显示反馈表单时，需要传递一个FeedbackSource对象，该对象包含生成反馈的数据源信息。示例如下：

//...

const feedbackSource = FeedbackSource(
  userIdentificator: 'EXAMPLE-969696',
  name: 'Lorem Ipsum Test Example',
  email: 'lorem.ipsum.example@est.com.br',
);

SeniorFeedback.showSeniorFeedbackBottomSheet(
  context: context,
  feedbackSource: feedbackSource,
);

此外，还可以传递自定义标签以识别每个应用的特定属性：

//...

const feedbackSource = FeedbackSource(
  userIdentificator: 'EXAMPLE-969696',
  name: 'Lorem Ipsum Test Example',
  email: 'lorem.ipsum.example@est.com.br',
  tags: [
    Tag(name: 'name1', value: 'value1'),
    Tag(name: 'name2', value: 'value2'),
    Tag(name: 'name3', value: 'value3'),
]);

//...

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用senior_feedback插件：

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

void main() {
  // 初始化插件
  SeniorFeedback.initialize(apiKey: 'API_KEY');
  runApp(const MainApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Builder(builder: (context) {
          return Center(
            child: ElevatedButton(
              onPressed: () {
                // 设置反馈来源信息
                const feedbackSource = FeedbackSource(
                  userIdentificator: 'EXAMPLE-969696',
                  name: 'Lorem Ipsum Test Example',
                  email: 'lorem.ipsum.example@est.com.br',
                  tags: [
                    Tag(name: 'name1', value: 'value1'),
                    Tag(name: 'name2', value: 'value2'),
                    Tag(name: 'name3', value: 'value3'),
                  ],
                );

                // 显示反馈底部弹出框
                SeniorFeedback.showSeniorFeedbackBottomSheet(
                  context: context,
                  feedbackSource: feedbackSource,
                );
              },
              child: const Text('发送反馈'),
            ),
          );
        }),
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用senior_feedback插件的一个示例代码案例。senior_feedback是一个用于收集用户反馈的Flutter插件，它允许用户以截图、文本或两者结合的形式提交反馈。

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

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

然后，运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter项目中配置和使用senior_feedback。以下是一个简单的使用示例：

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 配置SeniorFeedback
            final feedbackController = SeniorFeedbackController(
              email: "example@example.com", // 可选的接收反馈的邮箱
              themeColor: Colors.blue, // 主题颜色
              placeholder: "请输入您的反馈...", // 文本框占位符
            );

            // 显示反馈界面
            final result = await feedbackController.showFeedbackDialog(context);

            if (result != null) {
              // 处理用户提交的反馈
              print("用户提交的反馈: ${result.feedback}");
              if (result.screenshot != null) {
                // 保存或处理截图
                final screenshotFile = File(result.screenshot!.path);
                // 你可以在这里上传截图到服务器或者保存到本地
                print("截图已保存: ${screenshotFile.path}");
              }
            }
          },
          child: Text('提交反馈'),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个按钮，点击按钮时会显示senior_feedback的反馈对话框。用户可以在对话框中输入文本并可选地附加截图。提交后，我们可以在控制台中看到用户提交的反馈和截图路径。

注意：

  1. 在实际项目中，你可能需要将截图上传到服务器，这里只是简单地打印了截图路径。
  2. 你可以根据需要自定义SeniorFeedbackController的其他参数，如设置不同的主题颜色、占位符文本或是否显示用户信息输入框等。

确保在实际发布前测试反馈功能，以确保它能正常工作并满足你的需求。

回到顶部