---

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.
addRepaintBoundary	false	Whether to wrap the dotted line with a RepaintBoundary.

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,
                  addRepaintBoundary: true,
                )
                

Performance Optimization

If your DottedLine is placed inside a widget that rebuilds frequently, you might experience performance issues (dropped frames) because the dashes and gaps are constantly repainted.

In such cases, setting addRepaintBoundary: true can improve performance by wrapping the DottedLine in a RepaintBoundary, isolating its paint step.

Note: The default is false to prevent unexpected memory overhead. Keep it false if you are displaying hundreds of dotted lines (e.g., in a large list) to avoid excessive memory usage.

Example

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

3.3.0

• Add addRepaintBoundary parameter to optionally wrap the dotted line with a RepaintBoundary for paint isolation. Default is false.
  • https://github.com/umechanhika/dotted_line/pull/62
  • https://github.com/umechanhika/dotted_line/issues/61
• Widen the Dart SDK constraint to >=2.12.0 <4.0.0 to support Dart 3.
• Replace the deprecated per-channel Color API in gradient calculation with Color.lerp to fix static analysis warnings.
• Fix the ruby-version setting in the Pre-release check workflow.

Thanks to @mem-5514-tahara for this release!

3.2.3

• Modify .github/workflows/check.yml, Gemfile & Gemfile.lock.

3.2.2

• Modify example/pubspec.yaml.

3.2.1

• Modify README.md.
  • https://github.com/umechanhika/dotted_line/pull/54

Thanks to @mmustafasesudia for this release!

3.2.0

• Add alignment parameter.
  • https://github.com/umechanhika/dotted_line/pull/52
  • https://github.com/umechanhika/dotted_line/issues/25

Thanks to @filipe-varela @armandsLa for this release!

3.1.0

• Add dashGradient and dashGapGradient parameters.
  • https://github.com/umechanhika/dotted_line/issues/36

Thanks to @thibaultrousset for this release!

3.0.1

• Fix Issue
  • https://github.com/umechanhika/dotted_line/issues/33

3.0.0

• Migrate to null safety.
• Upgrade pre 1.12 Android projects.

Thanks to @hlavki @amitkot @YoshihideSogawa @MarcinusX for this release!

2.0.2

• Reformatted dotted_line.dart.

2.0.1

• Add the API documents.
• Add analysis_options.yaml.

2.0.0

• Fixed a performance issue when displaying in ListView

From this version, this library is no longer dependent on ListView.

1.1.0

• Add dashRadius and dashGapRadius parameters.
• Change the default dash gap color from Colors.white to Colors.transparent.
• Change README.md and the sample code.

1.0.3

• Change the sample code.
• Enabled build the sample code on the web.

1.0.2

• Remove top padding.

Thanks to @tuarrep for this release!

1.0.1

• Update description.
• Update README.

1.0.0

• Initial release.