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 #

FlutterDottedLine #

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