kinetic_lens_effect 1.0.1

A beautiful kinetic dot-grid lens effect widget for Flutter. Wrap your app with LensEffect to add an animated, cursor-reactive background with zero boilerplate.

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    // ✅ Just wrap your app with LensEffect — done!
    return LensEffect(
      options: const LensOptions(
        lensColor: Color(0xFF00E5FF),
        lensRadius: 220,
        dotSpacing: 38,
      ),
      child: MaterialApp(
        title: 'LensEffect Demo',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          brightness: Brightness.dark,
          scaffoldBackgroundColor: Colors.transparent,
        ),
        home: const DemoPage(),
      ),
    );
  }
}

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

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  bool _lensActive = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Kinetic Lens Effect',
              style: TextStyle(
                fontSize: 36,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
            const SizedBox(height: 12),
            Text(
              'Move your cursor around the screen',
              style: TextStyle(fontSize: 16, color: Colors.grey[400]),
            ),
            const SizedBox(height: 40),
            ElevatedButton.icon(
              icon: Icon(
                _lensActive
                    ? Icons.visibility_off_outlined
                    : Icons.visibility_outlined,
              ),
              label: Text(_lensActive ? 'Disable Lens' : 'Enable Lens'),
              onPressed: () {
                final controller = LensEffectScope.of(context);
                controller.toggle();
                setState(() => _lensActive = !_lensActive);
              },
              style: ElevatedButton.styleFrom(
                backgroundColor: const Color(0xFF00E5FF),
                foregroundColor: Colors.black,
                padding: const EdgeInsets.symmetric(
                  horizontal: 24,
                  vertical: 14,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}