flutter_wechat

Source code address :github.com/ding-zou/fl…

🔥A flutter app which clones! This app is based on Flutter, which is in the process of improvement. Your comments are welcome

Contains basically all the components of FLUTTER, suitable for this project to learn about flutter.

The page display

Main function implementation QA

1. The alphabet on the right of the address book page

Q: How to implement list scrolling without alphabet scrolling

A: Since the contacts list is scrollable, we came up with the idea of using Stack to put the character list in A fixed position without sliding as the ListView slides.

Q: How to control the alphabet roll to the corresponding position to trigger the outer contour circle?

A: First we use the outer outline of BoxDecoration, and then we need A flag to control the display of the outline. In fact, we control the color of the outline. We define A color, and change the color by setState when scrolling.

Q: How do I determine the position of the corresponding letter in the ListView?

A: Knowing that each ListTile is built with the same height, we can calculate the position of each letter in the ListView. We simulated the data received, and used a map to store the corresponding position of the corresponding letter, for example, the position of letter A is 110, and then a has 10 address book items, so the position of B is the position of A plus 10* the height of each Item. We also have one line for each letter, so we have to add the height of the line.

2. The search bar

Q: How to implement custom search bar through TextField?

A: We pass in an InputDecoration control by setting the decoration property of the TextField. In this control, we can set many properties to customize the display. If it is not enough for your situation, you can pack it in the outer layer.

decoration: InputDecoration(
  icon: Container(
    padding: EdgeInsets.only(left: 10),
    child: Icon(Icons.search,
                size: 23, color: Colors.grey[400])),
  contentPadding: EdgeInsets.fromLTRB(0.0.0.13),
  border: InputBorder.none,
  hintText: widget.hint,
  hintStyle: TextStyle(
    fontSize: 15)),Copy the code

3. Click the button in the upper right corner of the homepage to pop up

Q: How do you implement this popover?

A: We can do this through the official PopupMenuButton, which can be built in the following way

PopupMenuButton(
  offset: Offset(0.70),
  color: Color(0xff4c4c4c),
  itemBuilder: (BuildContext context) {
    return <PopupMenuItem<int> > [/// Set your popover Item array
      PopupMenuItem(
        child: _popupItem(0xe69e.0),
        value: 0,)]; },/// The Icon of the Settings button is of the Widget type
  icon: Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(10),
      border: Border.fromBorderSide(BorderSide(
        color: Colors.black87,
        style: BorderStyle.solid))),
    child: Icon(
      Icons.add,
      size: 19,
      color: Colors.black87,
    ),
  ))
Copy the code

Q: How do I set the pop-up position? What if it blocks other controls?

A: We can pass in an offset from its offset property

4. Image red dots and navigation red dots

Q: How to display red dots on pictures?

A: We can do that by the universal Stack, we can wrap it in A Container, give A big width and A big height, and then put A picture in it, and put the small red dot in the upper right-hand corner through the tourists

See the following implementation:

Container(
  height: 43,
  width: 43,
  child: Stack(children: <Widget>[
    Positioned(
      left: 0,
      bottom: 0,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(4),
        child: Image.network(
          imgUrl 
          fit: BoxFit.cover,
          height: 40,
          width: 40,
        ))),
    Positioned(
      right: 0,
      top: 0,
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(4),
          border: Border.fromBorderSide(
            BorderSide(width: 1, color: Colors.red[600]))),
        child: Container(
          color: Colors.red[600],
          height: 6,
          width: 6(), ()] (), (Copy the code

Q: how does the *BottomNavigationBar* provided by a flutter implement the red dot?

A: You can use the BottomNavigationBar to build the red dot in the above manner, setting the Icon and activeIcon respectively

DONE

• Home page

• Address book page (Address book page alphabet jump)

• Found the page

• My page

• Search page

• Chat page

TODO

• Moments page
• My information card page
• Settings page
• Payment page
• multilingual

Source code address :github.com/ding-zou/fl…