preface

Since 2000, I have been working on Flutter development for more than a month now. While the project is temporarily concluded, I would like to summarize the layout tips.

Welcome to my Gthub and CSDN.

Ps. Is there an easy way to move CSDN’s blogs to nuggets?

conclusion

There are many controls in Flutter, but there are only a few that are used frequently. These controls can complete 80% of the layout of Flutter:

  1. The View class:Text, Image, TextField, MaterialButton, Icon/IconButton;
  2. ViewGroup: Row, Column, Stack;
  3. Layout positioning related:Container, Padding, Align, Flexible, Expanded, Offstage;

Row/Column can be understood as the LinearLayout in Android. No matter how complex the interface is, it can be divided into N Row/Column combinations.

details

  1. Row/ColumnIn themainAxisSize: MainAxisSize.minYou can makeRow/ColumnThe width/length is minimized, and is wrapped in a child view without gaps, similar to androidwrap_contentThe effect of;
  2. Row/ColumnYou can think of it as androidLinearLayout, its inner child view can be wrapped in a layerFlexibleThe implementation is similar toweightProportion division effect;
  3. letContainerFill the entire parent layout, implementmatch_parentEffect, the width and height can be set towidth: double.infinity(inside is 1.0/0.0, god is not magic);
  4. IntrinsicHeight/IntrinsicWidthYou can makeRow/ColumnKeep the inner view of the same height/width, for example: 
    IntrinsicHeight(
  // A/B is at the same height. Suppose A is 20 and B was 10, then B will push up the height to 20
  child: Row(children: <Widget>[A, B]),
)
Copy the code
  5. Rounded corners of the implementation control can be usedMaterialTo achieve a rounded corner of the background can be usedContainerExample: 
    Material(
  clipBehavior: Clip.antiAlias, // It must be added, otherwise rounded corners will not work
  borderRadius: BorderRadius.circular(5.0),
  child: ...
)

Container(
  decoration: BoxDecoration(color: Colors.red, borderRadius: BorderRadius.circular(5.0)),
  child: ...
)
Copy the code
  6. GestureDetectorDefault does not respond to blank position click, need to addbehavior: HitTestBehavior.translucent;
  7. To be continued…