dot_grid 0.1.1

A Flutter library for interactive mesh gradient animations with dot grid styling that responds to pointer events.

Dot Grid

A Flutter library for interactive mesh gradient animations with dot grid styling that responds to pointer events (touch and mouse).

Features

• Pointer-driven animation — Listens to global pointer move, up, and down events
• Animated mesh gradient — Blob-shaped gradient that follows the pointer and smoothly expands/decays
• Customizable dot grid — Configurable dot size, spacing, and pattern (e.g. alternating colored/background dots)
• Tunable motion — Separate durations for expansion and decay, plus configurable blob radius
• Optional gradient palette — Multiple colors for the mesh gradient (interpolated by distance)
• Lightweight — Reuses point buffers to avoid per-frame allocations

Installation

Add to your pubspec.yaml:

dependencies:
  dot_grid: ^0.1.0

Then run:

flutter pub get

Usage

Wrap any widget with DotGridWidget:

import 'package:dot_grid/dot_grid.dart';

DotGridWidget(
  child: YourContent(),
  dotSize: 4.0,
  gridSpacing: 6.0,
  primaryColor: Colors.blue,
  backgroundColor: Colors.white,
  expansionDuration: const Duration(milliseconds: 200),
  decayDuration: const Duration(milliseconds: 400),
  blobRadius: 100.0,
  enabled: true,
)

Parameters

Parameter	Type	Default	Description
child	Widget	required	Content displayed behind the dot grid
dotSize	double	4.0	Size of each dot in pixels
gridSpacing	double	6.0	Spacing between dots in pixels
primaryColor	Color	Colors.blue	Color for active (colored) dots
backgroundColor	Color	Colors.white	Color for inactive dots
dotPattern	List<int>	[1, 5]	Pattern: N colored dots, M background dots, repeat
expansionDuration	Duration	200 ms	Animation duration when pointer down/move
decayDuration	Duration	400 ms	Animation duration when pointer up
blobRadius	double	100.0	Maximum radius of the gradient blob
gradientColors	List<Color>	[]	Extra colors for mesh gradient (distance-based)
hoverOpacity	double	1.0	Opacity multiplier for hover (0.0–1.0)
enableHoverEffect	bool	true	Whether mouse hover dims dots under cursor
enabled	bool	true	Whether the effect is active

Example snippet

With a subtle grid and custom gradient:

DotGridWidget(
  dotSize: 2.0,
  gridSpacing: 4.0,
  primaryColor: Colors.blue.withValues(alpha: 0.3),
  backgroundColor: Colors.transparent,
  gradientColors: [
    Colors.blue.withValues(alpha: 0.3),
    Colors.cyan.withValues(alpha: 0.3),
  ],
  hoverOpacity: 0.3,
  expansionDuration: const Duration(milliseconds: 400),
  decayDuration: const Duration(milliseconds: 600),
  blobRadius: 120.0,
  child: YourWidget(),
)

Example app

The example/ app demonstrates the widget with different settings. Run it with:

cd example && flutter run

License

MIT — see LICENSE.