Flutter learning -18- wechat project learning – Chat page data processing

This is the 16th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021.

1. PopupMenuButton

Adding events, leading, and acyions

To achieve the event can be gesture click, today we mainly study PopupMenuButton

ItemBuilder is a mandatory menu equivalent to the cell control, let’s define

Widget _menuItemBuilder(String imageName,String title,) {
  return Container(
    child: Row(
      children: [
        Image.asset(imageName,width: 20,),
        Text(title,style: TextStyle(fontSize: 14,color: Colors.white),)
      ],
    ),
  );
  
  
}
Copy the code

PopupMenuButton’s itemBuilder returns an array, so we use PopupMenuItem

child: PopupMenuButton(
    color: Colors.black,
  itemBuilder: (BuildContext context){
    return <PopupMenuItem<String>>[
      PopupMenuItem(
          child: _menuItemBuilder('images/ Initiate group chat. PNG '.'Start a group chat')),
      PopupMenuItem(
          child: _menuItemBuilder('images/ Add friends.png '.'Add a friend')),
      PopupMenuItem(
          child: _menuItemBuilder('Images/Scan 1.png'.'Sweep')),
      PopupMenuItem(
          child: _menuItemBuilder('images/ receipt.png '.'Collect and pay')),]; }Copy the code

Adjust the distance and background of menu, and then adjust the distance between item picture and text.

2. Prepare network data

We can customize data requests, database addresses

The new interface

So we edit the interface and when it comes in we return an array of data names, set it to 50, add the name and the content and the head where @cName is a random name, @cParagraph is a random paragraph

The generated data rules are viewed in the Mock.

Head address

Using a new window to open an avatar, we can simply convert this index to reach a different avatar.

@natural(10,60) We take random photos from 10 to 60

3. Network request

We use the system’s network to request HTTP and look at HTTP on Pub

Let’s copy the top oneHTTP: ^ 0.13.4Open up ourpubspec.yaml

Align, put get, and you can use it. Let’s open up the interface we edited earlier and copy this URL

Import the head

import 'package:http/http.dart' as http;
Copy the code

We call it in initState, where we use asynchronous request Async

Future<void> getListData()
 async {
   final url = Uri.parse('http://rap2api.taobao.org/app/mock/293940/home/chat/list');
   // var response = http.
  var response = await http.get(url);
  print('respose code is = ${response.statusCode}');
  print('respose body is = ${response.body}');
   
 }
@override void initState() {
  // TODO: implement initState
  super.initState();
  getListData();
}
Copy the code