如何在Flutter应用上显示Google-Assistant-output Basic Card等丰富信息

Question

I made a chatbot with dialogflow and ( https://github.com/diegodalbosco/flutter_dialogflow ) this is working normaly with simple text response.

Then when I add Google Assistant on a respond (Intent) like: answers with Basic Card.

When i lunch this application on android phone, I can write normally and i can see normal answers. But when i try to write "Query" or "Intent" something to call the Google Assistant Basic Card response, application stop and error.

Could someone help?

I believe that Google Assistant response is supported by Flutter?

Could some one explain how to set, display rich message of Google Assistant response like Basic Card in flutter App?

ThankYou

I haded: "

and
"ChatMessage message = new ChatMessage(
      text: response.queryResult.fulfillmentText
 ?? new df.BasicCard(),"
and
"new Container(
              margin: const EdgeInsets.only(top: 5.0),
              child: new Text(text?? new df.BasicCard()),
            ),

"

looking for docs on:

https://pub.dev/documentation/flutter_dialogflow_v2/latest/model_query_result/QueryResult/fulfillmentMessages.html for fulfillmentMessages property

- https://pub.dev/documentation/flutter_dialogflow_v2/latest/model_message_basic_card/BasicCard-class.html for BasicCard

- https://pub.dev/documentation/flutter_dialogflow_v2/latest/model_query_result/QueryResult-class.html for QueryResult class

import 'package:flutter_dialogflow_v2/flutter_dialogflow_v2.dart' as df;
import 'package:flutter/material.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,
      ),
      home: new MyHomePage(
        title: 'Flutter Demo Dialogflow',
      ),
    );
  }
}

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

  final String title;
  final List<df.BasicCard> fulfillmentMessages = <df.BasicCard>[];


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

class _MyHomePageState extends State<MyHomePage> {
  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();
    df.AuthGoogle authGoogle =
        await df.AuthGoogle(fileJson: 'assets/project-id.json').build();
    df.Dialogflow dialogflow =
        df.Dialogflow(authGoogle: authGoogle, sessionId: '123456');
    df.DetectIntentResponse response = await dialogflow.detectIntent(query);
    ChatMessage message = new ChatMessage(
      text: response.queryResult.fulfillmentText
 ?? new df.BasicCard()
,
      name: 'Bot',
      type: false,
    );
    setState(() {
      _messages.insert(0, message);
    });
  }

  void _handleSubmitted(String text) {
    _textController.clear();
    ChatMessage message = new ChatMessage(
      text: text,
      name: 'Rances',
      type: true,
    );
    setState(() {
      _messages.insert(0, message);
    });
    response(text);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Dialogflow V2'),
      ),
      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 Image.asset('img/placeholder.png')),
      ),
      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?? new df.BasicCard()),
            ),
          ],
        ),
      ),
    ];
  }

  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])),
      ),
    ];
  }

  @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),
      ),
    );
  }
}

I expect the output like: when I ask the preset Intent for BasicCard, the app show response with BasicCard but the actual output is error: " E/flutter ( 4203): [ERROR:flutter/lib/ui/ui_dart_state.cc(148)] Unhandled Exception: NoSuchMethodError: The method '[]' was called on null. E/flutter ( 4203): Receiver: null E/flutter ( 4203): Tried calling: "

and no response on the flutter chat App.

Answer 1

For Google Assistant Actions, you need to use one of our client libraries (Node.js or Java). The Dialogflow library are designed to support other platforms but not the Google Assistant specifically (some things might work cross-platform, but other like cards will not).