“This is the sixth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

PopupMenuButton

Today comes to the first page, chat page. Before adding actions for click events in AppBar, the onTap of GestureDetector was used. Today we introduce another PopupMenuButton

  • offset: Specifies the offset distance
  • itemBuilder: is an array that needs to return a specified typetypedef PopupMenuItemBuilder<T> = List<PopupMenuEntry<T>> Function(BuildContext context);
  • child: Responds to the button
appBar: AppBar(
  title: Text('WeChat'),
  centerTitle: true,
  actions: [
    Container(
      margin: EdgeInsets.only(right: 10),
      child: PopupMenuButton(
        color: Color.fromRGBO(1.1.1.0.5),
        offset: Offset(0.60),
        itemBuilder: (BuildContext context) {
          return [
            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')),]; }, child: Image.asset('images/round. PNG',
             width: 30() [() [()Copy the code

After running, it looks like this:

Network Data Preparation

This is all about local data, and it’s a little exciting to think about network data requests. However, since there is no server, we can Mock out some virtual data and introduce some useful websites:

  • The database
  • Mock
  • Virtual User Information
  • The Dart installation package

Open RAP database this website, registered after the new warehouse

Then create a new interface:

Edit interface information:

I don’t have an argument here, and I return an array of responses

The following rules for initial values can be found in Mock. For pictures, they are found in websites that simulate user information. The last digit of the image URL (20-70) corresponds to different simulated user profile pictures. With this simulated data, we can start using network requests.

Network request

Here is HTTP, search HTTP on Pub

There is a copy button. After copying, import the library directly into pubspec.yaml. The latest version is ^0.13.4

Click Pub get to use it after the installation is complete! The library also covers more detailed usage

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    // Get data
    getData();
  }

  getData() async {
    final url =
        Uri.parse('http://rap2api.taobao.org/app/mock/293759/home/chat/list');
    var response = await http.get(url);
    print('Response status: ${response.statusCode}');
    print('Response body: ${response.body}');
  }
Copy the code

Async means to execute this method asynchronously. In iOS, a block callback is used to indicate that the network data is coming back. It is relatively simple to use a keyword “await” to indicate that the data is coming back.