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.

context_curtain

A production-ready Flutter UI/UX animation library that creates organic, physics-based fabric curtain transitions for modern apps — ideal for contextual navigation, onboarding flows, dashboards, and cinematic reveals.

Features

• Physics-based cloth simulation (CustomPainter)
• Cinematic, multi-directional curtain transitions (left, right, top, bottom)
• High-performance rendering with AnimationController + CustomPainter
• Composable multi-layer curtains
• Accessibility support via Flutter Semantics

Installation

Option 1 — Git (recommended for development)

dependencies:
  context_curtain:
    git:
      url: https://github.com/swangai7178/curtain_context.git
      ref: main

Option 2 — pub.dev (when published)

dependencies:
  context_curtain: ^1.1.0

Getting started

Import the package:

import 'package:context_curtain/curtain_flutter.dart';

Core concepts

• CurtainReveal: main widget that renders the curtain
• child: front UI layer
• revealedBackground: back UI layer shown after reveal
• CurtainController: controls open/close animations

Controller API example

final CurtainController controller = CurtainController();
controller.reveal(); // open
controller.close();  // close

Basic example

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) => const MaterialApp(home: CurtainDemo());
}

class CurtainDemo extends StatefulWidget {
  const CurtainDemo({super.key});
  @override
  State<CurtainDemo> createState() => _CurtainDemoState();
}

class _CurtainDemoState extends State<CurtainDemo> {
  final CurtainController controller = CurtainController();

  @override
  Widget build(BuildContext context) => Scaffold(
        body: CurtainReveal(
          controller: controller,
          side: CurtainSide.right,
          curtainColor: Colors.deepPurple,
          revealedBackground: Container(
            color: Colors.black,
            child: const Center(
              child: Text('Revealed Layer', style: TextStyle(color: Colors.white)),
            ),
          ),
          child: Container(
            color: Colors.deepPurple,
            child: Center(
              child: ElevatedButton(onPressed: () => controller.reveal(), child: const Text('Open Curtain')),
            ),
          ),
        ),
      );
}

Multi-layer curtains

Stack curtains to create multi-step onboarding or layered transitions:

CurtainReveal(
  controller: firstController,
  side: CurtainSide.right,
  child: CurtainReveal(
    controller: secondController,
    side: CurtainSide.bottom,
    child: HomeScreen(),
    revealedBackground: Page2(),
  ),
  revealedBackground: Page1(),
)

Performance

• No widget rebuilds during animation
• GPU-accelerated CustomPainter rendering
• Repaint boundary isolation for stable FPS

Example app

Run the included example:

flutter run example/

Author

Built by Samuel Wangai — https://github.com/swangai7178

License

MIT