I recently got into Flutter. Flutter was highly praised on the Internet, and it was developed and promoted by a big company like Google.

Let’s cut to the chase! Study frame, want to be inside commonly used control skilled use above all, can go deep step by step behind, investigate its principle.

preface

Related articles: Learn about Flutter

Learn about Flutter

The article structure

  • Color Property
  • Child Property
  • Alignment Property
  • Constraints Property
  • Margin Property
  • Padding Property
  • Decoration Property
  • ForegroundDecoration Property
  • Transform Property

introduce

Container is similar to UIView in iOS, providing functions such as drawing, locating, and resizing. Container is usually used to load other child controls. If the Container has no child controls, it automatically fills the screen. On the contrary, it adjusts its own size according to the size of the child control, so as to achieve self-adaptive effect.

Note:

When using a Container, you usually need to have a parent control instead of using a Container alone. Common parent controls include Center Widget, Padding Widget, Column Widget, Row Widget, and Scaffold Widget.

A, Color Property

This property sets the backgroundColor of the Container, similar to the backgroundColor of UIView in iOS. Use as follows:

  • Colors Class
//Container Colors class Color_Property_Colors extends StatelessWidget{@override Widget build(BuildContext context) {returnCenter(child: Container(//color: color.green,// normal color //color: color.green [200],// with shadow (equal to transparency) color: Color.green.shade200,// same as above),); }}Copy the code

The rendering looks like this:

  • Color Class
