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

📝 [Flutter] Learn to cultivate memory, [programmer essential skills]

📔 [Flutter] wechat project combat!

1. Write at the front

In the last article has been found on the wechat interface interface layout building code, so today will continue to write wechat combat project address book interface!

  • 【 Basic Grammar 】

Dart uses var, final, and const

Dart Indicates the num of the data type

Dart String of data type

Dart data type list&Map

Dart method and arrow function

Dart’s method passes optional parameters and methods as parameters

Dart, Dart, Dart, Dart

Dart classes and objects in Flutter

Dart constructor of Flutter

Dart factory constructor & singleton & Initializer list

Dart class methods and object operators for Flutter

Inheritance of Flutter Dart

Dart abstract classes and interfaces in Flutter

Dart, Dart, Dart, Dart, Dart, Dart

  • [Collection of Basic Components]

The base component of Flutter [01] Text

[02] Container

[03] Scaffold

[04] Row/Column

The base component of Flutter [05] Image

Base Component [06] Icon of Flutter

Base component [07] Appbar

[08] BottomNavigationBar

The base component of the Flutter [09] Button

  • [Actual Combat Collection of project]

[01] Build the basic framework of [Flutter] wechat project

【02】 My interface construction (PART 1)

【03】 My interface construction (II)

[04] Build the discovery interface

[05] Build the address book interface (part 1)

GitHub project address

2. Address book list

The cell of the contact list is not explained here. It was introduced in the previous article.

Dart: friends_data.dart: friends_data.dart: friends_data.dart: friends_data.dart: friends_data.dart: friends_data.dart: friends_data.dart: friends_data.dart: friends_data.dart: friends_data.dart: friends_data.dart: friends_data.dart: friends_data.dart: friends_data.dart: friends_data.dart: friends_data.dart: friends_data.dart: friends_data.dart: friends_data.dart: friends_data.dart: friends_data.dart

2.1 Model Building

//model
class Friends {
  final String? imageUrl;/ / picture URL
  final String? name;// Friend name
  final String? indexLetter;// Index letter (group header)
  final String? imageAssets;/ / picture
  // constructor
  Friends({this.imageUrl,this.name,this.indexLetter,this.imageAssets});
}

// List of friends
List <Friends>datas =
[
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/27.jpg',
      name: 'Lina',
      indexLetter: 'L'
  ),
  Friends(
      imageUrl: 'https://randomuser.me/api/portraits/women/17.jpg',
      name: 'and',
      indexLetter: 'F'),... Omit... ]Copy the code

The previous article showed four fixed cells in the header. Now it’s time to display the list below. Let’s add the data source for the list.

late final List<Friends> _listDatas = [];// List data

  @override
  void initState(a){
    super.initState();
    // Create data
    // _listDatas.addAll(datas);
    // _listDatas.addAll(datas);_listDatas.. addAll(datas).. addAll(datas).. addAll(datas);/ / data
    print(_listDatas);
  }
Copy the code

In order to have more data, we add a piece of data several times to achieve the purpose of more data. Add _listDatas.addall (datas) to the list. This is a syntactic format.

Now that the data is available, the display code for the list should be changed to the following.

2.2 List display logic

The number of data in the list is the number of data in the header plus the number of data in the list.

The display of the list cell is subject to judgment. If there are less than 4 cells (0~3), the header will display the local image data (_headerData). The other cells are all the list data. The list starts at index 5, so subtract the number of headers.

2.3 Group Processing

The group header and the list go together, using the top and bottom structure and using the Column structure as follows:

  • Set head
Container(
          height: 30,
          color: GlobalThemeColor,
        )
Copy the code

Now that the group header is in place, to display the group header data, put the following code in the _itemForRow method:

groupTitle: _listDatas[index4 -].indexLetter,

Copy the code

We also need to do some processing in the cell, as follows:

  • Group header display effect

2.4 Group header merging processing

Now each cell has a group header, we need to merge them together to achieve the effect of grouping, how to do?

The first cell must have the group header displayed, so the second and subsequent cells are not displayed. Then the data must be sorted as follows:


    / / sorting
    _listDatas.sort((Friends a,Friends b){
      returna.indexLetter! .compareTo(b.indexLetter!) ; });Copy the code

Now that the data is sorted, let’s have a look at the sorting effect, as shown below:

  • Combine and process

  • Grouping effect

All of the above content is the list part of the address book interface analysis and code implementation.

Interested partners hands-on hands-on it! GitHub project address

The next article will focus on the index bar implementation, which is a bit trickier. You can advance their own thinking, how to achieve it!

3. Write in the back

Follow me, more content continues to output

  • CSDN
  • The Denver nuggets
  • Jane’s book

🌹 if you like, give it a thumbs up 👍🌹

🌹 feel harvest, can come to a wave of collection + attention, so as not to find you next time I 😁🌹

🌹 welcome everyone to leave a message exchange, criticism and correction, forwarding please indicate the source, thank you for your support! 🌹