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.

Libraries

dot_grid