Color class Color_Property_Color extends StatelessWidget{@override Widget build(BuildContext context) {returnCenter(child: Container(//color: color (0xFFFFFFFF),// color: color.fromargb (255, 66, 165, 245), color: Color.fromrgbo (66, 165, 245, 1.0),); }}Copy the code

The rendering looks like this:

Note:

R = Red, G = Green, B = Blue, R = Red, G = Green, R = 0, f = 0, f = 0, f = 0 B = Blue, O = Opacity

Second, the Child Property

As mentioned in the introduction, if there are no child controls inside the Container, it fills the entire screen; If there are child controls, the Container automatically resizes them. In addition, Container can hold only one child control. If you want to hold more child controls, you can set the child controls to Row, Column, and Stack(all of which have a children property).

  • Adding child controls
Child class Child_Property extends StatelessWidget{@override Widget build(BuildContext context) {returnCenter(child: Container(color: color.fromrgbo (66, 165, 245, 1.0), child: Text("Flutter Cheatsheet"),),); }}Copy the code

The rendering looks like this:

Three, the Alignment of the Property

The Alignment attribute applies to the layout of child controls in containers. The Alignment, FractionalOffset, and AlignmentDirectional attributes are aligned

  • The Alignment codes are as follows:
//Container attribute Alignment class Alignment_Property extends StatelessWidget{@override Widget build(BuildContext context) {return Center(
      child: Container(
        color: Color.fromARGB(255, 66, 165, 245),
        child: Text("Flutter Cheatsheet", style: TextStyle(fontSize: 30.0),), // Do not add this sentence, the Container will adapt to the child size; // Alignments: alignments (0.0, 0.0), alignments: alignment.center,// equivalent to above),); }}Copy the code

The effect is as follows:

The Alignment coordinate system diagram is as follows:

Commonly used equivalent attributes:

Alignment. BottomCenter Corresponding Alignment(0.0, 1.0)

Alignment. BottomLeft Corresponding Alignment(-1.0, 1.0)

Alignment. BottomRight Corresponding Alignment(1.0, 1.0)

Center Corresponding Alignment(0.0, 0.0)

CenterLeft Corresponding Alignment(-1.0, 0.0)

CenterRight Corresponding Alignment(1.0, 0.0)

TopCenter corresponding Alignment(0.0, -1.0)

Alignment. TopLeft Corresponding Alignment(-1.0, -1.0)

Alignment. TopRight Corresponding Alignment(1.0, -1.0)

  • The FractionalOffset attribute is very similar to the Alignment described above, with the only difference being the coordinate system: the coordinate system is X:-1.0–1.0; Y:-1.0–1.0, FractionalOffset coordinates are X:0.0–1.0, Y:0.0–1.0.

FractionalOffset coordinate system diagram is as follows:

The code is as follows:

// FractionalOffset of the Container property class Alignment_FractionalOffset extends StatelessWidget{@override Widget build(BuildContext context) {return Center(
      child: Container(
        color: Color.fromARGB(255, 66, 165, 245),
        child: Text("Flutter Cheatsheet", style: TextStyle(fontSize: 30.0),), // Do not add this sentence, the Container will adapt to the child size; And will be full of screen / / alignment: FractionalOffset (0.5, 0.5), alignment: FractionalOffset. Center, / / equivalent to the above),); }}Copy the code

The common equivalent attributes are as follows

FractionalOffset. Corresponding FractionalOffset bottomCenter (0.5, 1.0)

FractionalOffset. Corresponding FractionalOffset bottomLeft (0.0, 1.0)

FractionalOffset. Corresponding FractionalOffset bottomRight (1.0, 1.0)

FractionalOffset. Center corresponds to FractionalOffset(0.5, 0.5)

FractionalOffset. Corresponding FractionalOffset centerLeft (0.0, 0.5)

FractionalOffset. Corresponding FractionalOffset centerRight (1.0, 0.5)

FractionalOffset. Corresponding FractionalOffset topCenter (0.5, 0.0)

FractionalOffset. TopLeft corresponds to FractionalOffset(0.0, 0.0)

FractionalOffset. Corresponding FractionalOffset topRight (1.0, 0.0)

  • AlignmentDirectional has this attribute, and there’s a little bit of an incident: the web says AlignmentDirectional has itTwo coordinate systemsBecause,TextDirection. LTR and TextDirection. RTL, but after my own experiment, this view is wrong, I do not know whether it is due to the official framework update of the original. Final conclusion: This attribute is exactly the same as the Alignment (why bother?) .

The coordinate system diagram is as follows:

The code is as follows:

//Container attribute AlignmentDirectional class Alignment_AlignmentDirectional extends StatelessWidget{@override Widget build(BuildContext context) {return Center(
      child: Container(
        color: Color.fromARGB(255, 66, 165, 245),
        child: Text("Flutter", style: TextStyle(fontSize: 15.0), //textDirection: textDirection. LTR,// Normal, alignment from left to right (does not affect alignment) Textdirection. LTR,// From right to left (does not affect alignment),// Without this, Container ADAPTS to the child size; And will be full of screen alignment: AlignmentDirectional (1.0, 1.0), / / alignment: AlignmentDirectional. BottomStart, / / equivalent to the above),); }}Copy the code

Commonly used equivalent attributes:

AlignmentDirectional. Corresponding AlignmentDirectional bottomCenter (0.0, 1.0)

AlignmentDirectional. Corresponding AlignmentDirectional bottomEnd (1.0, 1.0)

AlignmentDirectional. Corresponding AlignmentDirectional bottomStart (1.0, 1.0)

AlignmentDirectional. Corresponding AlignmentDirectional center (0.0, 0.0)

AlignmentDirectional. Corresponding AlignmentDirectional centerEnd (1.0, 0.0)

AlignmentDirectional. Corresponding AlignmentDirectional centerStart (1.0, 0.0)

AlignmentDirectional. Corresponding AlignmentDirectional topCenter (0.0, 1.0)

AlignmentDirectional. Corresponding AlignmentDirectional topEnd (1.0, 1.0)

AlignmentDirectional. Corresponding AlignmentDirectional topStart (1.0, 1.0)

Four, Constraints of the Property

Layout properties, mainly about how to determine the size of the control; One of the most commonly used is BoxConstraint. BoxConstraint contains minWidth, maxWidth, minHeight, and maxHeight.

  • Container No child controls (Scenario 1) The code is as follows:
// Constraints Property class Constraints_Property extends StatelessWidget{@override Widget build(BuildContext context) {returnCenter(child: Container(color: color.fromargb (255, 66, 165, 245), alignment: AlignmentDirectional(0.0, 0.0), child: Container( color: Colors.green, constraints: BoxConstraints( maxHeight: 300, maxWidth: 200, minWidth: 150, minHeight: 150,),),),); }}Copy the code

The rendering looks like this:

The Container will fill the screen if it has no child controls, but set maxHeight and maxWidth here.

  • Container has child controls (Scenario 2). The code is as follows:
// Constraints of the Container property class Constraints_Property_HasChild extends StatelessWidget{@override Widget build(BuildContext context) {returnCenter(child: Container(color: color.fromargb (255, 66, 165, 245), alignment: AlignmentDirectional(0.0, 0.0), child: Container( color: Colors.green, child: Text("Flutter"), constraints: BoxConstraints( maxHeight: 300, maxWidth: 200, minWidth: 150, minHeight: 150, ), ), ), ); }}Copy the code

The rendering looks like this:

There is a child control, and the Container resizes itself to fit the inner child, but because min-width and min-height are set. So the Container will not be exactly the same size as the child control unless the child control is larger than min-width and min-height.

Try changing the size of the child control as follows:

// Constraints of the Container property class Constraints_Property_HasChild extends StatelessWidget{@override Widget build(BuildContext context) {returnCenter(child: Container(color: color.fromargb (255, 66, 165, 245), alignment: AlignmentDirectional(0.0, 0.0), child: Container( color: Colors.green, //child: Text("Flutter"),
          child: Text("Flutter Cheatsheet Flutter Cheatsheet"), constraints: BoxConstraints( maxHeight: 300, maxWidth: 200, minWidth: 150, minHeight: 150, ), ), ), ); }}Copy the code

The rendering is as follows:

  • Container has child controls (Scenario 3) When a Container has child controls, what do we do if we want the Container to fill the screen or parent control instead of accommodating the child controls? The answer is to use BoxConstraints. Expand (). The code is as follows:
Class Constraints_Property_HasChild_AllScreen extends StatelessWidget{@override Widget build(BuildContext context) {returnCenter(child: Container(color: color.fromargb (255, 66, 165, 245), alignment: AlignmentDirectional(0.0, 0.0), child: Container( color: Colors.green, //child: Text("Flutter"),
          child: Text("Flutter"), constraints: BoxConstraints.expand(), ), ), ); }}Copy the code

The rendering looks like this:

If the Container fills the entire screen, we can limit the size of the full screen to 1/2 width and 1/3 height.

Five, the Margin of the Property

Similar to the CSS at the front, this Margin refers to the distance between adjacent controls, mainly using EdgeInsets.

  • EdgeInsets.all()
  • EdgeInsets.symmetric()
  • EdgeInsets.fromLTRB()
  • EdgeInsets.only()

Details are as follows:

  • EdgeInsets.all() looks like this:
//EdgeInsets.all()
class Margin_Property_EdgeInsets_all extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    returnCenter(child: Container(color: color.fromargb (255, 66, 165, 245), alignment: AlignmentDirectional(0.0, 0.0), child: Container(color: color.green, margin: EdgeInsets. All (20.0),),); }}Copy the code

The rendering looks like this:

  • EdgeInsets. Symmetric () This is mainly used to add vertical and horizontal constraints. The code is as follows:
//EdgeInsets.symmetric()
class Margin_Property_EdgeInsets_symmetric extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    returnCenter(child: Container(color: color.fromargb (255, 66, 165, 245), alignment: AlignmentDirectional(0.0, 0.0), child: Green, margin: EdgeInsets. Symmetric (vertical: 20.0, horizontal: 50.0,),),); }}Copy the code

