flare_ui 🚀

Flare UI Showcase

The definitive, high-end design system for Flutter. Unifying Glassmorphism, Fluid Motion, and Adaptive Layouts into a single, cohesive, theme-driven ecosystem.

Pub Version License Points

✨ Core Identity

Flare UI represents the pinnacle of modern Flutter aesthetics. It is a commercial-grade UI Kit designed for developers who want to build apps that look like futuristic Fintech or Social platforms "out of the box".

  • 💎 Glassmorphism: High-performance frosted glass effects powered by BackdropFilter and RepaintBoundary.
  • 🍃 Fluid Motion: Every interaction is driven by elastic spring physics and subtle micro-animations.
  • 🎨 Unified Theming: A single FlareTheme (via ThemeExtension) that controls your entire app's blur, accents, and motion.
  • 📱 Premium Widgets: A curated set of widgets designed with a "Motion-First" philosophy.

🏗 Architecture Overview

Flare UI uses a source-of-truth theming engine:

  • src/theme/: Contains FlareTheme, defining the design tokens for the entire kit.
  • src/widgets/: Individual flagship components, optimized for performance and modularity.
  • Barrel (flare_ui.dart): Clean public API surface for immediate use.

🚀 Quick Start

1. Add Dependency

dependencies:
  flare_ui: ^1.0.0

2. Configure Theme

Wrap your MaterialApp with FlareTheme using extensions.

import 'package:flare_ui/flare_ui.dart';

MaterialApp(
  theme: ThemeData.dark().copyWith(
    extensions: [FlareTheme.dark()],
  ),
  home: const DashboardPage(),
)

3. Use Flare Components

FlareCard(
  onTap: () => print('Tapped!'),
  child: Column(
    children: [
      FlareStatus(label: 'Active', type: FlareStatusType.success),
      const SizedBox(height: 12),
      const Text('Futuristic Balance'),
    ],
  ),
)

🎨 Gallery

Component Description Features
FlareGlass The foundation Dynamic blur, tint, and inner borders.
FlareCard Flagship container Press-to-scale, glass effect, haptic feedback.
FlareToast Feedback system Elastic entrance, auto-dismiss, glass UI.
FlareBottomBar Navigation Sliding indicators, elastic scale, stadium shape.
FlareButton Action handler Premium feel, scaling animations.
FlareStatus Information Success/Error/Info badges with glass aesthetics.

🛠 Performance Rules

  • All glass components are wrapped in RepaintBoundary to keep GPU usage low during animations.
  • Zero-warning code under strict flutter_lints.
  • 100% DartDoc coverage for seamless IDE integration.

📄 License & Author

Developed with ❤️ by ErsanQ. Released under the MIT License.

Libraries

flare_ui
flare_ui