How to draw a Decorative Horizontal line in Flutter?

This Article is posted by seven.srikanth at 04-06-2019 22:51:47

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;

void paint(Canvas canvas, Size size) {
canvas.drawLine(Offset(10.0, 0.0), Offset(90.0, 0.0), _paint);
canvas.drawLine(Offset(-90.0, 0.0), Offset(-10.0, 0.0), _paint);

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.


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

Login to comment.
Recent Comments

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

Recent Articles

How to deploy flutter web site on GitHub using peanut

Posted by nikhilchaudhary12155 on 13 Oct 2019 Article

AnimatedPositioned Widget Example in Flutter

Posted by seven.srikanth on 10 Oct 2019 Article

Flutter Open-Source and directory lists

Posted by nishantkotatech on 09 Oct 2019 Article

Flutter Travelling Couple Leading Page - Flutter Web Series 3

Posted by nikhilchaudhary12155 on 05 Oct 2019 Article

© 2018 - Fluttercentral | Email to me -