🪶 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 #

Copyright © 2026 Orkitt Studio All rights reserved.

Use of this source code is governed by the MIT 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.