Fluent build chat page + access to Turing robot

As an old man who has been focusing on the development of fluent for ten years, I would like to say talk is heap, show me the GIF:

Thank you very much for the screenToGif software. It's only 3MB in size, but it's the artifact of recording screen and converting gif. The wall crack is recommended to you!

How to build a chat page with fluent?

1. Introduce the plug-in bubble: ^1.1.9. This is a chat box with a mouth. There are various style settings. We can encapsulate and make a custom component, ChatRow. The source code is as follows:

class ChatRow extends StatelessWidget{
  String avatarLocalSavedPath;
  String content;
  bool isMyself;

  ChatRow({@required this.avatarLocalSavedPath, 
		  @required this.content, 
		  @required this.isMyself});

  @override
  Widget build(BuildContext context) {
    if(isMyself) {
      return Row(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Bubble(
            margin: BubbleEdges.only(top: 10),
            alignment: Alignment.topRight,
            nip: BubbleNip.rightTop,
            child: Container(
                constraints: BoxConstraints(
                  maxWidth: MediaQuery.of(context).size.width/2
                ),
                child: Text(content)
            ),
          ),
          SizedBox(
              height: 50,
              child: Image.asset(this.avatarLocalSavedPath)),
        ],
      );
    }else{
      return Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          SizedBox(
              height: 50,
              child: Image.asset("assets/TuringRobot.jpg")
          ),
          Bubble(
            margin: BubbleEdges.only(top: 10),
            alignment: Alignment.topLeft,
            nip: BubbleNip.leftTop,
            child: Container(
                constraints: BoxConstraints(
                  maxWidth: MediaQuery.of(context).size.width/2
                ),
                child: Text(this.content)
            ),
          ),
        ],
      );
    }
  }
}

The three parameters here represent the storage path of the user's Avatar, the content of the speech and whether or not the user himself (mainly used to distinguish the left and right lines of construction). The big guy can improve according to his own needs. For example, add the user ID variable, and introduce screenUtil as the size of full-scale adaptation.

2. Bottom input box custom component
This is a complete imitation of wechat. I think the front-end coder of wechat is quite powerful. It's very convenient to enter the text cut send button and the text eliminate cut expression button. Here we use the onChanged callback method of TextField and the onPressed method of send button to solve the switching problem.

3. Cooperation between bottom input box and chat line
The first is to pull up with the chat line when the input box pops up
Here, a SingleChildScrollView is applied to the outer layer of the Column control

  @override
  Widget build(BuildContext context) {
    lcr=_getList(Provider.of<ChatContentProvider>(context).lcim);
    // TODO: implement build
    return SingleChildScrollView(
      child: Column(
            children: <Widget>[
              Container(
                height: MediaQuery.of(context).size.height*8/10,
                  child: GestureDetector(
                    onTap: (){
                      FocusScope.of(context).requestFocus(FocusNode());
                    },
                    child: ListView(
                      //padding: EdgeInsets.only(top: max(MediaQuery.of(context).size.height/2-lcr.length*30, 0)),
                      reverse: true,
                      children: lcr,
                    ),
                  )
              ),
              BottomInput(),
            ],
      ),
    );
  }

The second is to keep the input box and the last message in the ListView fit
Note the order in which messages are received

  void addChatItem(ChatItemModel cim){
    if(lcim.isEmpty)lcim.add(cim);
    else
    lcim.insert(0, cim);
    notifyListeners();
  }

The other is that the reverse property of ListView is set to true

ListView(
         reverse: true,
         children: lcr,
        ),

The third is the limit of the maximum width of chat box

Container(
                constraints: BoxConstraints(
                  maxWidth: MediaQuery.of(context).size.width/2
                ),
                child: Text(content)
            ),
          ),

The data input of the page is to bind the ChatContentProvider to the upper layer of the widget tree. This information is mainly to maintain a List of chat lines.

How to connect Turing robot with fluent?

Register - > get the API key and user ID - > send the request directly with the dio Library
Let's remember what Mr. Li Wenzhou said: one request corresponds to one response

import 'package:dio/dio.dart';
import 'dart:convert' as Convert;

class SelfHttpUtil{
  static const API_KEY="Fill in your own secret key";
  static const USER_ID="Fill in your own user number";
  Dio dio=new Dio();

  Future<String> getHttp(String sentMsg) async{
    try{
      Response response = await dio.post(
        "http://openapi.tuling123.com/openapi/api/v2",
        data: {
          "reqType":0,
          "perception": {
            "inputText": {
              "text": sentMsg
            },
          },
          "userInfo": {
            "apiKey": API_KEY,
            "userId": USER_ID,
          }
        }
      );
      print("get response from turing robot server");
      print(response);
      Map<String, dynamic> data=Convert.jsonDecode(response.data);
      print("data is $data");
      List list=data["results"];
      print("list is $list");
      String replyContent=list[0]["values"]["text"];
      print(replyContent);
      return replyContent;
    }catch(e){
      print(e);
    }
  }
}

Finally, I want to say that I have only been engaged in the development of fluent for 2 weeks. If you are interested, please contact me and do something meaningful together.

Published 23 original articles, praised 0, visited 338
Private letter follow

Posted on Sun, 15 Mar 2020 06:52:49 -0400 by webrajesh