dot_grid 0.1.1

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

example/lib/main.dart

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dot Grid Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[900],
      appBar: AppBar(
        backgroundColor: Colors.grey[800],
        title: const Text('Dot Grid Example', style: TextStyle(color: Colors.white)),
        iconTheme: const IconThemeData(color: Colors.white),
      ),
      body: Container(
        color: Colors.grey[900],
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              SizedBox(
                height: 200,
                width: 300,
                child: 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: 300),
                  blobRadius: 120.0,
                  enabled: true,
                  child: Column(
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(60.0),
                        child: SizedBox(
                          width: 180,
                          height: 60,
                          child: DotGridWidget(
                            dotSize: 2.0,
                            gridSpacing: 4.0,
                            primaryColor: Colors.green,
                            backgroundColor: Colors.transparent,
                            gradientColors: [Colors.green, Colors.greenAccent],
                            hoverOpacity: 0.3,
                            expansionDuration: const Duration(milliseconds: 400),
                            decayDuration: const Duration(milliseconds: 300),
                            blobRadius: 120.0,
                            enabled: true,
                            child: _buildButton(context, label: 'Button A'),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),

              const SizedBox(height: 40),
              _buildButton(context, label: 'Button B'),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildButton(BuildContext context, {required String label}) {
    return _PressableButton(label: label);
  }
}

class _PressableButton extends StatefulWidget {
  final String label;

  const _PressableButton({required this.label});

  @override
  State<_PressableButton> createState() => _PressableButtonState();
}

class _PressableButtonState extends State<_PressableButton> {
  bool _isPressed = false;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 180,
      height: 60,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(8),
        child: Listener(
          onPointerDown: (_) {
            setState(() {
              _isPressed = true;
            });
          },
          onPointerUp: (_) {
            setState(() {
              _isPressed = false;
            });
          },
          onPointerCancel: (_) {
            setState(() {
              _isPressed = false;
            });
          },
          child: Stack(
            children: [
              // Dot grid background
              DotGridWidget(
                dotSize: 2.0,
                gridSpacing: 4.0,
                primaryColor: Colors.green,
                backgroundColor: Colors.transparent,
                gradientColors: [Colors.green, Colors.greenAccent],
                hoverOpacity: 0.3,
                expansionDuration: const Duration(milliseconds: 400),
                decayDuration: const Duration(milliseconds: 300),
                blobRadius: 120.0,
                enabled: true,
                child: AnimatedContainer(
                  duration: const Duration(milliseconds: 100),
                  width: 180,
                  height: 60,
                  decoration: BoxDecoration(
                    color: _isPressed ? Colors.black.withValues(alpha: 0.3) : Colors.transparent,
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Center(
                    child: Text(
                      widget.label,
                      textAlign: TextAlign.center,
                      style: TextStyle(
                        color: _isPressed
                            ? Colors.greenAccent.withValues(alpha: 0.7)
                            : Colors.greenAccent.withValues(alpha: 0.9),
                        fontSize: 14,
                        fontWeight: FontWeight.w600,
                        letterSpacing: 0.5,
                      ),
                    ),
                  ),
                ),
              ),
              // Border overlay on top of dot grid
              Positioned.fill(
                child: IgnorePointer(
                  child: AnimatedContainer(
                    duration: const Duration(milliseconds: 100),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8),
                      border: Border.all(
                        color: Colors.green,
                        width: _isPressed ? 2.0 : 1.5,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}