Flutter自定义组件插件supsis_flutter_widget的使用

Supsis Flutter Widget 是一个可定制的聊天组件，您可以轻松将其集成到您的 Flutter 应用程序中。此组件允许用户与您的支持团队进行实时通信。

特性

• 易于集成: 几乎无需任何努力即可将聊天组件添加到您的应用中。
• 可定制化: 可以根据用户的详细信息和部门设置个性化支持。
• 响应式界面: 组件能够无缝适应不同的屏幕尺寸和方向。
• 实时通信: 允许用户和您的支持团队之间即时消息传递。

系统需求

• Flutter SDK 2.0 或更高版本
• 互联网权限: 确保您的应用具有互联网访问权限。在 AndroidManifest.xml 文件中添加以下权限：

<uses-permission android:name="android.permission.INTERNET" />

安装

该库通过 pub.dev 提供。要将其添加到项目中，请按照以下步骤操作：

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

dependencies:
  flutter:
    sdk: flutter
  supsis_flutter_widget: ^0.0.5

然后在终端运行以下命令以获取包：

flutter pub get

使用方法

要在您的应用程序中使用 SupsisVisitor 小部件，请先将其导入并将其添加到您的小部件树中。

示例代码

以下是一个完整的示例，展示如何在您的 Flutter 应用程序中使用 supsis_flutter_widget。

main.dart 文件

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

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

class MyApp extends StatelessWidget {
  final SupsisVisitorController _controller = SupsisVisitorController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Supsis Flutter Widget 示例',
      debugShowCheckedModeBanner: false, // 关闭调试横幅
      home: Scaffold(
        appBar: AppBar(
          title: Text('Supsis Flutter Widget 示例'),
        ),
        body: Stack(
          children: [
            SupsisVisitor(
              controller: _controller,
              // 替换为您的实际域名
              domainName: '您的_domain_name',
              environment: 'prod', // 或者 'beta'
              onConnected: () {
                print('访客已连接');
              },
              onDisconnected: () {
                print('访客已断开连接');
              },
            ),
            Positioned(
              bottom: 20,
              left: 20,
              child: Column(
                children: [
                  ElevatedButton(
                    onPressed: () {
                      _controller.open();
                      print('聊天窗口已打开');
                    },
                    child: Text('打开聊天'),
                  ),
                  SizedBox(height: 10),
                  ElevatedButton(
                    onPressed: () {
                      _controller.close();
                      print('聊天窗口已关闭');
                    },
                    child: Text('关闭聊天'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

函数说明

以下是 SupsisVisitorController 的一些常用函数及其说明：

示例应用

以下是一个完整的示例应用，展示了如何使用 supsis_flutter_widget。

main.dart 文件

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

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

class MyApp extends StatelessWidget {
  final SupsisVisitorController _controller = SupsisVisitorController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Supsis Flutter Widget 示例',
      debugShowCheckedModeBanner: false, // 关闭调试横幅
      home: Scaffold(
        appBar: AppBar(
          title: Text('Supsis Flutter Widget 示例'),
        ),
        body: Stack(
          children: [
            SupsisVisitor(
              controller: _controller,
              // 替换为您的实际域名
              domainName: '您的_domain_name',
              environment: 'prod', // 或者 'beta'
              onConnected: () {
                print('访客已连接');
              },
              onDisconnected: () {
                print('访客已断开连接');
              },
            ),
            Positioned(
              bottom: 20,
              left: 20,
              child: Column(
                children: [
                  ElevatedButton(
                    onPressed: () {
                      _controller.open();
                      print('聊天窗口已打开');
                    },
                    child: Text('打开聊天'),
                  ),
                  SizedBox(height: 10),
                  ElevatedButton(
                    onPressed: () {
                      _controller.close();
                      print('聊天窗口已关闭');
                    },
                    child: Text('关闭聊天'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}