context_curtain 1.0.6

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> {
  final CurtainController _controller = CurtainController();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: CurtainReveal(
        controller: _controller,
        side: CurtainSide.right,
        curtainColor: const Color(0xFF581C87),
        elevation: 24,
        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,
                ),
              ),
              const SizedBox(height: 20),
              Text(
                'Drag from the right edge or tap the button below to reveal the animated curtain interaction.',
                style: TextStyle(
                  fontSize: 16,
                  color: Colors.white,
                  height: 1.6,
                ),
              ),
              const SizedBox(height: 32),
              FilledButton.icon(
                onPressed: () {
                  _controller.reveal();
                },
                icon: const Icon(Icons.play_arrow_rounded),
                label: const Text('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 Dynamic Layer Transition',
                style: TextStyle(
                  fontSize: 32,
                  fontWeight: FontWeight.bold,
                  height: 1.1,
                ),
              ),
              const SizedBox(height: 20),
              Text(
                'This screen demonstrates the reveal destination behind the animated curtain surface.',
                style: TextStyle(
                  fontSize: 16,
                  color: Colors.white.withOpacity(0.75),
                  height: 1.6,
                ),
              ),
              const SizedBox(height: 32),
              FilledButton.icon(
                onPressed: () {
                  _controller.close();
                },
                icon: const Icon(Icons.close_rounded),
                label: const Text('Close Curtain'),
              ),
              const SizedBox(height: 60),
            ],
          ),
        ),
      ),
    );
  }
}