The rendering looks like this:

  • Edgeinsets.fromltrb () sets the left, top, right, and bottom margins. The code is as follows:
//EdgeInsets.fromLTRB()
class Margin_Property_EdgeInsets_fromLTRB extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    returnCenter(child: Container(color: color.fromargb (255, 66, 165, 245), alignment: AlignmentDirectional(0.0, 0.0), child: Container(color: color.green, margin: EdgeInsets. FromLTRB (20.0, 30.0, 40.0, 50.0)),); }}Copy the code

Rendering effect:

  • Edgeinsets.only () is used to set which ones are non-zero and defaults to zero if not set. The code is as follows:
//EdgeInsets.only()
class Margin_Property_EdgeInsets_only extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    returnCenter(child: Container(color: color.fromargb (255, 66, 165, 245), alignment: AlignmentDirectional(0.0, 0.0), child: Container(color: color.green, margin: EdgeInsets. Only (left: 20.0, bottom: 40.0, top: 50.0,),); }}Copy the code

The rendering looks like this:

Sixth, the Padding Property

This is used to set the spacing between child controls within the master. As with margins, use EdgeInsets. The code is as follows:

//EdgeInsets.all
class Padding_Property_EdgeInsets_all extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    returnCenter(child: Container(color: color.fromargb (255, 66, 165, 245), alignment: AlignmentDirectional(0.0, 0.0), child: Container(margin: EdgeInsets. Only (left: 20.0, bottom: 40.0, top: 50.0,), padding: EdgeInsets. All (10.0),// Set the internal Text control margin color: Colors. Green, child: Text("Flutter Cheatsheet"Constraints: BoxConstraints. Expand (),),),); // Set the Container to the same size as the child control. }}Copy the code

The rendering looks like this:

Seven, the Decoration of the Property

  • BoxDecoration Class
  • FlutterLogoDecoration Class
  • ShapeDecoration Class
  • UnderlineTabIndicator Class will be explained in detail later due to its long length. Please pay attention to the brief book.

Eight, ForegroundDecoration Property

  • BoxDecoration Class
  • FlutterLogoDecoration Class
  • ShapeDecoration Class
  • UnderlineTabIndicator Class will be explained in detail later due to its long length. Please pay attention to the brief book.

Nine, the Transform Property

Add the transform attribute to the Container attribute and use the Matrix class to set the value of transform to achieve various transformation effects. The code is as follows:

//Transform Property
class Transform_Property extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    returnContainer(color: color.fromargb (255, 66, 165, 245), alignment: AlignmentDirectional(0.0, 0.0), child: Container(padding: EdgeInsets. All (40.0), color: Colors. Green, child: Text("Flutter Cheatsheet"), transform: matrix4. rotationZ(0.5),),); }}Copy the code

The renderings are as follows:

Reference article:

Flutter — Container Cheat Sheet

Jane’s address book