spotlight 1.0.4

spotlight: ^1.0.4 copied to clipboard

example/lib/main.dart

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

import 'package:flutter/services.dart';
import 'package:spotlight/spotlight.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SpotlightEffectPractice(),
    );
  }
}

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

  @override
  State<SpotlightEffectPractice> createState() =>
      _SpotlightEffectPracticeState();
}

class _SpotlightEffectPracticeState extends State<SpotlightEffectPractice> {
  Offset _spotlightPosition = Offset(200, 300);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: GestureDetector(
          onPanUpdate: (details) {
            setState(() {
              _spotlightPosition += details.delta;
            });
          },
          child: Stack(
            children: [
              Positioned.fill(
                child: Container(
                  color: Colors.black,
                  child: Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Text(
                      '''
                      The SpotlightEffect is a dynamic visual effect often used in UI/UX design or digital media to highlight 
                      
                      specific elements within an interface or scene. It mimics the appearance of a focused light beam or spotlight,
                      
                       drawing attention to a particular object or area by dimming or blurring the surrounding environment.
                      
                        This effect is especially useful in demos or tutorials to guide the user's focus, ensuring they don't miss 
                      
                        important features or interactions. It creates a sense of importance or urgency, making it ideal for
                      
                         onboarding processes, product walkthroughs, or showcasing key functionalities in an engaging way. 
                         ''',
                      style: TextStyle(
                        fontSize: 18,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
              ),
              Positioned.fill(
                child: ShaderMask(
                  shaderCallback: (rect) {
                    return RadialGradient(
                      center: Alignment(
                        (_spotlightPosition.dx - rect.width / 2) /
                            (rect.width / 2),
                        (_spotlightPosition.dy - rect.height / 2) /
                            (rect.height / 2),
                      ),
                      radius: 0.3,
                      colors: [
                        Colors.black,
                        Colors.transparent,
                      ],
                      // stops: [0.3, 1.0],
                    ).createShader(rect);
                  },
                  blendMode: BlendMode.dstOut,
                  child: Container(
                    color: Colors.black,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}