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

We have realized the wechat discovery interface, today this article we will realize the wechat I interface; My interface is generally divided into two parts, one is the same as the discovery interface ListView, the other part is the head of personal information;

We’re not going to go into detail on the lower part of the ListView, but we’re going to focus on how the header is built;

The page layout

Let’s take a general look at the layout code of my interface:

  • I don’t have a header navigation bar in my interface, so in layout, we removed itScaffoldtheappBarProperties;
  • The overall page layout is adoptedStack, because there is a floating camera button in the upper right corner that does not change position as the page slides;
  • At the bottom of theListViewThere are two sub-components,_headerWidget()and_bodyList(), including_bodyList()We went straight to the discovery pagecellTo build, not described here; Let’s focus on the layout of the head;

The head layout

Currently, we just create an empty Container in the header:

  / * * / head
  Widget _headerWidget() {
    return Container(
      color: Colors.red,
      height: 200,); }Copy the code

Remove the head safety zone

We noticed that instead of rendering at the top of the screen, we left the head of the bangs safe; This is actuallyFlutterOfficially set up for Liu Haipingpadding; We can put the head in the following waypaddingRemove:We will beListViewPacking intoMediaQuery.removePaddingInside, and then throughremoveTopTo remove the headpadding; This approach is limited toFlutterOfficially encapsulated attributes;

Adjust the header layout area

Next, we need to resize the area where the parts are placed in the header:The red area is the area where we want to place the avatar and nickname. Let’s take a look at the layout of our head:The overall layout idea is as follows:

  • The overall useRowLayout:
    • The head picture is displayed on the left.
    • Display nickname, wechat and arrow on the right side;
      • The area on the right is used for overall layoutColumn:
        • Upper display nickname;
        • The lower part shows wechat signal and arrow;

The code is as follows:Points to note:

  • Rounded corner of profile picture: Set rounded cornerContainerthedecorationProperty, which isDecorationType, commonly usedBoxDecorationOk, so we need to define the image to beImageProvider�, that isNetworkImageorAssetImageAnd then useDecorationImagewillNetworkImageWrap it up and finally assign it toBoxDecorationtheimageProperties; When I set the rounded corners,ContainerThe width and height must be set, otherwise the picture will not be displayed;
  • Because wechat signal and arrow are displayed at both ends, we can use it nowMainAxisAlignment.spaceBetweenTo layout, then we need to calculate the overall width of the rear area; Otherwise, due to adaptive layout, micro signal and arrow will not be able to be arranged through the spindle;
  • How to get the entire screen width:MediaQuery.of(context).size.width