Introduction to Flutter (II) : The box model of the container

In web development, there is a box model. The so-called three-terminal Flutter is no exception, and it is almost the same as the HTML box model. This article uses a simple example to illustrate the box model of Flutter, so that we can better understand the layout of the interface in the future.

Before talking about the box model of Flutter, take a look at the box model in HTML. As shown in the figure below, a page element includes a margin with its parent container, and the padding between its own content and the border. Both margins and margins can be individually sized in four directions by LTRB (left, up, right, and down).

The box model of Flutter is the same as that of HTML, and the generic Container Container is a generic Container, just like the HTML div tag. If you want to control the size, margins, margins, and borders of an element, the most common approach is to use a Container to wrap the element. Flutter also provides some more specific layout components for development, such as:

• SizedBox: container of specified size.
• ConstaintedBox: container with constraints, such as minimum and maximum widths and heights.
• DecoratedBox: a container with decorations, such as gradients.
• RotatedBox: A container rotated at an Angle.

All of these components can be configured using Container parameters. However, using a specific Container can reduce component parameters during development.

The sample code

Here is a specific example to illustrate the specific concept of the box model. Since there is no interface change caused by data change, the Stateless Stateless component is directly used, with the following code:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter box model ',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Box model'),
        ),
        body: Center(
          child: Container(
            width: 300,
            height: 300,
            color: Colors.blue,
            child: Container(
              color: Colors.red,
              margin: EdgeInsets.fromLTRB(10.0.20.30),
              child: Container(
                margin: EdgeInsets.fromLTRB(10.10.10.10),
                color: Colors.white60,
                child: Text('This is a long text, this is a long text, this is a long text, this is a long text, this is a long text.'),
                padding: EdgeInsets.fromLTRB(10.10.10.10),),),),),),); }}Copy the code

Here’s the component hierarchy in the body:

• Center: Center component.
  • Container: 300 x 300, blue, outermost component.
    • Container: No size is specified (the size is controlled by box model constraints). The margin between the Container and the parent component is 10 left, 0 up, 20 right, and 30 bottom. The color is red.
      • Container: The size is not specified. The outer margins of each component are 10, and the inner margins of each component are 10. The color is white.
        • Text: Displays multiple lines of Text to show the inside margin effect.

The interface after running is as shown in the figure below, which is the same as expected.