context_curtain 1.1.1

A premium UI/UX widget that creates an organic, physics-based canvas flutter animation for high-end features and menu reveals.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:context_curtain/curtain_flutter.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Context Curtain Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark(useMaterial3: true),
      home: const ExampleShowcaseScreen(),
    );
  }
}

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

  @override
  State<ExampleShowcaseScreen> createState() => _ExampleShowcaseScreenState();
}

class _ExampleShowcaseScreenState extends State<ExampleShowcaseScreen> {
  /// SDK-style controller (single layer demo)
  final CurtainController _controller = CurtainController();

  bool isOpen = false;

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  /// 🔥 CLEAN SDK ACTION API (what devs should use)
  void _toggleCurtain() {
    if (isOpen) {
      _controller.close();
    } else {
      _controller.reveal();
    }

    setState(() {
      isOpen = !isOpen;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: CurtainReveal(
        controller: _controller,
        side: CurtainSide.right,
        curtainColor: const Color(0xFF581C87),
        elevation: 28,
        revealedBackground: _buildBackground(),
        child: _buildForeground(),
      ),
    );
  }

  Widget _buildForeground() {
    return Container(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          colors: [
            Color(0xFF3B0764),
            Color(0xFF1E1B4B),
          ],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
      ),
      child: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(32),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Spacer(),

              const Icon(
                Icons.view_carousel_rounded,
                size: 72,
                color: Colors.amberAccent,
              ),

              const SizedBox(height: 24),

              const Text(
                'CONTEXT CURTAIN',
                style: TextStyle(
                  fontSize: 14,
                  letterSpacing: 4,
                  fontWeight: FontWeight.w900,
                  color: Colors.amberAccent,
                ),
              ),

              const SizedBox(height: 12),

              const Text(
                'Organic Physics-Based Flutter Curtain Animation',
                style: TextStyle(
                  fontSize: 34,
                  fontWeight: FontWeight.bold,
                  height: 1.1,
                  color: Colors.white,
                ),
              ),

              const SizedBox(height: 20),

              Text(
                'Swipe from the right edge or use the button below to trigger the curtain reveal animation.',
                style: TextStyle(
                  fontSize: 16,
                  color: Colors.white,
                  height: 1.6,
                ),
              ),

              const SizedBox(height: 32),

              FilledButton.icon(
                onPressed: _toggleCurtain,
                icon: Icon(isOpen
                    ? Icons.close_rounded
                    : Icons.play_arrow_rounded),
                label: Text(isOpen ? 'Close Curtain' : 'Reveal Curtain'),
              ),

              const SizedBox(height: 60),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildBackground() {
    return Container(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          colors: [
            Color(0xFF0F172A),
            Color(0xFF020617),
          ],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
        ),
      ),
      child: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(32),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Spacer(),

              const Icon(
                Icons.auto_awesome_rounded,
                size: 72,
                color: Colors.greenAccent,
              ),

              const SizedBox(height: 24),

              const Text(
                'REVEALED VIEW',
                style: TextStyle(
                  fontSize: 14,
                  letterSpacing: 4,
                  fontWeight: FontWeight.w900,
                  color: Colors.greenAccent,
                ),
              ),

              const SizedBox(height: 12),

              const Text(
                'Smooth Layer Transition Engine',
                style: TextStyle(
                  fontSize: 32,
                  fontWeight: FontWeight.bold,
                  height: 1.1,
                  color: Colors.white,
                ),
              ),

              const SizedBox(height: 20),

              Text(
                'This is the background layer revealed behind the animated curtain system.',
                style: TextStyle(
                  fontSize: 16,
                  color: Colors.white,
                  height: 1.6,
                ),
              ),

              const SizedBox(height: 32),

              FilledButton.icon(
                onPressed: _toggleCurtain,
                icon: const Icon(Icons.keyboard_arrow_left_rounded),
                label: const Text('Toggle Back'),
              ),

              const SizedBox(height: 60),
            ],
          ),
        ),
      ),
    );
  }
}