[flutter component collection] divider | August update challenge

Preface ：

This is my participation 8 The fourth of the yuegengwen challenge 18 God , Check out the activity details ：8 Yuegengwen challenge . For the Nuggets August is more challenging , I'm going to choose... This month 31 A component that has not been described before , Conduct a comprehensive analysis and attribute Introduction . These articles will serve as Flutter Component collection Important material for . I hope we can keep going , Your support will be my greatest motivation ~

This series	Component article	list
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 [ this paper ]

---

One 、 know Divider Components

Divider Components are familiar to everyone , It's a horizontal dividing line , You can specify the height 、 thickness 、 Color 、 Margin . What are these attributes by default , How to uniformly set default values ,Divider How is the source code of the component implemented ？ This article will introduce in detail .

---

1. Divider essential information

Here is Divider Component class Definition and Construction method , You can see that it is inherited from StatelessWidget. There are five optional parameters ：

---

2.Divider Dimensional analysis of

Have a look first Divider Size characteristics of ： Let's go through [w(10,200) - h(0,200)] Constraints .Divider Can pass height Specifies the height of its size area , The width is the maximum value of the parent constraint . notes : [w(a,b) - h(c,d)] Express , The dimension constraint is wide in a and b Between , High in c and d Between .

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 code 

---

When the constraint is changed to [w(10,200) - h(50,200)] , It can be seen that Divider The specified height will be invalid . in other words Divider The specified height does not necessarily take effect , It will be controlled by the parent region 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 code 

---

If you pass UnconstrainedBox Contact parent constraints , that Divider There is no limit to the width of the component , Will not show . This also shows that the parent's region constraint pair Divider Components are important .

Through the rendering tree, you can see ,Divider The final size of the rendered object corresponding to the component is Size(0,0) , This explains why, without constraints ,Divider The component does not display .

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 code 

---

3.Divider Properties of

The meaning of these attributes is very simple , The following code is three split lines .

Property name	type	The default value is	purpose
height	double	null	Component height
thickness	double	null	The thread is thick and thin
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 code 

among indent and endIndent Can be used for margins like this , You don't need a coat Padding Realized .

---

4.Divider Default properties of

If an application needs to specify the default Divider style , It's obviously troublesome to set it every time you use it .Flutter There are related theme components in DividerTheme , It maintains DividerThemeData data . We can go through This component makes its child nodes Divider Display 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(),
              const Divider(),
            ],
        ),
      ),
    );
  }
}
 Copy code 

---

Two 、 Divider Source code implementation

First , It is StatelessWidget, Can only rely on other components to build , The core logic is build In the method .

Another thing to note , In the assertion of the constructor , All four numeric attributes It can't be negative .

---

build The method is also simple , First, through DividerTheme get data , It can be seen that if the subject is not set , The default height is 16 Logical pixels . That is to say, at this time Divider It has a certain height of space occupation . The area size passes through SizedBox Set up , The dividing line is through Container The bottom edge of the decoration is finished . among indent and endIndent Act on margin attribute , The essence is still through Padding The margin that the component completes .

Through debugging, you can see the default DividerTheme The data attribute in is null , That's the question Divider What is the default color for ？

stay createBorderSide In the static method , It can be seen that , If DividerTheme The color is null , Will be based on Theme Medium dividerColor Set the color .

that Divider This is the end of the introduction , So this article ends here , Thank you for watching , See you tomorrow ~