Last active
September 2, 2021 18:20
-
-
Save Wizpna/acb9f24c8230b6b5abfd3e32f2f4d73c to your computer and use it in GitHub Desktop.
How to build a chatbot in 20 minutes using Flutter and Dialogflow
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
import 'package:flutter_dialogflow/dialogflow_v2.dart'; | |
void main() => runApp(new MyApp()); | |
class MyApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return new MaterialApp( | |
title: 'Example Dialogflow Flutter', | |
theme: new ThemeData( | |
primarySwatch: Colors.deepOrange, | |
), | |
debugShowCheckedModeBanner: false, | |
home: new HomePageDialogflow(), | |
); | |
} | |
} | |
class HomePageDialogflow extends StatefulWidget { | |
HomePageDialogflow({Key key, this.title}) : super(key: key); | |
final String title; | |
@override | |
_HomePageDialogflow createState() => new _HomePageDialogflow(); | |
} | |
class _HomePageDialogflow extends State<HomePageDialogflow> { | |
final List<ChatMessage> _messages = <ChatMessage>[]; | |
final TextEditingController _textController = new TextEditingController(); | |
Widget _buildTextComposer() { | |
return new IconTheme( | |
data: new IconThemeData(color: Theme.of(context).accentColor), | |
child: new Container( | |
margin: const EdgeInsets.symmetric(horizontal: 8.0), | |
child: new Row( | |
children: <Widget>[ | |
new Flexible( | |
child: new TextField( | |
controller: _textController, | |
onSubmitted: _handleSubmitted, | |
decoration: | |
new InputDecoration.collapsed(hintText: "Send a message"), | |
), | |
), | |
new Container( | |
margin: new EdgeInsets.symmetric(horizontal: 4.0), | |
child: new IconButton( | |
icon: new Icon(Icons.send), | |
onPressed: () => _handleSubmitted(_textController.text)), | |
), | |
], | |
), | |
), | |
); | |
} | |
void Response(query) async { | |
_textController.clear(); | |
AuthGoogle authGoogle = | |
await AuthGoogle(fileJson: "assets/credentials.json") | |
.build(); | |
Dialogflow dialogflow = | |
Dialogflow(authGoogle: authGoogle, language: Language.english); | |
AIResponse response = await dialogflow.detectIntent(query); | |
ChatMessage message = new ChatMessage( | |
text: response.getMessage() ?? | |
new CardDialogflow(response.getListMessage()[0]).title, | |
name: "Bot", | |
type: false, | |
); | |
setState(() { | |
_messages.insert(0, message); | |
}); | |
} | |
void _handleSubmitted(String text) { | |
_textController.clear(); | |
ChatMessage message = new ChatMessage( | |
text: text, | |
name: "Promise", | |
type: true, | |
); | |
setState(() { | |
_messages.insert(0, message); | |
}); | |
Response(text); | |
} | |
@override | |
Widget build(BuildContext context) { | |
return new Scaffold( | |
appBar: new AppBar( | |
centerTitle: true, | |
title: new Text("Flutter and Dialogflow"), | |
), | |
body: new Column(children: <Widget>[ | |
new Flexible( | |
child: new ListView.builder( | |
padding: new EdgeInsets.all(8.0), | |
reverse: true, | |
itemBuilder: (_, int index) => _messages[index], | |
itemCount: _messages.length, | |
)), | |
new Divider(height: 1.0), | |
new Container( | |
decoration: new BoxDecoration(color: Theme.of(context).cardColor), | |
child: _buildTextComposer(), | |
), | |
]), | |
); | |
} | |
} | |
class ChatMessage extends StatelessWidget { | |
ChatMessage({this.text, this.name, this.type}); | |
final String text; | |
final String name; | |
final bool type; | |
List<Widget> otherMessage(context) { | |
return <Widget>[ | |
new Container( | |
margin: const EdgeInsets.only(right: 16.0), | |
child: new CircleAvatar(child: new Text('B')), | |
), | |
new Expanded( | |
child: new Column( | |
crossAxisAlignment: CrossAxisAlignment.start, | |
children: <Widget>[ | |
new Text(this.name, | |
style: new TextStyle(fontWeight: FontWeight.bold)), | |
new Container( | |
margin: const EdgeInsets.only(top: 5.0), | |
child: new Text(text), | |
), | |
], | |
), | |
), | |
]; | |
} | |
List<Widget> myMessage(context) { | |
return <Widget>[ | |
new Expanded( | |
child: new Column( | |
crossAxisAlignment: CrossAxisAlignment.end, | |
children: <Widget>[ | |
new Text(this.name, style: Theme.of(context).textTheme.subhead), | |
new Container( | |
margin: const EdgeInsets.only(top: 5.0), | |
child: new Text(text), | |
), | |
], | |
), | |
), | |
new Container( | |
margin: const EdgeInsets.only(left: 16.0), | |
child: new CircleAvatar( | |
child: new Text( | |
this.name[0], | |
style: new TextStyle(fontWeight: FontWeight.bold), | |
)), | |
), | |
]; | |
} | |
@override | |
Widget build(BuildContext context) { | |
return new Container( | |
margin: const EdgeInsets.symmetric(vertical: 10.0), | |
child: new Row( | |
crossAxisAlignment: CrossAxisAlignment.start, | |
children: this.type ? myMessage(context) : otherMessage(context), | |
), | |
); | |
} | |
} |
Check out this medium post, it has detail information: https://medium.com/flutter-community/build-a-chatbot-in-20-minutes-using-flutter-and-dialogflow-8e9af1014463
OR
The project source code: https://github.com/Wizpna/chatbot
Check out this medium post, it has detail information: https://medium.com/flutter-community/build-a-chatbot-in-20-minutes-using-flutter-and-dialogflow-8e9af1014463
OR
The project source code: https://github.com/Wizpna/chatbot
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
this code is giving me an error:
tried calling []("Querytext")