🪶 Orkitt UI Framework #

The official Flutter design framework by Orkitt Studio Built for speed, scalability, and visual harmony.

Orkitt UI Framework is a modern Flutter design system that unifies theming, responsiveness, and developer productivity into one elegant foundation. It enables you to design visually consistent, adaptive, and production-ready Flutter applications — faster, cleaner, and with zero boilerplate.

⚡ Empower your Flutter workflow with expressive extensions, responsive layout tools, and a powerful design engine engineered for clarity and creativity.

✨ Key Highlights #

• 🎨 Unified Theming System – Scalable typography, brand colors, and style layers that adapt to light/dark modes automatically.
• 📐 Responsive Layouts – Pixel-perfect scaling across all screen sizes with easy-to-use measurement extensions.
• 🧩 Beautiful Components – Professionally crafted buttons, cards, and layouts that follow Orkitt’s design principles.
• ⚙️ Smart Syntax Extensions – Intuitive .m, .p, .sp, and .w helpers for building beautiful layouts with less code.
• 🧠 Context Utilities – Access media, theme, and typography directly from BuildContext.
• 🪄 Smooth Navigation – Elegant route transitions and adaptive animation types using the new shift() navigation system.
• 🧱 Consistency-Driven – Built-in DPI handling, debugging, and theming awareness for design precision.

🚀 Getting Started #

Initialize the framework globally to enable responsive scaling, orientation handling, and design frame calibration.

 // Initialize Orkitt Design System
 AppComposer(
      orientation: AppOrientation.portraitUp, // Lock or allow orientations
      designFrame: const DesignFrame(width: 320, height: 812), // Base design frame // Or percent based
      scaleMode: ScaleMode.design, // Design-based scaling
      pixelDebug: false, // Turn on for layout visualization
      gridCount: 12, // Default grid layout (for responsive spacing)
      enableDebugLogging: true, // Logs device metrics & scaling
      errorScreen:  ErrorScreen.sifi, // Custom global error view
      version: '2.0.0', // To show on Development Banner
      appBuilder: (Composer layout) => const MaterialApp(), //Your main material app 
    );

🎨 Theming System #

Define your brand identity through scalable color and typography systems.

1. Brand Colors #

class AppColors extends BrandKolors {
  @override
  Color get primary => const Color(0xFF4A90E2);
  @override
  Color get accent => const Color(0xFFE24A8D);
}

2. Typography #

class AppTypo extends BrandTypography {
  @override
  String get fontFamily => 'Montserrat';
  @override
  TextStyle get body => TextStyle(fontSize: 16.sp);
}

3. Generate and Apply #

final ThemeData lightTheme => ThemeBuilder.build(AppLightColors(), typography: AppFonts());

📏 Responsive Extensions #

🧱 Layout & Spacing Helpers #

These expressive shortcuts help maintain design consistency and readability across widgets.

🧭 Navigation System #

Version 1.0.0 introduces the new Orkitt Navigation API — built around the concept of shifting between views.

Available Animation Types #

enum AnimationType { fade, slideFromRight, slideFromLeft, scale, rotate, rotateScale }

🔁 Async & Utility Extensions #

📅 Date & Time Extensions #

final tomorrow = DateTime.now().tomorrow;
final greeting = DateTime.now().greeting; // Morning, Afternoon, Evening

💱 Currency Extensions #

🧩 Logging System #

Use structured logging instead of print():

Debug.info('App initialized');
Debug.error('Network error');
Debug.success('User logged in');

📚 Documentation #

• 🎨 Theming System
• 📐 Responsive Layout
• 🧭 Navigation System
• 🧩 Widget Extensions

🤝 Contributing #

Contributions and ideas are welcome. Submit pull requests or open issues at:

👉 github.com/orkitt/uikit

🏷️ License #

BSD 3-Clause License

Copyright © 2025 Orkitt Studio All rights reserved.

Use of this source code is governed by the BSD 3-Clause License, which permits usage, modification, and distribution under specific conditions. See the LICENSE file for full details.

🌐 Connect #

🐙 GitHub: github.com/orkitt 💬 Twitter/X: @orkittdev

Part of the Orkitt Design Ecosystem — empowering developers to design fast and build beautifully.