In order to realize various layout styles of the interface, many components are combined to form a complex layout. When it comes to the fact that the layout of FLUENT is inseparable from widgets, widgets are also used to complete the layout of fluent.
1.Align component
Let's take a look at the source code of Align:

const Align({
  Key key,
  this.alignment: Alignment.center, 
  this.widthFactor, 
  this.heightFactor, 
  Widget child
})

Alignment: alignment method. It is centered by default
widthFactor: width. If it is not set, it will be as large as possible
Hightfactor: height. If it is not set, it will be as large as possible
Widget child: the child widget (equivalent to a control) to be laid out
widthFactor and hightfactor function:
The alignment method in the parent component must know the range, width and height of the parent component;
If the widthFactor and hightfactor are not sized, they should occupy the entire view of the parent component as much as possible;
Set a value, such as 2, and Align is equivalent to 3 times of the child control (you can debug the code to see the effect)
Example:

class MyAlignBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Align(
      child: Icon(Icons.radar,size: 40,color: Colors.yellow,),
      alignment: Alignment.bottomCenter,
      widthFactor: 10,//You can look at changing the size of these two values
      heightFactor: 10,
    );
  }
}

The default effect is to remove the widthFactor and hightfactor.

2.Center components
The translation of Center is centered. In fact, Center inherits Align by setting alignment to alignment Center.
Source code example:

class Center extends Align {
  const Center({
    Key key,
    double widthFactor,
    double heightFactor,
    Widget child
  }) : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
}

The code only needs to replace Align with Center:

class MyCenterBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Icon(Icons.radar,size: 40,color: Colors.yellow,),
      widthFactor: 10,
      heightFactor: 10,
    );
  }
}

Shows a child control in the middle of the parent control.

3.Padding component
It is easy to see that Padding is the margin in Android and ios, but it is a widget in fluent, but it is not managed in this way in fluent. You can also set the outer margin. Usually, you set the margins of the child widget and the parent widget. We use a text to set:

class MypaddingBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(20),
      child: Text(
        "This is a text with margins. Learn how to set it.",
        style: TextStyle(
            color: Colors.red,
            fontSize: 18
        ),
      ),
    );
  }
}

4.Container
Container is widely used in development and is often used as a container.
Source code example:

Container({
  this.alignment,
  this.padding, 
  Color color,
  Decoration decoration,
  Decoration foregroundDecoration, 
  double height,
  BoxConstraints constraints,
  this.margin,
  this.transform, 
  this.child,
})

Note that color and decoration are mutually exclusive. When color is specified, a decoration will be automatically created in the Container; (decoration has been introduced earlier)
Code example (setting a background):

class MyContainerBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Icon(Icons.radar, size: 32, color: Colors.white),
        color: Colors.blueAccent,
        width: 200,
        height: 200,
      ),
    );
  }
}

There are many single layouts that you can learn by yourself. In the next chapter, we will briefly talk about the use of multiple layouts, that is, various combinations of single layouts.