Several layout widgets very commonly used by Flutter Center, SizeBox, Divider

Introduction to Center

Center is a layout widget in Flutter, which is used to center its child widgets in the parent widget.

Features of the Center

The Center widget has the following characteristics:

• Centers the subwidget horizontally and vertically.
• By default, Center expands subwidgets as much as possible to fill the available space.
• If the Center has no determined width and height constraints, it will try to resize the child to its own size.
• The child widget can be resized via the widthFactor and heightFactor properties.
  Here is sample code using the Center widget:

example

      body: TabBarView(
        controller: _tabController,
        children: [
          // 第一个选项卡的内容
          Container(
            child: Center(
              child: Text('聊天'),
            ),
          ),
          // 第二个选项卡的内容
          Container(
            child: Center(
              child: Text('群组'),
            ),
          ),
          // 第三个选项卡的内容
          Container(
            child: Center(
              child: Text('个人'),
            ),
          ),
        ],
      ),

In the above example, we use Center to center a Text. The effect is as follows:

You can also make other widgets children of Center to achieve other centering effects. Center is very convenient for building centered layouts, especially useful when you need to center child widgets within a parent widget.

SizedBox

SizedBox is a widget in Flutter that is used to create an empty box with specified dimensions. It is commonly used to adjust and control spacing, size, and position in layouts.

SizedBox has the following common properties:

width: Specify the width of the SizedBox.
height: Specifies the height of the SizedBox.
child: Specifies the child components contained in the SizedBox.
With SizedBox you can resize widget by setting width and height. If you only want to adjust one dimension (width or height), you can set the other to null or ignore it.

Here is an example showing how to use SizedBox to resize widgets:

Copy code
Container(
  color: Colors.blue,
  child: SizedBox(
    width: 200,
    height: 100,
    child: Text(
      'Hello, SizedBox!',
      style: TextStyle(color: Colors.white, fontSize: 24),
    ),
  ),
)

In the above example, we created a blue Container and used a SizedBox to set the width to 200 and the height to 100. The child component of the SizedBox is a text component, displayed in white, with a font size of 24.

By adjusting the width and height properties of the SizedBox, you can adjust the size of the widget according to your needs and use it for layout and spacing control.

Divider

There is also a Divider component in Flutter for building dividers. Its main properties are:

• height: The height of the dividing line, the default is 1px.
• thickness: The thickness of the dividing line, the default is 1px.
• color: The color of the dividing line, the default dividerColor of the current theme.
• indent: The indentation to the left of the separator line, the default is 0.
• endIndent: The indentation on the right side of the divider, default 0.
  The basic ways to use Divider are:

1. Horizontal dividing line
   dart
   Divider(
   height: 30,
   color: Colors.red,
   )
2. Vertical dividing line
   dart
   Divider(
   thickness: 30,
   color: Colors.red,
   indent: 20,
   endIndent: 20,
   )
3. Add divider between list items
   dart
   ListTile(title: Text('Item 1')),
   Divider(),
   ListTile(title: Text('Item 2')),
4. Nested in Container and add padding

Container(
  color: Colors.grey,
  child: Padding(
    padding: EdgeInsets.all(10.0),
    child: Divider(
      color: Colors.red,
    ),
  )  
)

Flutter's Divider component is very simple to use and has relatively few attributes, but it can meet the needs of most divider scenarios.