I found a treasure trove of websites that explain the actual flutter better than I did.

Preparing Network Data

This step is not very important, some fake data, is not the focus of trouble can skip.

First introduced a url: rap2.taobao.org/account/log… This website is used to build the network data we need. It is very simple to register an account, so I won’t say much here.

After registration, create a new warehouse and simply name it:

Then click to enter the warehouse, you can see the following picture:

A sample interface is generated by default. Take a look at the generation rules for the sample interface. It doesn’t matter if you don’t understand, we can directly start to create an interface by ourselves, as shown in the figure:

Click the edit button in the upper right corner to enter the edit mode and create a response chatList of type Array. The chatlist data is then generated, with imageUrl representing the user profile picture for each chat. The initial value of the user’s avatar is @natural(20,99), which is mock.js code. Here is the related introductionmockjs.com/

For each piece of chat data, in addition to imageUrl, you also need the user name name and the message content message. @cname is used to generate random Chinese names, and @cparagraph is used to generate random Chinese paragraphs to represent the chat content. Here we are just simple to construct the data needed for the chat list, the real chat list data is certainly not so simple…When you are ready to edit, remember to click save. After saving, click the icon in the red circle to get the data

Chat page navigation bar

The preparatory work

The default display page is changed to_currentIndexChange it to 0, create a chat directory, and put the relevant files there.

Add a plus button

The plus button thing, we’ve added something like this before, the appBar actions is where we need to add code.If we follow this path, we will need to implement a popup menu class ourselves. Actually Flutter provides us with some ready-made classes that can do something similar.

PopupMenuButton

PopupMenuButtonClass is used to pop up a menu with a mandatory parameter ofitemBuilderTo implement what it needs to display.PopupMenuItemIs the class used to present the content. Here’s a little detail,PopupMenuButtonThere is aonSelectedProperty, which is a closure, which means that something is selectedPopupMenuItem, the closure is called. But there is a premise that everyPopupMenuItemthevalueThe value must not be nullonSelectedClosure, I card here for a long time, the Internet for a long time to find information did not explicitly talk about here. There’s nothing else to tell. It’s all fairly simple.One more little detail, how do you set it upPopupMenuButtonYou can directly set its colorYou can also set the theme of the APPcardColor, but this priority is not set directlyPopupMenuButtonHigh color.

Request network data

pub.flutter-io.cn/

This site allows you to search for packages that Flutter uses. We use the HTTP packet to request our network data. This package is officially provided by Flutter. Actual project development may not use the HTTP package, but will mostly use DIO to request network data. This section only describes how to use the official HTTP package.

Import the HTTP packet

After pasting, you need to update, which is to get the code corresponding to the package. You can go through the top onePub get, or you can enter it in the terminalflutter packages get After the command is executed, the package is ready to use.

Import the HTTP header file and take the alias

Send the request

The request is sent atinitStateThe inside.getData()It’s followed by an async which means asynchronous execution. Async needs to be used with await, which is followed by time-consuming code. So the above program will print first and then print the status code for the request;Click on another page and go back to the current page to find that the initState method has gone through again, because we haven’t saved the state yet. We’ll see how to keep the Widget state later.

Process the returned data

First, I will introduce how to convert the JSON data returned by the request into a Map in The Flutter. In our iOS development, we convert it into a dictionary. There is no dictionary type in the Flutter, the corresponding type is Map. And if you convert the Map to JSON. In iOS we know that an NSJSONSerialization class is used to process JSON data. Also, there is a special JsonCodec class that handles flutter.

JSON and Map rotate each other

Where json isJsonCodecThe instance. You need to import'dart:convert'Header files. The flutter can also be passedisTo see if it’s a certain type.

New chat model

Except for the method in the red box, nothing else is new. The method in the red box is a factory method, which is one of the design patterns used to initialize objects. In addition to the default initialization method, you can also use this factory method to instantiate a Chat object. Once the model is established, the response data can be processed

Process the response data

Future is used here. You can see the official document for the explanation of FutureThe dart. Cn/tutorials/l…

Use FutureBuilder to display the interface

A lot of times we rely on asynchronous data to dynamically update the UI. For example, when we open a page we need to fetch data from the Internet, display a load box while fetching data, and then render the page when the data is fetched. Of course, we can do all of this with the StatefulWidget. But because this scenario of relying on asynchronous data to update the UI is very common in real world development, Flutter provides it specificallyFutureBuilderTo quickly implement this functionality.FutureBuilderWill depend on afuture, it will depend onfutureTo dynamically construct itself. thisfutureWe were just getting ready. aboutFutureBuilderThe introduction ofThis articleIt’s explained in great detail. The final complete code looks like this:

Do not use FutureBuilder

Having said that, we can use FutureBuilder to quickly implement the presentation of asynchronous network data, or we can do it ourselves, so let’s do it ourselves. Use a private variable _chatList to record the requested data, and then display different pages based on the value of _chatList. The code is as follows:

GetData () can be followed by getData() because the return value of getData is a FuturethenMethod can also be used with error trappingcatchError, the callback when completedwhenComplete, timeout settingtimeOutWait, that’s an interesting way to write it. Just click all the way down…

The refresh function is cancelled after timeout

On each request, reset_cancelConnectThe value of the.

Keep the Widget in state

If we click back and forth between the address book page and the chat page, we will find that each time we click to enter the current page, it will reload and initState() will be called again. Scroll to the bottom of the address book page and click on it again to find that it is back to the top by default. Why does this happen? Precisely because the state of our Widget is not maintained, it is recreated every time it is displayed.

Dart has A concept of Mixins: the official explanation is that if you give class A Mixins A B, then A will have the properties and methods of B. Kind of like OC class extension. This language feature is needed to maintain the state of the Widget. There are three steps:

1. Mixins classAutomaticKeepAliveClientMixin
2. rewritewantKeepAlivemethods
3. Call the parent Builder method

Do the same for the address book page. Then click back and forth again to find or did not hold the state?? One of the biggest problems here is that our root Widget doesn’t hold the state, so how can we hold the state of our sub-widgets…

Using a PageView

Dart and you’ll see that the body directly takes an element from the array and displays it as the root Widget. That’s not going to hold the state, so PageView is going to hold the state.Using PageView, the code looks like this:Click jump to another page to do this directly with _pageController. Once you use PageView, you can just swipe right and left to switch between different pages. We generally do not need this effect, can be set directly off. It is also ok to reposition the bottom navigation bar in the sliding method if necessary.

Use slide toggle to solve bugs

Disable slide switching