umechanhika/dotted_line

This package allows you to draw dotted lines with Flutter.

---

About

This package allows you to draw dotted lines with Flutter.

Usage

Parameter	Default	Description
direction	Axis.horizontal	The direction of the entire dotted line.
alignment	WrapAlignment.center	The alignment of the entire dotted line.
lineLength	double.infinity	The length of the entire dotted line.
lineThickness	1.0	The thickness of the entire dotted line.
dashLength	4.0	The length of the dash.
dashColor	Colors.black	The color of the dash.
dashGradient	null	The gradient colors of the dash.
dashRadius	0.0	The radius of the dash.
dashGapLength	4.0	The length of the dash gap.
dashGapColor	Colors.transparent	The color of the dash gap.
dashGapGradient	null	The gradient colors of the dash gap.
dashGapRadius	0.0	The radius of the dash gap.

This can be used without parameters.

import 'package:dotted_line/dotted_line.dart';

DottedLine()

You can also customize by specifying parameters.

import 'package:dotted_line/dotted_line.dart';

DottedLine(
  direction: Axis.horizontal,
  alignment: WrapAlignment.center,
  lineLength: double.infinity,
  lineThickness: 1.0,
  dashLength: 4.0,
  dashColor: Colors.black,
  dashGradient: [Colors.red, Colors.blue],
  dashRadius: 0.0,
  dashGapLength: 4.0,
  dashGapColor: Colors.transparent,
  dashGapGradient: [Colors.red, Colors.blue],
  dashGapRadius: 0.0,
)

Example

The sample code can be found under the example package. You can try changing all parameters.

dotted_line's Issues

Migrate to null safety

It would be nice if we can migrate this package to null safety so users can opt in to null safety once it reaches stable.

Feature: option to specify gradient color

It would be nice to specify gradient color to your code to have something looking like this

And maybe make ur code usable as border

Weird glitch in certain sizes

 const TextStyle textStyle = const TextStyle(
      color: Colors.darkBlue,
      fontWeight: FontWeight.w800,
      fontSize: 17,
      letterSpacing: -1,
    );
    return Container(
      padding: EdgeInsets.only(top: 8),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Text(title, style: textStyle),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.only(left: 3, right: 3, bottom: 5),
              child: DottedLine(
                dashColor: Colors.darkBlue,
                direction: Axis.horizontal,
                dashRadius: 100,
                dashGapRadius: 10,
                dashLength: 3,
                dashGapLength: 1.2,
                lineThickness: 3,
              ),
            ),
          ),
          Container(
            width: 50,
            child: Text(value, style: textStyle),
          ),
        ],
      ),

Count total dots

I am not sure this feature has been include with this package or not. If have just let me know if don't so hope developers will add this.
Have any way to count total dots from a line ?

it's very lag as divider in ListView

hope can fix it

IntrinsicHeight problems

compatibility of BoxConstraints

because of lineLength = double.infinity property, DottedLine will always reach the maxHeight limit by default.

Feature: option to specify alignment

When creating a row of widgets like "" option to specify line alignment would allow to achieve a better symmetry. Currently the gap between the first line and the text can differ from the text and the second line as it's drawn from left to right.