Spoiler Animation for Flutter #

A Flutter package to create spoiler animations similar to the one used in Telegram, allowing you to hide sensitive or spoiler-filled content until it's tapped or clicked.

Demo #

Demo animation

Features #

Spoiler Animation: Blur effect hides content until revealed.
Customizable: Adjust blur intensity, animation duration, and more.
Easy Integration: Simple API for adding spoiler animations to your Flutter applications.
Platform Agnostic: Works seamlessly across different platforms supported by Flutter.

Installation #

To use this package, add spoiler_widget as a dependency in your pubspec.yaml file.

dependencies:
  spoiler_widget: ^1.0.5

Then, run flutter pub get to install the package.

Usage #

Import the package into your Dart code:

import 'package:spoiler_widget/spoiler_widget.dart';

Wrap the content you want to hide with a SpoilerTextWidget widget:

SpoilerTextWidget(
  text: 'This is a spoiler! Tap to reveal.',
),

Wrap the content you want to hide with a SpoilerWidget widget:

SpoilerWidget(
  child: CachedNetworkImage(imageUrl: url),
),

Example #

Here's a simple example demonstrating how to use the package:

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

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

class MyApp extends StatelessWidget {
  final text = 'This is a spoiler! Tap to reveal.';
  final url =
      'https://img.freepik.com/premium-photo/drawing-female-superhero-female-character_1308175-151081.jpg?w=1800';
  bool enable = true;

  @override
  Widget build(BuildContext context) {   
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Spoiler Animation Example'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SpoilerTextWidget(
              configuration: TextSpoilerConfiguration(
                isEnabled: enable,
                maxParticleSize: 0.7,
                particleDensity: 2.5,
                speedOfParticles: 0.2,
                fadeRadius: 3,
                fadeAnimation: true,
                enableGesture: true,
                selection: const TextSelection(baseOffset: 0, extentOffset: 18),
                style: const TextStyle(
                  fontSize: 50,
                  color: Colors.white,
                ),
              ),
              text: text,
            ),
            ClipRect(
              child: SpoilerWidget(
                configuration: WidgetSpoilerConfiguration(
                  isEnabled: enable,
                  maxParticleSize: 0.7,
                  particleDensity: 5,
                  speedOfParticles: 0.2,
                  fadeRadius: 3,
                  fadeAnimation: true,
                  enableGesture: true,
                  imageFilter: ImageFilter.blur(sigmaX: 30.0, sigmaY: 30.0),
                ),
                child: CachedNetworkImage(imageUrl: url),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

API Reference #