How to draw a Decorative Horizontal line in Flutter?

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



Hello Guys,

Today, I have come across a requirement to create a horizontal line.

I'm trying to create something like below. ---------- or ----------- (it's not a dotted line, but a continuous line). See below. 



So, I have created a class to create this line. Here is the code for drawing a line in the flutter.


import 'package:flutter/material.dart';

class Drawhorizontalline extends CustomPainter {

Paint _paint;
bool reverse;

Drawhorizontalline(this.reverse) {
_paint = Paint()
..color = Colors.white
..strokeWidth = 0.5
..strokeCap = StrokeCap.round;
}

@override
void paint(Canvas canvas, Size size) {
if(!reverse){
canvas.drawLine(Offset(10.0, 0.0), Offset(90.0, 0.0), _paint);
}
else
{
canvas.drawLine(Offset(-90.0, 0.0), Offset(-10.0, 0.0), _paint);
}
}

@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}

You need to call it like this.

CustomPaint(painter: Drawhorigontalline(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



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








0 Comments
Login to comment.
Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.


© 2018 - Fluttercentral | Email to me - seven.srikanth@gmail.com