Flutter Dotted

A lightweight, highly customizable Flutter package to draw smooth dotted and dashed borders, rounded borders, circles, lines, and animated marching-ants around any widget.

✨ Features

📐 Multiple Shapes: Rectangles, rounded rectangles (BorderRadius), circles/ovals, and straight lines.
⚡ Robust Drawing Engine: Powered by Flutter's official Path.computeMetrics() for mathematically exact dashing on any path.
🎬 Animated "Marching Ants": Built-in animated border support via FlutterDotted.animated or custom dashOffset.
🌈 Gradients: Supports linear, radial, and sweep gradients on dotted outlines.
🔘 Round Dots & Crisp Dashes: Choose between authentic circular dots (StrokeCap.round) or flat dashes (StrokeCap.butt / square).
🎟️ Dotted Lines & Dividers: FlutterDottedLine widget for vouchers, receipts, and card dividers.
🎨 Background Fill & Padding: Convenient backgroundColor and padding parameters without needing extra container wrappers.
🚀 Performant: Efficient shouldRepaint cache prevents unnecessary GPU redraws.

📦 Installation

Add flutter_dotted to your pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  flutter_dotted: ^1.0.0

Then run:

flutter pub get

🚀 Quick Start

1. Rounded Dotted Card

import 'package:flutter/material.dart';
import 'package:flutter_dotted/flutter_dotted.dart';

FlutterDotted(
  strokeWidth: 2.0,
  dash: 6.0,
  gap: 4.0,
  color: Colors.blue,
  borderRadius: BorderRadius.circular(16),
  backgroundColor: Colors.blue.shade50,
  padding: const EdgeInsets.all(16),
  child: const Text('Rounded Dotted Box'),
)

2. Animated "Marching Ants" Drop Zone

Ideal for file upload zones, drag-and-drop targets, or active selection borders.

FlutterDotted.animated(
  strokeWidth: 2.0,
  dash: 8.0,
  gap: 6.0,
  strokeCap: StrokeCap.round,
  borderRadius: BorderRadius.circular(12),
  color: Colors.indigo,
  animationDuration: const Duration(seconds: 1),
  child: const Padding(
    padding: EdgeInsets.symmetric(vertical: 24, horizontal: 16),
    child: Text('Drag and drop files here'),
  ),
)

3. Circular Dotted Avatar / Badge

FlutterDotted(
  shape: DottedShape.circle,
  strokeWidth: 3.0,
  dash: 4.0,
  gap: 3.0,
  color: Colors.teal,
  padding: const EdgeInsets.all(4),
  child: const CircleAvatar(
    radius: 30,
    child: Icon(Icons.person),
  ),
)

4. Gradient Dotted Border

FlutterDotted(
  strokeWidth: 3.0,
  dash: 6.0,
  gap: 4.0,
  borderRadius: BorderRadius.circular(16),
  gradient: const LinearGradient(
    colors: [Colors.purple, Colors.orange],
  ),
  padding: const EdgeInsets.all(20),
  child: const Text('Gradient Border'),
)

5. Dotted Divider / Ticket Separator

Use FlutterDottedLine to separate coupon sections or receipt items:

FlutterDottedLine(
  direction: Axis.horizontal,
  strokeWidth: 2.0,
  dash: 6.0,
  gap: 4.0,
  color: Colors.grey.shade400,
)

📖 API Reference

`FlutterDotted`

Property	Type	Default	Description
`child`	`Widget?`	`null`	The widget inside the dotted border.
`color`	`Color`	`Colors.black`	Color of the dotted border (ignored if `gradient` is set).
`gradient`	`Gradient?`	`null`	Optional gradient for the dotted border.
`strokeWidth`	`double`	`1.0`	Line thickness.
`dash`	`double?`	`gap`	Length of each dash segment.
`gap`	`double`	`3.0`	Spacing between dashes.
`strokeCap`	`StrokeCap`	`StrokeCap.round`	End cap style (`round`, `butt`, `square`).
`shape`	`DottedShape?`	`rect` (or `rrect` if `borderRadius` is set)	Border shape (`rect`, `rrect`, `circle`, `line`).
`borderRadius`	`BorderRadius?`	`null`	Corner radius for rounded borders.
`backgroundColor`	`Color?`	`null`	Background fill inside the border.
`padding`	`EdgeInsetsGeometry?`	`null`	Inner padding between border and child.
`animate`	`bool`	`false`	Enables marching-ants animation.
`animationDuration`	`Duration`	`1 second`	Duration per animation loop.
`dashOffset`	`double`	`0.0`	Custom offset along the path.

`FlutterDottedLine`

Property	Type	Default	Description
`direction`	`Axis`	`Axis.horizontal`	Direction of the line (`horizontal` or `vertical`).
`lineLength`	`double`	`double.infinity`	Length of the line.
`strokeWidth`	`double`	`1.0`	Line thickness.
`dash`	`double`	`3.0`	Length of each dash.
`gap`	`double`	`3.0`	Spacing between dashes.
`color`	`Color`	`Colors.black`	Color of the line.
`gradient`	`Gradient?`	`null`	Gradient applied to the line.
`strokeCap`	`StrokeCap`	`StrokeCap.round`	End cap style.
`dashOffset`	`double`	`0.0`	Offset along the line.

🛠️ Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

📄 License

This project is licensed under the Apache 2.0 License - see the LICENSE file for details.