Preface:

This is the 18th day of my participation in the August Challenge. In preparation for the Nuggets’ August challenge, I’m going to pick 31 components this month that I haven’t covered before for a full analysis and attribute presentation. These articles will serve as important material for future compilation of Flutter components. I hope I can stick to it, your support will be my biggest motivation ~

This series Component articles The list of
1.NotificationListener 2.Dismissible 3.Switch
4.Scrollbar 5.ClipPath 6.CupertinoActivityIndicator
7.Opacity 8.FadeTransition 9. AnimatedOpacity
10. FadeInImage 11. Offstage 12. TickerMode
13. Visibility 14. Padding 15. AnimatedContainer
16.CircleAvatar 17.PhysicalShape 18.Divider
Flexible, Expanded, and Spacer 20.Card

I. Know the Divider component

Divider component Is a familiar Divider component. It is a horizontal dividing line that specifies the height, thickness, color, and margin. What are the default attributes, how do I set the default values, and how do I implement the source code of the Divider component? This article will introduce it in detail.

1. Divider basic information

The following is the definition and constructor of the Divider component class, which you can see inherits from the StatelessWidget. There are five optional parameters:

2.Divider size analysis

Take a look at the Divider’s size characteristics: The following is the [w(10,200) -h (0,200)] constraint. The Divider can specify the height of its size area by height, and the width is the maximum value of the parent constraint. Note: [W (a,b) -h (c,d)] indicates that the width of the dimension constraint is between A and B, and the height is between C and D.

class DividerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints(
        maxWidth: 200,
        minWidth: 10,
        maxHeight: 200,
        minHeight: 0
      ),
      child: Divider(
        height: 10,),); }}Copy the code

When the constraint is changed to [w(10,200) -h (50,200)], you can see that the height specified by the Divider is invalid. That is to say, the height specified by the Divider does not always take effect and is controlled by the parent area constraints.

class DividerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints(
        maxWidth: 200,
        minWidth: 10,
        maxHeight: 200,
        minHeight: 50
      ),
      child: Divider(
        height: 10,),); }}Copy the code

If the parent constraint is approached by UnconstrainedBox, the Divider component is not displayed because it has no width limit. This also shows that the parent’s area constraints are important to the Divider component.

As you can see from the rendering tree, the rendering object corresponding to the Divider component ends up with Size(0,0), which explains why the Divider component is not displayed when unconstrained.

class DividerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints(
        maxWidth: 200,
        minWidth: 10,
        maxHeight: 200,
        minHeight: 50
      ),
      child: UnconstrainedBox(
        child: Divider(
            height: 10,),),); }}Copy the code
3. The properties of Divider

The meanings of these properties are very simple, and the following code is three dividing lines.

The property name type The default value use
height double null High component
thickness double null Line thickness
indent double null The left margin
endIndent double null The right margin
color Color null Line color 

class DividerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  Container(
      width: 200,
      child: Wrap(
          children:[
            const Divider(
              height: 10,
              indent: 20,
              endIndent: 20,
              thickness: 1,
              color: Colors.orange,
            ),
            const Divider(
              height: 10,
              indent: 10,
              endIndent: 10,
              thickness: 2,
              color: Colors.blueAccent,
            ),
            const Divider(
              height: 10[, [, [, [; }}Copy the code

Indent and endIndent can be used with margins like this, without the need for additional Padding.

4.Divider default attribute

If you need to specify the default Divider style in an application, it can be cumbersome to set it every time you use it. The related theme component of Flutter is the DividerTheme component, which maintains the DividerThemeData data. This component is used to render the dividers of its children in the default style. The effect is as follows:

class DividerDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  DividerTheme(
      data: DividerThemeData(
        color: Colors.orange,
        thickness: 1/window.devicePixelRatio,
        space: 5
      ),
      child: Container(
        width: 200,
        child: Wrap(
            children:[
              const Divider(),
              const Divider(),
              constDivider(), ], ), ), ); }}Copy the code

Divider source code implementation

First, it’s a StatelessWidget that can only be built with other components, with the core logic in the Build method.

Also notice that none of the four numeric attributes in the constructor’s assertion can be negative.

The build method is also relatively simple. First get the data from the DividerTheme. You can see that the default height is 16 logical pixels if the body is not set. That is to say, the Divider itself has a certain height of space. The area size is set by the SizedBox, and the dividing line is completed by the bottom edge of the Container decoration. Indent and endIndent apply to the margin property, which is essentially a margin created by the Padding component.

The default value of the DividerTheme is null. What is the default color of the Divider?

In the createBorderSide static method, you can see that if the DividerTheme color is null, the color is set according to the dividerColor in the Theme.

The use of Divider is over here, that’s the end of this article, thanks for watching, see you tomorrow