vyuh_feature_system 1.38.2

Provides the essential building blocks for a CMS-driven UI

Vyuh Framework

Build Modular, Scalable, CMS-driven Flutter Apps

Docs | Website

Vyuh Feature System 🔧

The system feature package for Vyuh framework, providing essential content types, actions, conditions, and services for building CMS-driven Flutter applications.

Features ✨

Content Types 📝

Routes 🧭

• Page Routes: Full-screen pages with various layouts

  • Default page layout with app bar and body
  • Tabs layout for sectioned content
  • Single item layout for focused content
  • Conditional layout for dynamic routing

• Dialog Routes: Modal dialogs with customizable content

  • Default dialog layout
  • Custom dialog layouts

Cards 🎴

• Default Card: Standard card layout with title, content, and actions
• List Item Card: Compact layout for list views
• Button Card: Interactive card with action triggers
• Conditional Card: Dynamic layout based on conditions

Groups 📦

• Carousel: Horizontal scrolling group of items

  • Auto-play support
  • Navigation controls
  • Custom transitions

• Grid: Responsive grid layout

  • Configurable columns
  • Responsive breakpoints
  • Custom item spacing

• List: Vertical list of items

  • Configurable spacing
  • Dividers support
  • Custom item layouts

Other Items 🔧

• Portable Text: Rich text content with custom marks
  • Action invocation marks
  • Link marks with custom styling
  • Custom block styles
• Empty: Empty content placeholder
• Unknown: Fallback for unknown content types
• Conditional: Content based on conditions

Each content type can be extended with custom layouts by implementing LayoutConfiguration<T> and registering the layout in your feature descriptor.

Actions 🎯

The system feature provides several built-in actions for navigation, UI control, and system operations:

Navigation Actions 🧭

• NavigateAction: Navigate to a new route with optional query parameters
• NavigateBackAction: Return to the previous route in history
• NavigateReplaceAction: Replace current route with a new one
• OpenUrlAction: Open external URLs in browser or app

UI Actions 🎨

• AlertAction: Display snackbar messages with different types (success, error, info)
• DrawerAction: Show or hide the navigation drawer
• OpenInDialogAction: Display content in a modal dialog
• ToggleThemeAction: Switch between light and dark themes

System Actions ⚙️

• DelayAction: Add a timed delay between action executions
• RouteRefreshAction: Refresh the current route's content
• RestartAction: Restart the entire application

Conditions 🔄

• Boolean: Simple boolean conditions
• Feature Flag: Toggle features based on conditions
• Screen Size: Responsive layouts based on screen size
• Current Platform: Platform-specific content
• Theme Mode: Theme-based content
• User Authentication: Content based on auth state

Content Modifiers

Content modifiers allow you to transform content before rendering:

import 'package:vyuh_feature_system/vyuh_feature_system.dart' as system;

// Apply theme-based modifications
ThemeModifier(
  light: LightContent(),
  dark: DarkContent(),
);

copied to clipboard

API Handlers

Configure API content handling:

import 'package:vyuh_feature_system/vyuh_feature_system.dart' as system;

final apiConfig = JsonPathApiConfiguration(
  baseUrl: 'https://api.example.com',
  paths: {
    'products': '$.items[*]',
    'categories': '$.categories[*]',
  },
);

copied to clipboard

Services 🛠️

Breakpoint Service

Handle responsive layouts:

import 'package:vyuh_feature_system/vyuh_feature_system.dart' as system;

final breakpointService = vyuh.di.get<system.BreakpointService>();

Observer(
  builder: (_) {
    if (breakpointService.isMobile) {
      return MobileLayout();
    }
    if (breakpointService.isTablet) {
      return TabletLayout();
    }
    return DesktopLayout();
  },
);

// Custom breakpoints
breakpointService.setBreakpoints(
  mobile: 480,
  tablet: 768,
  desktop: 1024,
);

copied to clipboard

Theme Service

Manage app theme and mode:

import 'package:vyuh_feature_system/vyuh_feature_system.dart' as system;

// Get theme service
final themeService = vyuh.di.get<system.ThemeService>();

// Toggle theme
system.ToggleThemeAction().execute();

// Observe current theme mode
Observer(
  builder: (_) {
    final mode = themeService.currentMode.value;
    return Text('Current theme: $mode');
  },
);

copied to clipboard

Content Extensions

Register content types and builders:

import 'package:vyuh_feature_system/vyuh_feature_system.dart' as system;

final feature = FeatureDescriptor(
  name: 'my_feature',
  extensions: [
    ContentExtensionDescriptor(
      contents: [
        // Your content descriptors
      ],
      contentBuilders: [
        Route.contentBuilder,
        Card.contentBuilder,
        Group.contentBuilder,
      ],
      contentModifiers: [
        ThemeModifier.modifier,
      ],
    ),
  ],
);

copied to clipboard

System Routes

The system feature provides built-in routes:

Error Route

• Path: /__system_error__
• Purpose: Displays system errors with stack trace
• Usage: Automatically used by the framework for error handling

Navigation Route

• Path: /__system_navigate__
• Purpose: Handles external navigation (URLs, deep links)
• Usage: Automatically used by navigation actions

These routes are registered automatically when using the system feature and provide consistent error handling and navigation behavior across your app.

Installation 📦

Add this to your package's pubspec.yaml file:

dependencies:
  vyuh_feature_system: any

copied to clipboard

Learn More 📚

• Visit docs.vyuh.tech for detailed documentation
• Check out the GitHub repository for source code
• Report issues on the issue tracker

---

Made with ❤️ by Vyuh