Web Analytics Made Easy -
StatCounter
how-to-implement-a-horizontal-line-in-flutter

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

Click to rate this post!
[Total: 0 Average: 0]
Avatar

By AmmarJaved

Ammar Javed possesses a unique combination of skills and expertise in web, desktop, and mobile app development, and content writing. Ammar Javed is a strategic thinker and has problem-solving abilities. Ammar Javed can work independently and in a team. Ammar Javed is dedicated to continuous learning and professional development.

Leave a Reply

Your email address will not be published. Required fields are marked *

Translate »