We can use horizontal lines for section separation in our UI. In this article, we will learn how to create a horizontal line in flutter.
Divider Widget
The Divider widget is mostly used for this purpose because the widget has properties such as color, indent, endIndent, etc properties to draw a horizontal line on our UI according to our needs.
Example using Divider widget
Divider(
color: Colors.blue,
height: 3,
indent: 5,
endIndent: 5,
thickness: 1,
),In the above example we set the color of the line to blue, height is 3, etc for drawing the line.
Container Widget
In some cases, if the Divider widget doesn’t suit your requirements then we can use the Container widget for this purpose.
The Container widget has height, width, etc properties that we can use to draw the horizontal line.
Example using Container widget
Container(
width: 300,
height:5,
color: Colors.purple,
),In the above example, we set the color purple for our line, etc for line drawing.
ColoredBox widget
The ColoredBox widget has color parameter but not the height and width but we can use the SizedBox widget for this purpose.
Example using ColoredBox widget
SizedBox(
height: 5,
width: 400,
child: ColoredBox(
color: Colors.yellow,
),
),In the above example, we use the ColoredBox widget to set the color and SizedBox widget to set the height and width of the horizontal line.
SizedBox Widget
The SizedBox widget has the height and width but not the color property and for this purpose, we can use the Container widget.
Example using SizedBox Widget
SizedBox(
height: 3,
width: 300,
child: Container(
color: Colors.grey,
),
),Conclusion
We learn the 4 ways to create the horizontal line using the Divider, Container, ColoredBox, and SizedBox widget
