Flutter对话流管理插件dialogflow_flutter的使用

dialogflow_flutter 是一个帮助用户在应用程序中使用Dialogflow聊天机器人的Flutter插件。

支持项目

⭐ 如果你想支持这个项目，请考虑给项目提供建议或提交拉取请求！

安装

1. 在你的项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  dialogflow_flutter: ^0.0.3

1. 使用命令行安装包：

$ flutter packages get

平台支持

示例代码

下面是使用 dialogflow_flutter 插件创建聊天机器人的完整示例代码。

import 'package:bubble/bubble.dart';
import 'package:dialogflow_flutter/googleAuth.dart';
import 'package:flutter/material.dart';
import 'package:dialogflow_flutter/dialogflowFlutter.dart';

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.blue,
        primarySwatch: Colors.blue,
      ),
      home: ChatBotScreen(),
    );
  }
}

class ChatBotScreen extends StatefulWidget {
  [@override](/user/override)
  _ChatBotScreenState createState() => _ChatBotScreenState();
}

class _ChatBotScreenState extends State<ChatBotScreen> {
  final messageInsert = TextEditingController();
  List<Map> messages = List();

  // 响应用户输入并调用DialogFlow API获取回复
  void response(query) async {
    // 使用Google认证信息初始化DialogFlow对象
    AuthGoogle authGoogle = await AuthGoogle(fileJson: "assets/farmtech-fh9j-3db6e0409c71.json").build();
    DialogFlow dialogflow = DialogFlow(authGoogle: authGoogle, language: "en");

    // 调用detectIntent方法获取AI回复
    AIResponse aiResponse = await dialogflow.detectIntent(query);

    // 更新UI以显示AI回复
    setState(() {
      messages.insert(0, {
        "data": 0,
        "message": aiResponse.getListMessage()[0]["text"]["text"][0].toString()
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        toolbarHeight: 70,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(30),
            bottomRight: Radius.circular(30),
          ),
        ),
        elevation: 10,
        title: Text("Dailog Flow Chatbot"),
      ),
      body: Container(
        child: Column(
          children: [
            Flexible(
              child: ListView.builder(
                reverse: true,
                itemCount: messages.length,
                itemBuilder: (context, index) => chat(messages[index]["message"].toString(), messages[index]["data"]),
              ),
            ),
            Divider(height: 6.0),
            Container(
              padding: EdgeInsets.only(left: 15.0, right: 15.0, bottom: 20),
              margin: const EdgeInsets.symmetric(horizontal: 8.0),
              child: Row(
                children: [
                  Flexible(
                    child: TextField(
                      controller: messageInsert,
                      decoration: InputDecoration.collapsed(
                        hintText: "发送您的消息",
                        hintStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0),
                      ),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.symmetric(horizontal: 4.0),
                    child: IconButton(
                      icon: Icon(Icons.send, size: 30.0),
                      onPressed: () {
                        if (messageInsert.text.isEmpty) {
                          print("空消息");
                        } else {
                          setState(() {
                            messages.insert(0, {"data": 1, "message": messageInsert.text});
                          });
                          response(messageInsert.text);
                          messageInsert.clear();
                        }
                      },
                    ),
                  )
                ],
              ),
            ),
            SizedBox(height: 15.0)
          ],
        ),
      ),
    );
  }

  // 创建聊天气泡组件
  Widget chat(String message, int data) {
    return Padding(
      padding: EdgeInsets.all(10.0),
      child: Bubble(
        radius: Radius.circular(15.0),
        color: data == 0 ? Colors.blue : Colors.orangeAccent,
        elevation: 0.0,
        alignment: data == 0 ? Alignment.topLeft : Alignment.topRight,
        nip: data == 0 ? BubbleNip.leftBottom : BubbleNip.rightTop,
        child: Padding(
          padding: EdgeInsets.all(2.0),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              CircleAvatar(
                backgroundImage: AssetImage(data == 0 ? "assets/bot.png" : "assets/user.png"),
              ),
              SizedBox(width: 10.0),
              Flexible(
                child: Text(
                  message,
                  style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}