screenveil 0.0.1

A premium, highly customizable Flutter package to protect sensitive content with blur, images, or custom widgets when the app is in the background or app switcher.

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ScreenVeil Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark(useMaterial3: true),
      home: const DashboardScreen(),
    );
  }
}

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

  @override
  State<DashboardScreen> createState() => _DashboardScreenState();
}

class _DashboardScreenState extends State<DashboardScreen> {
  // ScreenVeil Configuration States
  bool _isShieldEnabled = true;
  bool _forceShowVeil = false;
  VeilType _selectedType = VeilType.blur;

  @override
  Widget build(BuildContext context) {
    // 1. Configure Blur Options (Soft Gaussian Blur with Lock Icon)
    final blurOptions = BlurVeilOptions(
      sigmaX: 15.0,
      sigmaY: 15.0,
      color: const Color(0x80000000), // 0.5 opacity black
      centerWidget: const Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(Icons.lock_outline_rounded, color: Colors.cyan, size: 50),
          SizedBox(height: 12),
          Text(
            'BLUR SHIELD ACTIVE',
            style: TextStyle(fontWeight: FontWeight.bold, color: Colors.cyan),
          ),
        ],
      ),
    );

    // 2. Configure Image Options (Branded Background Wallpaper)
    final imageOptions = ImageVeilOptions(
      image: const NetworkImage(
        'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1000&auto=format&fit=crop',
      ),
      fit: BoxFit.cover,
      tintColor: const Color(0x99000000), // 0.6 opacity black
      child: const Text(
        'IMAGE SHIELD ACTIVE',
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16, letterSpacing: 2),
      ),
    );

    // 3. Configure Custom Widget Options (passcode lock screen)
    final customOptions = CustomVeilOptions(
      child: Scaffold(
        backgroundColor: const Color(0xFF0F172A),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Icon(Icons.fingerprint, color: Colors.redAccent, size: 70),
              const SizedBox(height: 20),
              const Text(
                'BIOMETRIC LOCK ACTIVE',
                style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.white),
              ),
              const SizedBox(height: 30),
              ElevatedButton.icon(
                style: ElevatedButton.styleFrom(backgroundColor: Colors.redAccent, foregroundColor: Colors.white),
                onPressed: () => setState(() => _forceShowVeil = false),
                icon: const Icon(Icons.lock_open),
                label: const Text('Unlock Preview'),
              ),
            ],
          ),
        ),
      ),
    );

    return Scaffold(
      appBar: AppBar(
        title: const Text('🛡️ ScreenVeil Simple Demo'),
        centerTitle: true,
      ),
      body: ScreenVeil(
        isEnabled: _isShieldEnabled,
        forceShow: _forceShowVeil,
        type: _selectedType,
        blurOptions: blurOptions,
        imageOptions: imageOptions,
        customOptions: customOptions,
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(24.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // Mock Sensitive Card
              Card(
                color: const Color(0xFF1E293B),
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
                child: const Padding(
                  padding: EdgeInsets.all(24.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('SENSITIVE DATA CARD', style: TextStyle(fontSize: 12, color: Colors.white54)),
                      SizedBox(height: 16),
                      Text('\$142,850.00 USD', style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold)),
                      SizedBox(height: 8),
                      Text('Card Number: 4920 3829 4810 9482', style: TextStyle(fontFamily: 'monospace')),
                    ],
                  ),
                ),
              ),
              const SizedBox(height: 30),

              // Shield Config Controls
              const Text('PRIVACY CONFIGURATION', style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white70)),
              const SizedBox(height: 12),
              
              // Enable Switch
              SwitchListTile(
                title: const Text('Enable Auto-Veiling'),
                subtitle: const Text('Covers application when sent to background'),
                value: _isShieldEnabled,
                onChanged: (val) => setState(() => _isShieldEnabled = val),
              ),
              const Divider(),

              // Type Selector
              const Padding(
                padding: EdgeInsets.symmetric(vertical: 8.0),
                child: Text('Select Protective Veil Style:', style: TextStyle(fontSize: 13, color: Colors.white70)),
              ),
              DropdownButtonFormField<VeilType>(
                // ignore: deprecated_member_use
                value: _selectedType,
                decoration: const InputDecoration(border: OutlineInputBorder()),
                items: const [
                  DropdownMenuItem(value: VeilType.blur, child: Text('Gaussian Blur Filter')),
                  DropdownMenuItem(value: VeilType.image, child: Text('Branded Cover Image')),
                  DropdownMenuItem(value: VeilType.custom, child: Text('Custom Security Screen')),
                ],
                onChanged: (val) {
                  if (val != null) {
                    setState(() => _selectedType = val);
                  }
                },
              ),
              const SizedBox(height: 30),

              // Simulation trigger
              ElevatedButton.icon(
                style: ElevatedButton.styleFrom(
                  padding: const EdgeInsets.symmetric(vertical: 16),
                  backgroundColor: Colors.blueAccent,
                  foregroundColor: Colors.white,
                ),
                onPressed: () {
                  setState(() => _forceShowVeil = true);
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(
                      content: Text('Simulating protection shield! Click "Unlock" or switch tabs to bypass.'),
                      duration: Duration(seconds: 3),
                    ),
                  );
                },
                icon: const Icon(Icons.slideshow_rounded),
                label: const Text('SIMULATE SHIELD IN FOREGROUND', style: TextStyle(fontWeight: FontWeight.bold)),
              ),
              const SizedBox(height: 12),
              const Text(
                'Note: Minimize your app or swipe to other apps to see how the preview shield renders in the system app switcher.',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 11, color: Colors.white38),
              ),
            ],
          ),
        ),
      ),
    );
  }
}