Flutter对话框管理插件dialog_flowtter的使用

简介

DialogFlowtter 是一个Flutter实现的DialogFlow，旨在使与DialogFlow的集成更加容易和快速。它支持空安全，并且提供了多种认证方式、意图检测、消息处理等功能。

关键特性

• 使用Google Auth Json进行身份验证
• 获取已认证的HTTP客户端以便与您的DialogFlow代理通信
• 方便访问所有DialogFlow响应和模型
• 检查DialogFlow响应可能具有的值

为什么选择DialogFlowtter？

当前在Pub上可用的DialogFlow集成包存在一些问题：

• 完全被放弃维护
• 文档不完善
• 缺乏功能
• 缺乏灵活性

DialogFlowtter旨在解决这些问题并添加用户所需的功能。

平台支持

该包完全支持Android、iOS和Web。我们计划测试并为Windows、Linux和MacOS等平台添加支持。

安装

1. 在pubspec.yaml中添加依赖：

   dependencies:
     dialog_flowtter: ^0.3.1
   

2. 将您的dialog_flow_auth.json添加到pubspec.yaml的assets中：

   flutter:
     uses-material-design: true
     assets:
       - assets/dialog_flow_auth.json
   

3. 将您的DialogFlow Auth JSON文件放入assets文件夹，并重命名为dialog_flow_auth.json
4. 运行命令获取包：

   flutter packages get
   

获取密钥

请参考创建服务账户并下载私钥文件。

使用方法

检索密钥

您可以从内存JSON、JSON文件或网络URL设置DialogFlow认证密钥。

// 从内存JSON
DialogAuthCredentials credentials = DialogAuthCredentials.fromJson(json);

// 从JSON文件（异步）
DialogAuthCredentials credentials = await DialogAuthCredentials.fromFile(path);

// 从网络（异步）
DialogAuthCredentials credentials = await DialogAuthCredentials.fromNetwork(url);

然后将凭据传递给DialogFlowtter类：

DialogFlowtter instance = DialogFlowtter(
  credentials: credentials,
);

检测意图

1. 创建DialogFlowtter实例并设置会话ID：

   final DialogFlowtter dialogFlowtter = DialogFlowtter(
     credentials: credentials,
     sessionId: "YOUR_SESSION_ID_HERE",
   );
   

2. 创建QueryInput以指定要发送给DialogFlow的数据：

   final QueryInput queryInput = QueryInput(
     text: TextInput(
       text: "Hi. How are you?",
       languageCode: "en",
     ),
   );
   

3. 通过detectIntent函数发送输入：

   DetectIntentResponse response = await dialogFlowtter.detectIntent(
     queryInput: queryInput,
   );
   

从意图获取信息

可以从DetectIntentResponse中获取返回的信息，例如文本、消息、音频等。

// 获取文本响应
String? textResponse = response.text;
print(textResponse); // Hi, how may I help you?

// 获取消息
Message? messageResponse = response.message;

// 获取音频配置
DetectIntentResponse response = await dialogFlowtter.detectIntent(
  queryInput: QueryInput(text: TextInput(text: "Hi")),
  audioConfig: OutputAudioConfig(),
);

// 获取音频数据
String? audioBase64 = response.outputAudio;
Uint8List? audioBytes = response.outputAudioBytes;

// 获取消息类型
MessageType? messageType = response.message.type;
print(messageType); /// MessageType.card

清理资源

确保在不再使用实例时调用dispose方法以避免内存泄漏。

dialogFlowtter.dispose();

示例代码

以下是一个完整的示例应用程序，展示了如何使用DialogFlowtter与用户交互：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dialog Flowtter Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Dialog Flowtter'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

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

class _MyHomePageState extends State<MyHomePage> {
  late DialogFlowtter dialogFlowtter;
  final TextEditingController _controller = TextEditingController();

  List<Map<String, dynamic>> messages = [];

  @override
  void initState() {
    super.initState();
    DialogFlowtter.fromFile().then((instance) => dialogFlowtter = instance);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title ?? 'DialogFlowtter app'),
      ),
      body: Column(
        children: [
          Expanded(child: AppBody(messages: messages)),
          Container(
            padding: const EdgeInsets.symmetric(
              horizontal: 10,
              vertical: 5,
            ),
            color: Colors.blue,
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    style: TextStyle(color: Colors.white),
                  ),
                ),
                IconButton(
                  color: Colors.white,
                  icon: Icon(Icons.send),
                  onPressed: () {
                    sendMessage(_controller.text);
                    _controller.clear();
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  void sendMessage(String text) async {
    if (text.isEmpty) return;
    setState(() {
      addMessage(
        Message(text: DialogText(text: [text])),
        true,
      );
    });

    DetectIntentResponse response = await dialogFlowtter.detectIntent(
      queryInput: QueryInput(text: TextInput(text: text)),
    );

    if (response.message == null) return;
    setState(() {
      addMessage(response.message!);
    });
  }

  void addMessage(Message message, [bool isUserMessage = false]) {
    messages.add({
      'message': message,
      'isUserMessage': isUserMessage,
    });
  }

  @override
  void dispose() {
    dialogFlowtter.dispose();
    super.dispose();
  }
}

这个示例展示了如何初始化DialogFlowtter，发送用户输入，接收和显示响应消息。希望这些信息对您有所帮助！