feature_spotlight 1.1.3

A simple, declarative Flutter package for creating guided tours and feature showcases with smooth animations and customizable tooltips.

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Feature Spotlight Demo',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
        useMaterial3: true,
      ),
      home: const FeatureSpotlight(
        child: MyHomePage(),
      ),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  late SpotlightController _controller;

  @override
  void initState() {
    super.initState();
    _controller = SpotlightController(
      steps: [
        SpotlightStep(
          id: 'title',
          text: 'Welcome to Feature Spotlight! This is a simple demo.',
          shape: SpotlightShape.rectangle,
          padding: const EdgeInsets.all(8),
        ),
        SpotlightStep(
          id: 'counter-text',
          text: 'This text displays how many times you pressed the button.',
          shape: SpotlightShape.rectangle,
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        ),
        SpotlightStep(
          id: 'fab',
          text: 'Press this button to increase the counter.',
          shape: SpotlightShape.circle,
          padding: const EdgeInsets.all(4),
        ),
        SpotlightStep(
          id: 'custom-tool',
          shape: SpotlightShape.rectangle,
          padding: const EdgeInsets.all(8),
          tooltipBuilder: (onNext, onPrevious, onSkip) {
            return Container(
              padding: const EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: Colors.deepPurple,
                borderRadius: BorderRadius.circular(16),
              ),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  const Text(
                    'Fully Custom Tooltip!',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 8),
                  const Text(
                    'You can build any UI you want for your tour steps.',
                    style: TextStyle(color: Colors.white70),
                  ),
                  const SizedBox(height: 16),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      TextButton(
                        onPressed: onPrevious,
                        child: const Text('Back',
                            style: TextStyle(color: Colors.white60)),
                      ),
                      const SizedBox(width: 8),
                      ElevatedButton(
                        onPressed: onNext,
                        child: const Text('Finish'),
                      ),
                    ],
                  ),
                ],
              ),
            );
          },
        ),
      ],
      onTourCompleted: () {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('Tour Completed!')),
        );
      },
    );
  }

  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: SpotlightTarget(
          id: 'title',
          controller: _controller,
          child: const Text('Feature Spotlight Demo'),
        ),
        actions: [
          IconButton(
            onPressed: () {
              FeatureSpotlight.of(context).startTour(_controller);
            },
            icon: const Icon(Icons.play_arrow),
            tooltip: 'Start Tour',
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SpotlightTarget(
              id: 'custom-tool',
              controller: _controller,
              child: const Text(
                'You have pushed the button this many times:',
              ),
            ),
            SpotlightTarget(
              id: 'counter-text',
              controller: _controller,
              child: Text(
                '$_counter',
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: SpotlightTarget(
        id: 'fab',
        controller: _controller,
        child: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}