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

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

概述

DialogFlowtter 是一个帮助你更轻松快速地构建与 DialogFlow 集成的包。

• 使用 Google Auth JSON 进行身份验证。
• 获取与你的 DialogFlow 代理进行通信的认证 HTTP 客户端。
• 简单访问所有 DialogFlow 响应和模型。
• 检查 DialogFlow 响应可能包含的所有值。

特性

此插件在 Android、iOS 和 Web 上完全支持。我们计划测试并添加对 Windows、Linux 和 MacOS 的支持，因为这些平台在 Flutter SDK 中变得更加成熟。

开始使用

每次实例化 DialogFlowtter 类时，该类都会创建一个使用从 DialogFlow Auth JSON 获取的凭据进行身份验证的 HTTP 客户端。

使用示例

IconButton(
  color: Colors.white,
  icon: Icon(Icons.send),
  onPressed: () {
    sendMessage(_controller.text);
    _controller.clear();
  },
),

完整的示例代码

以下是一个完整的示例，展示了如何在 Flutter 应用中使用 dialog_flowtter_plus 插件来实现对话框管理和与 DialogFlow 的交互。

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

// 主应用
void main() {
  runApp(MyApp());
}

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

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

  final String? title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

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

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

  [@override](/user/override)
  void initState() {
    super.initState();
    // 从文件加载 DialogFlowtter 实例
    DialogFlowtter.fromFile().then((instance) => dialogFlowtter = instance);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title ?? 'DialogFlowtterPlus 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,
      );
    });

    // 设置你的项目ID（可选）
    // dialogFlowtter.projectId = "your_project_id";

    // 检测意图并获取响应
    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](/user/override)
  void dispose() {
    dialogFlowtter.dispose();
    super.dispose();
  }
}