How to draw a Decorative Horizontal line in Flutter?

This Article is posted by seven.srikanth at 6/4/2019 10:51:47 PM



<p>Hello Guys, Today, I have come across a requirement to create a horizontal line. I'm trying to create something like below. font-size: 1rem;](---------- or ----------- (it's not a dotted line, but a continuous line). See below. font-size: 1rem;]( ![](https://fluttercentral.com/Uploads/f173b2fa-c5c7-4ec1-9aa7-b53681e54955.PNGwidth="50%height="auto](font-size: 1rem;](</p> <p id="d19a66;](false;" _paint="" color:="" color:="" color:="" color:="" color:="" color:="" color:="" color:="">So, I have created a class to create this line. Here is the code for drawing a line in the flutter. color: rgb(187, 187, 187); background-color: rgb(40, 44, 52); font-family: Consolas, "Courier New", monospace; font-size: 18px; line-height: 24px; white-space: pre;]( color: #c678dd;](import color: #98c379;]('package:flutter/material.dart'; color: #c678dd;](class color: #e5c07b;](Drawhorizontalline color: #c678dd;](extends color: #e5c07b;](CustomPainter { color: #e5c07b;](Paint _paint; color: #c678dd;](bool reverse; color: #e5c07b;](Drawhorizontalline(color: #e06c75;](this.reverse) color: #c678dd;](@override color: #c678dd;](void color: #61afef;](paint(color: #e5c07b;](Canvas canvas, color: #e5c07b;](Size size) { color: #c678dd;](if(!reverse){canvas.color: #61afef;](drawLine(color: #e5c07b;](Offset(color: #d19a66;](10.0, color: #d19a66;](0.0), color: #e5c07b;](Offset(color: #d19a66;](90.0, color: #d19a66;](0.0), _paint);} color: #c678dd;](else{canvas.color: #61afef;](drawLine(color: #e5c07b;](Offset(color: #56b6c2;](-color: #d19a66;](90.0, color: #d19a66;](0.0), color: #e5c07b;](Offset(color: #56b6c2;](-color: #d19a66;](10.0, color: #d19a66;](0.0), _paint);}} color: #c678dd;](@override color: #c678dd;](bool color: #61afef;](shouldRepaint(color: #e5c07b;](CustomPainter oldDelegate) } You need to call it like this. color: rgb(187, 187, 187); background-color: rgb(40, 44, 52); font-family: Consolas, "Courier New", monospace; font-size: 18px; line-height: 24px; white-space: pre;](color: #e5c07b;](CustomPaint(paintercolor: rgb(198, 120, 221);](: color: rgb(229, 192, 123);](Drawhorigontalline(color: rgb(209, 154, 102);](false)), Actually, by changing a few things. You can draw vertical and cross lines too using this class. Hope this is useful to you. Thanks,Srikanth</p>


Tags: How to draw a Decorative Horizontal line in Flutter?








0 Comments
Login to comment.
Recent Comments