Play Flutter Quiz. Click here .

How to draw a Horizontal line in Flutter?

This Article is posted by at 27-12-2018 14:15:50

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 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.

© 2018 - Fluttercentral | Email to me -

Terms | Privacy