This is the 12th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021.

1. Page analysis



My main list page is similar to the Discovery page except that there is oneThe head the viewandFloating cameraPart so we can divide the whole into 3 parts, head view, list, and camera, since the camera is always in the upper right corner we can use it as a wholestackPackaging, and thenListViewWrap the head.

2. Head view

  Widget headView(){
    return Container(
      height: 160,

      padding: EdgeInsets.only(left: 20,top: 50),
      child:Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
         Container(

            height: 70,
            width: 70,
            decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(14),
            image: DecorationImage(image: AssetImage('images/ wechat emotix.png '))

          ),

         ),
          Container(
         / / title

          child: Column(
            //NickName
            crossAxisAlignment: CrossAxisAlignment.start,

            children: [
              Container(
                child:  Text('helloFlutter',style: TextStyle(fontSize: 18,fontWeight: FontWeight.bold),),
              ),

              / / title
             Container(
               child:   Row(
                 mainAxisAlignment: MainAxisAlignment.spaceBetween,



                 children: [
                   Text('sdasd',style: TextStyle(fontSize: 14),),
                   / / arrow
                   Image(
                     image: AssetImage('images/icon_right.png'),
                     width: 15() [() [() [() [() [() [() [() [() }Copy the code

So here we have the general effect and we need to adjust it a little bit, so here we put the head and the content to the right of the headrowMiddle left and right layout, layout from the top. Use up and down for content under main headings and subheadingsColumnLayout, subheadings, and arrows use left and right layout, and the final layer is nested to get the effect shown above, but not as desired.

  • Expend

Expanded component is mainly covered with the current spindle method, there is no space left in the spindle direction. We can just wrap a layer in the outermost layer, and set the spacing to adjust the control size

The final result

  • Image fillet Settings

We can set the BoxDecoration to do the wrapping

 BoxDecoration(
  borderRadius: BorderRadius.circular(14),
  image: DecorationImage(image: AssetImage('images/ wechat emotix.png '),fit: BoxFit.cover)

),
Copy the code

BorderRadius, fit: BoxFit. Cover cut.

3. The camera

Container(
  // color: Colors.red, Top Margin 40
  margin: EdgeInsets.only(top: 40, right: 15),
  height: 25,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: [
      Image(image: AssetImage('images/camera. PNG')),,),Copy the code

And the main thing here is to position him in the upper right-hand corner, so we need to pack a layer with Row so that we can position itself, and of course we can also use Positioned

Positioned(
    top: 40,
    right: 15,
    child: Image.asset('images/camera. PNG',height: 25)),Copy the code
  • removePadding

Basically removing the upper and lower security zones

factory MediaQuery.removePadding({
  Key? key,
  required BuildContext context,
  bool removeLeft = false.bool removeTop = false.bool removeRight = false.bool removeBottom = false.required Widget child,
})
Copy the code

We remove the safe zone above

It goes straight to the top



Let’s adjust the height of the head



Effect: