### Run Flutter Scalify Example

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/README.md

Instructions to clone the repository, navigate to the example directory, fetch dependencies, and run the Flutter application.

```bash
cd example
flutter pub get
flutter run
```

--------------------------------

### Install Application Targets and Files

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/linux/CMakeLists.txt

Installs the application executable, ICU data file, Flutter library, bundled plugin libraries, and native assets into the designated installation directories within the bundle.

```cmake
install(TARGETS ${BINARY_NAME} RUNTIME DESTINATION "${CMAKE_INSTALL_PREFIX}"
  COMPONENT Runtime)

install(FILES "${FLUTTER_ICU_DATA_FILE}" DESTINATION "${INSTALL_BUNDLE_DATA_DIR}"
  COMPONENT Runtime)

install(FILES "${FLUTTER_LIBRARY}" DESTINATION "${INSTALL_BUNDLE_LIB_DIR}"
  COMPONENT Runtime)

foreach(bundled_library ${PLUGIN_BUNDLED_LIBRARIES})
  install(FILES "${bundled_library}"
    DESTINATION "${INSTALL_BUNDLE_LIB_DIR}"
    COMPONENT Runtime)
endforeach(bundled_library)

# Copy the native assets provided by the build.dart from all packages.
set(NATIVE_ASSETS_DIR "${PROJECT_BUILD_DIR}native_assets/linux/")
install(DIRECTORY "${NATIVE_ASSETS_DIR}"
   DESTINATION "${INSTALL_BUNDLE_LIB_DIR}"
   COMPONENT Runtime)
```

--------------------------------

### Installation Configuration for Windows Executable

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/windows/CMakeLists.txt

Configures installation rules for the application, ensuring runtime files are placed correctly next to the executable for in-place execution.

```cmake
set(BUILD_BUNDLE_DIR "$<TARGET_FILE_DIR:${BINARY_NAME}>")
set(CMAKE_VS_INCLUDE_INSTALL_TO_DEFAULT_BUILD 1)
if(CMAKE_INSTALL_PREFIX_INITIALIZED_TO_DEFAULT)
  set(CMAKE_INSTALL_PREFIX "${BUILD_BUNDLE_DIR}" CACHE PATH "..." FORCE)
endif()

set(INSTALL_BUNDLE_DATA_DIR "${CMAKE_INSTALL_PREFIX}/data")
set(INSTALL_BUNDLE_LIB_DIR "${CMAKE_INSTALL_PREFIX}")

install(TARGETS ${BINARY_NAME} RUNTIME DESTINATION "${CMAKE_INSTALL_PREFIX}"
  COMPONENT Runtime)

install(FILES "${FLUTTER_ICU_DATA_FILE}" DESTINATION "${INSTALL_BUNDLE_DATA_DIR}"
  COMPONENT Runtime)

install(FILES "${FLUTTER_LIBRARY}" DESTINATION "${INSTALL_BUNDLE_LIB_DIR}"
  COMPONENT Runtime)

if(PLUGIN_BUNDLED_LIBRARIES)
  install(FILES "${PLUGIN_BUNDLED_LIBRARIES}"
    DESTINATION "${INSTALL_BUNDLE_LIB_DIR}"
    COMPONENT Runtime)
endif()

set(NATIVE_ASSETS_DIR "${PROJECT_BUILD_DIR}native_assets/windows/")
install(DIRECTORY "${NATIVE_ASSETS_DIR}"
   DESTINATION "${INSTALL_BUNDLE_LIB_DIR}"
   COMPONENT Runtime)

set(FLUTTER_ASSET_DIR_NAME "flutter_assets")
install(CODE "
  file(REMOVE_RECURSE \"${INSTALL_BUNDLE_DATA_DIR}/${FLUTTER_ASSET_DIR_NAME}\")
  " COMPONENT Runtime)
install(DIRECTORY "${PROJECT_BUILD_DIR}/${FLUTTER_ASSET_DIR_NAME}"
  DESTINATION "${INSTALL_BUNDLE_DATA_DIR}" COMPONENT Runtime)

install(FILES "${AOT_LIBRARY}" DESTINATION "${INSTALL_BUNDLE_DATA_DIR}"
  CONFIGURATIONS Profile;Release
  COMPONENT Runtime)
```

--------------------------------

### Installation Bundle Configuration

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/linux/CMakeLists.txt

Configures the installation process to create a relocatable bundle. It sets up directories for data and libraries within the bundle and ensures a clean build directory.

```cmake
# === Installation ===
# By default, "installing" just makes a relocatable bundle in the build
# directory.
set(BUILD_BUNDLE_DIR "${PROJECT_BINARY_DIR}/bundle")
if(CMAKE_INSTALL_PREFIX_INITIALIZED_TO_DEFAULT)
  set(CMAKE_INSTALL_PREFIX "${BUILD_BUNDLE_DIR}" CACHE PATH "..." FORCE)
endif()

# Start with a clean build bundle directory every time.
install(CODE "
  file(REMOVE_RECURSE \"${BUILD_BUNDLE_DIR}/\")
  " COMPONENT Runtime)

set(INSTALL_BUNDLE_DATA_DIR "${CMAKE_INSTALL_PREFIX}/data")
set(INSTALL_BUNDLE_LIB_DIR "${CMAKE_INSTALL_PREFIX}/lib")
```

--------------------------------

### Install AOT Library

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/linux/CMakeLists.txt

Installs the Ahead-Of-Time (AOT) compiled library into the bundle's library directory, but only for non-Debug build configurations.

```cmake
# Install the AOT library on non-Debug builds only.
if(NOT CMAKE_BUILD_TYPE MATCHES "Debug")
  install(FILES "${AOT_LIBRARY}" DESTINATION "${INSTALL_BUNDLE_LIB_DIR}"
    COMPONENT Runtime)
endif()
```

--------------------------------

### Complete Responsive UI Example

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Demonstrates the usage of various flutter_scalify extensions for creating a responsive Container with padding, size, decoration, and child elements.

```dart
Container(
  padding: [20, 10].p,           // Symmetric padding
  width: 300.w,                   // Responsive width
  height: 200.h,                  // Responsive height
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: 20.brt,         // Top border radius
    boxShadow: [
      BoxShadow(
        color: Colors.black12,
        offset: Offset(0, 4.s),   // Scaled offset
        blurRadius: 10.s,
      )
    ],
  ),
  child: Column(
    children: [
      Icon(Icons.star, size: 32.iz),                                  // Scaled icon
      16.sbh,                                                          // Spacing
      Text("Scalify", style: TextStyle(fontSize: 24.fz)),             // Scaled font
      8.sbh,
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text("Start", style: TextStyle(fontSize: 14.fz)),
          8.sbw,                                                       // Width spacing
          Icon(Icons.arrow_forward, size: 16.iz),
        ],
      )
    ],
  ),
)
```

--------------------------------

### Adaptive Navigation Setup

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Configures `ResponsiveNavigation` with destinations, selected index, and a callback for navigation changes. The `body` displays the content for the selected page.

```dart
class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedIndex = 0;

  final _pages = [
    const HomePage(),
    const SearchPage(),
    const ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return ResponsiveNavigation(
      destinations: const [
        NavDestination(icon: Icons.home, label: 'Home'),
        NavDestination(icon: Icons.search, label: 'Search'),
        NavDestination(
          icon: Icons.person,
          label: 'Profile',
          badge: 3,  // Badge support!
        ),
      ],
      selectedIndex: _selectedIndex,
      onChanged: (i) => setState(() => _selectedIndex = i),
      body: _pages[_selectedIndex],
    );
  }
}
```

--------------------------------

### Project and Build Configuration

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/linux/CMakeLists.txt

Sets up the minimum CMake version, project name, executable name, and application ID. It also defines the build type and installation path.

```cmake
cmake_minimum_required(VERSION 3.13)
project(runner LANGUAGES CXX)

# The name of the executable created for the application. Change this to change
# the on-disk name of your application.
set(BINARY_NAME "flutter_scalify_example")
# The unique GTK application identifier for this application. See:
# https://wiki.gnome.org/HowDoI/ChooseApplicationID
set(APPLICATION_ID "com.example.flutter_scalify_example")

# Explicitly opt in to modern CMake behaviors to avoid warnings with recent
# versions of CMake.
cmake_policy(SET CMP0063 NEW)

# Load bundled libraries from the lib/ directory relative to the binary.
set(CMAKE_INSTALL_RPATH "$ORIGIN/lib")

# Root filesystem for cross-building.
if(FLUTTER_TARGET_PLATFORM_SYSROOT)
  set(CMAKE_SYSROOT ${FLUTTER_TARGET_PLATFORM_SYSROOT})
  set(CMAKE_FIND_ROOT_PATH ${CMAKE_SYSROOT})
  set(CMAKE_FIND_ROOT_PATH_MODE_PROGRAM NEVER)
  set(CMAKE_FIND_ROOT_PATH_MODE_PACKAGE ONLY)
  set(CMAKE_FIND_ROOT_PATH_MODE_LIBRARY ONLY)
  set(CMAKE_FIND_ROOT_PATH_MODE_INCLUDE ONLY)
endif()

# Define build configuration options.
if(NOT CMAKE_BUILD_TYPE AND NOT CMAKE_CONFIGURATION_TYPES)
  set(CMAKE_BUILD_TYPE "Debug" CACHE
    STRING "Flutter build mode" FORCE)
  set_property(CACHE CMAKE_BUILD_TYPE PROPERTY STRINGS
    "Debug" "Profile" "Release")
endif()
```

--------------------------------

### Project and CMake Version Setup

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/windows/CMakeLists.txt

Sets the minimum required CMake version and the project name. It also explicitly opts into modern CMake behaviors.

```cmake
cmake_minimum_required(VERSION 3.14)
project(flutter_scalify_example LANGUAGES CXX)
```

```cmake
cmake_policy(VERSION 3.14...3.25)
```

--------------------------------

### Get Dependencies

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Run this command in your project's root directory after adding the dependency to pubspec.yaml.

```bash
flutter pub get
```

--------------------------------

### ResponsiveSpacing Setup

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Initialize ScalifySpacing with custom spacing values to create a unified design token system. This allows for predefined, scaled spacing values throughout your application.

```dart
ScalifySpacing.init(const SpacingScale(
  xs: 4,
  sm: 8,
  md: 16,
  lg: 24,
  xl: 32,
  xxl: 48,
));
```

--------------------------------

### Full ScalifySliver Example with ResponsiveGrid

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Combines ScalifySliverAppBar, ScalifySliverPersistentHeader, and ResponsiveGrid for a complete responsive scrollable layout. Use `useSliver: true` for integration with CustomScrollView.

```dart
CustomScrollView(
  slivers: [
    ScalifySliverAppBar(
      title: 'Products',
      mobileExpandedHeight: 180,
      desktopExpandedHeight: 300,
      flexibleBackground: Image.network(bannerUrl, fit: BoxFit.cover),
    ),
    ScalifySliverPersistentHeader(
      mobileMaxHeight: 50,
      desktopMaxHeight: 80,
      builder: (_, __, ___) => FilterBar(),
    ),
    ResponsiveGrid(
      useSliver: true,
      mobile: 2,
      desktop: 4,
      itemCount: products.length,
      itemBuilder: (ctx, i) => ProductCard(products[i]),
    ),
  ],
)
```

--------------------------------

### Configurable Rebuild Tolerance Example

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Demonstrates how Scalify's dual-tolerance system prevents unnecessary rebuilds by ignoring small pixel or scale changes. Default thresholds are 4.0px for width and 0.01 for scale.

```text
Screen: 375px → 377px (2px diff < 4px threshold)
Scale:  1.000 → 1.005 (0.005 diff < 0.01 threshold)
→ No rebuild! ✅
```

--------------------------------

### Install Flutter Assets

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/linux/CMakeLists.txt

Installs the Flutter assets directory into the application bundle. It ensures the assets directory is removed and re-copied on each build to prevent stale files.

```cmake
# Fully re-copy the assets directory on each build to avoid having stale files
# from a previous install.
set(FLUTTER_ASSET_DIR_NAME "flutter_assets")
install(CODE "
  file(REMOVE_RECURSE \"${INSTALL_BUNDLE_DATA_DIR}/${FLUTTER_ASSET_DIR_NAME}\")
  " COMPONENT Runtime)
install(DIRECTORY "${PROJECT_BUILD_DIR}/${FLUTTER_ASSET_DIR_NAME}"
  DESTINATION "${INSTALL_BUNDLE_DATA_DIR}" COMPONENT Runtime)
```

--------------------------------

### ScalifySliverPersistentHeader Example

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Create a responsive sticky header with adjustable max heights for mobile and desktop. The builder function allows dynamic content based on scroll progress.

```dart
ScalifySliverPersistentHeader(
  mobileMaxHeight: 60,
  desktopMaxHeight: 100,
  pinned: true,
  builder: (context, shrinkOffset, overlapsContent) {
    final progress = shrinkOffset / 40;
    return Container(
      color: Colors.blue.withAlpha((200 * (1 - progress)).toInt()),
      child: Center(child: Text('Sticky Header')),
    );
  },
)
```

--------------------------------

### Add Flutter Scalify Dependency

Source: https://github.com/alaa989/flutter_scalify/blob/main/QUICK_START.md

Install the flutter_scalify package using the Flutter package manager.

```bash
flutter pub add flutter_scalify

```

--------------------------------

### Set Flutter Library and Headers

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/windows/flutter/CMakeLists.txt

Defines the Flutter library path and includes necessary header files. These are published to the parent scope for the install step.

```cmake
set(FLUTTER_LIBRARY "${EPHEMERAL_DIR}/flutter_windows.dll")

# Published to parent scope for install step.
set(FLUTTER_LIBRARY ${FLUTTER_LIBRARY} PARENT_SCOPE)
set(FLUTTER_ICU_DATA_FILE "${EPHEMERAL_DIR}/icudtl.dat" PARENT_SCOPE)
set(PROJECT_BUILD_DIR "${PROJECT_DIR}/build/" PARENT_SCOPE)
set(AOT_LIBRARY "${PROJECT_DIR}/build/windows/app.so" PARENT_SCOPE)
```

--------------------------------

### ResponsiveVisibility Blacklist with Replacement

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Hide widgets on specific screen types and provide an optional replacement widget using ResponsiveVisibility. This example hides a widget on desktop and provides a replacement.

```dart
// Blacklist: Hide on desktop
ResponsiveVisibility(
  hiddenOn: [ScreenType.desktop, ScreenType.largeDesktop],
  replacement: DesktopSidebar(),   // Optional replacement widget
  child: MobileDrawer(),
)
```

--------------------------------

### ResponsiveVisibility Whitelist

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Control widget visibility based on screen type using ResponsiveVisibility. This example shows how to make a widget visible only on mobile devices.

```dart
// Whitelist: Show ONLY on mobile
ResponsiveVisibility(
  visibleOn: [ScreenType.mobile],
  child: MobileNavBar(),
)
```

--------------------------------

### Find System Dependencies

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/linux/flutter/CMakeLists.txt

Uses PkgConfig to find and check for required system libraries like GTK, GLIB, and GIO.

```cmake
find_package(PkgConfig REQUIRED)
pkg_check_modules(GTK REQUIRED IMPORTED_TARGET gtk+-3.0)
pkg_check_modules(GLIB REQUIRED IMPORTED_TARGET glib-2.0)
pkg_check_modules(GIO REQUIRED IMPORTED_TARGET gio-2.0)
```

--------------------------------

### Initialize ScalifyProvider with Configuration

Source: https://github.com/alaa989/flutter_scalify/blob/main/QUICK_START.md

Wrap your MaterialApp with ScalifyProvider and configure design dimensions and scaling limits. This enables automatic text scaling via theme extension.

```dart
MaterialApp(
   builder: (context, child) {
        return ScalifyProvider(
          config: const ScalifyConfig(
            designWidth: 375,
            designHeight: 812,
            minScale: 0.5,
            maxScale: 3.0,
            // 🛡️ High-Res Adaptation (Smart Dampening)
            memoryProtectionThreshold: 1920.0, 
            highResScaleFactor: 0.60, 
          ),
          child: child ?? const SizedBox(),
        );
      },
  // ✨ MAGIC LINE: Automatically scales all app text!
  theme: ThemeData.light().scale(context), 
  home: YourHomePage(),
)

```

--------------------------------

### Configure C++ Wrapper Sources

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/windows/flutter/CMakeLists.txt

Lists and transforms paths for C++ wrapper source files, categorizing them into core, plugin, and application components.

```cmake
list(APPEND CPP_WRAPPER_SOURCES_CORE
  "core_implementations.cc"
  "standard_codec.cc"
)
list(TRANSFORM CPP_WRAPPER_SOURCES_CORE PREPEND "${WRAPPER_ROOT}/")
list(APPEND CPP_WRAPPER_SOURCES_PLUGIN
  "plugin_registrar.cc"
)
list(TRANSFORM CPP_WRAPPER_SOURCES_PLUGIN PREPEND "${WRAPPER_ROOT}/")
list(APPEND CPP_WRAPPER_SOURCES_APP
  "flutter_engine.cc"
  "flutter_view_controller.cc"
)
list(TRANSFORM CPP_WRAPPER_SOURCES_APP PREPEND "${WRAPPER_ROOT}/")
```

--------------------------------

### Live Resizing with ResponsiveBuilder

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Use ResponsiveBuilder for instant UI updates when the window is resized. It provides responsive data to its builder function.

```dart
ResponsiveBuilder(
  builder: (context, data) {
    return Scaffold(
      body: Center(
        child: Text("${data.width.toInt()}px", style: TextStyle(fontSize: 20.fz)),
      ),
    );
  },
)
```

--------------------------------

### Add Dependency Libraries and Include Directories

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/windows/runner/CMakeLists.txt

Links necessary libraries (flutter, flutter_wrapper_app, dwmapi.lib) and sets include directories for the application target. Application-specific dependencies should be added here.

```cmake
target_link_libraries(${BINARY_NAME} PRIVATE flutter flutter_wrapper_app)
target_link_libraries(${BINARY_NAME} PRIVATE "dwmapi.lib")
target_include_directories(${BINARY_NAME} PRIVATE "${CMAKE_SOURCE_DIR}")
```

--------------------------------

### Conditional Logic with valueByScreen

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Use the `valueByScreen` extension method to easily get a value based on the current screen type. This simplifies conditional logic for properties like column counts.

```dart
final columns = context.valueByScreen<int>(
  mobile: 2,
  tablet: 3,
  desktop: 4,
  largeDesktop: 6,
);
```

--------------------------------

### Application Build Subdirectory

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/windows/CMakeLists.txt

Includes the runner's CMakeLists.txt file, which contains the specific build rules for the application executable.

```cmake
add_subdirectory("runner")
```

--------------------------------

### New: Percentage Scaling

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Utilize new percentage-based extensions for SizedBox to define width and height relative to the screen size.

```dart
SizedBox(width: 50.pw)   // 50% of screen width
SizedBox(height: 25.hp)  // 25% of screen height
```

--------------------------------

### ScalifyConfig Initialization

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Initialize ScalifyConfig with all available parameters to define design baselines, breakpoints, font controls, scale bounds, 4K protection, and performance tuning settings.

```dart
ScalifyConfig(
  // ─── 📐 Design Baseline ──────────────────────────────────────────
  // These values should match your UI design file (e.g., Figma, XD).
  // Scalify calculates scale factors by comparing actual screen size
  // to these reference dimensions.
  designWidth: 375.0,             // Your design's reference width in pixels
  designHeight: 812.0,            // Your design's reference height in pixels

  // ─── 📱 Breakpoints ──────────────────────────────────────────────
  // Define exact pixel boundaries for each screen type.
  // These control when ResponsiveGrid, ResponsiveVisibility,
  // ResponsiveNavigation, etc. switch their layout.
  watchBreakpoint: 300.0,         // < 300px = Watch
  mobileBreakpoint: 600.0,        // 300–600px = Mobile
  tabletBreakpoint: 900.0,        // 600–900px = Tablet
  smallDesktopBreakpoint: 1200.0, // 900–1200px = Small Desktop
  desktopBreakpoint: 1800.0,      // 1200–1800px = Desktop
  //                               // > 1800px = Large Desktop

  // ─── 🔡 Font Control ─────────────────────────────────────────────
  // These ensure font sizes remain readable on all devices.
  // .fz extension uses these bounds for clamping.
  minFontSize: 6.0,               // Minimum allowed font size (floor)
  maxFontSize: 256.0,             // Maximum allowed font size (ceiling)
  respectTextScaleFactor: true,   // Respect system accessibility text scaling

  // ─── 📏 Scale Bounds ──────────────────────────────────────────────
  // Prevent extreme scaling that would distort the UI.
  // E.g., on a 4K monitor, the scale might be 5.0x — maxScale caps it.
  minScale: 0.5,                  // UI never scales below 50%
  maxScale: 4.0,                  // UI never scales above 400%

  // ─── 🛡️ 4K / Ultra-Wide Protection ───────────────────────────────
  // On very wide screens (e.g., 3840px), raw scaling would make text
  // enormous. Smart Dampening kicks in above the threshold width.
  memoryProtectionThreshold: 1920.0,  // Width where dampening starts
  highResScaleFactor: 0.65,           // Dampening strength (0.0–1.0)
  //   0.0 = full dampening (scale stops growing)
  //   1.0 = no dampening (linear scaling continues)
  //   0.65 = balanced (recommended)

  // ─── ⚡ Performance Tuning ────────────────────────────────────────
  // These prevent excessive widget rebuilds during window resizing
  // (Desktop/Web). Most apps can use defaults.
  debounceWindowMillis: 120,          // Wait 120ms after last resize event
  rebuildScaleThreshold: 0.01,        // Ignore scale changes < 1%
  rebuildWidthPxThreshold: 4.0,       // Ignore width changes < 4px
  enableGranularNotifications: false, // Enable InheritedModel aspect filtering

  // ─── 🔄 Orientation ──────────────────────────────────────────────
  // If true, swaps designWidth/designHeight in landscape orientation.
  // Useful for apps that have separate landscape designs.
  autoSwapDimensions: false,

  // ─── 🔧 Minimum Window Width ──────────────────────────────────────
  // If > 0, enables horizontal scrolling when the window is narrower
  // than this value. Prevents content from being crushed on tiny windows.
  minWidth: 0.0,

  // ─── 🏷️ Legacy Compatibility ─────────────────────────────────────
  // Only needed when migrating from v1.x with ContainerQuery tier system.
  legacyContainerTierMapping: false,
  showDeprecationBanner: true,        // Shows debug banner when legacy = true
)

```

--------------------------------

### Live Resizing with Direct Subscription

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Subscribe directly to resize events by accessing context.responsiveData within the build method for immediate UI updates.

```dart
@override
Widget build(BuildContext context) {
  context.responsiveData;  // 👈 Subscribe to resize events
  return Scaffold(/* ... */);
}
```

--------------------------------

### Apply Standard Build Settings

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/windows/runner/CMakeLists.txt

Applies a standard set of build settings to the application target. This can be customized for applications with different build requirements.

```cmake
apply_standard_settings(${BINARY_NAME})
```

--------------------------------

### ResponsiveNavigation API

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Configuration options for the ResponsiveNavigation widget, allowing for customizable navigation layouts with headers, footers, and nested navigation support.

```APIDOC
## ResponsiveNavigation API Reference

### Parameters

#### Main Parameters

- `destinations` (List<NavDestination>) - Required - Navigation items.
- `selectedIndex` (int) - Required - The index of the currently selected item.
- `onChanged` (ValueChanged<int>) - Required - Callback when the selection changes.
- `body` (Widget) - Required - The main content widget.

#### Optional Parameters

- `bottomNavBuilder` (BottomNavBuilder?) - Optional - Builder for a fully custom bottom navigation UI. Defaults to null.
- `sidebarHeader` (Widget?) - Optional - Widget to display at the top of the sidebar. Defaults to null.
- `sidebarFooter` (Widget?) - Optional - Widget to display at the bottom of the sidebar. Defaults to null.
- `drawerWidth` (double) - Optional - Width of the sidebar. Defaults to 280.0.
- `railExtended` (bool) - Optional - If true, the rail navigation shows labels inline. Defaults to false.
- `showLabels` (bool) - Optional - If true, shows labels for rail navigation. Defaults to true.
- `elevation` (double) - Optional - The elevation of the surface. Defaults to 0.0.
- `railBreakpoint` (ScreenType) - Optional - The screen type at which the bottom navigation switches to a rail. Defaults to `mobile`.
- `sidebarBreakpoint` (ScreenType) - Optional - The screen type at which the rail navigation switches to a sidebar. Defaults to `smallDesktop`.
- `backgroundColor` (Color?) - Optional - The background color of the navigation. Defaults to theme's background color.
- `selectedColor` (Color?) - Optional - The color of the selected navigation item. Defaults to theme's primary color.

### NavDestination Properties

- `icon` (IconData) - Required - The icon for the navigation destination.
- `label` (String) - Required - The text label for the destination.
- `selectedIcon` (IconData?) - Optional - An alternative icon to display when the destination is selected. Defaults to null.
- `badge` (int?) - Optional - A badge count to display on the destination, shown as a chip. Defaults to null.
- `showInSidebar` (bool) - Optional - Determines if the destination should be visible in the sidebar. Defaults to true.
```

--------------------------------

### Use Scalify UI Extensions

Source: https://github.com/alaa989/flutter_scalify/blob/main/QUICK_START.md

Apply smart extensions for text size, padding, width, height, and border radius to create responsive UI elements. These extensions leverage the configuration set in ScalifyProvider.

```dart
// Text automatically scales because of the theme, 
// but you can override it specifically if needed:
Text(
  "Hello World",
  style: TextStyle(fontSize: 24.fz, fontWeight: FontWeight.bold),
)

Container(
  padding: 16.p,        // Padding
  width: 200.w,         // Scaled Width
  height: 100.h,        // Scaled Height
  decoration: BoxDecoration(
    borderRadius: 12.br, // Scaled Radius
  ),
)

```

--------------------------------

### Executable Output Directory

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/linux/CMakeLists.txt

Configures the runtime output directory for the executable to a specific subdirectory. This is done to ensure the executable launches correctly with its associated resources.

```cmake
# Only the install-generated bundle's copy of the executable will launch
# correctly, since the resources must in the right relative locations. To avoid
# people trying to run the unbundled copy, put it in a subdirectory instead of
# the default top-level location.
set_target_properties(${BINARY_NAME}
  PROPERTIES
  RUNTIME_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/intermediates_do_not_run"
)
```

--------------------------------

### Recommended: Builder Pattern with ScalifyProvider

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Use this pattern by placing ScalifyProvider above MaterialApp for optimal performance, preventing unnecessary rebuilds when screen size changes. Ensure ScalifyConfig is set with your design dimensions.

```dart
import 'package:flutter/material.dart';
import 'package:flutter_scalify/flutter_scalify.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ScalifyProvider(
      config: const ScalifyConfig(
        designWidth: 375,    // Your Figma/XD design width
        designHeight: 812,   // Your Figma/XD design height
      ),
      builder: (context, child) => MaterialApp(
        theme: ThemeData.light().scale(context), // 🎨 Auto-scale theme
        home: child,
      ),
      child: const HomeScreen(),
    );
  }
}
```

--------------------------------

### Percentage Scaling Extensions

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Allows scaling dimensions as a percentage of screen width or height. Use `.pw` for percentage width and `.hp` for percentage height.

```dart
50.pw
25.hp
```

--------------------------------

### Migration: Context API for const Widgets

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Use the Builder widget with context.sp() for responsive text scaling within const widget trees to ensure updates. Direct usage in const trees may not update.

```diff
- // Won't update in const trees
- Text("Hi", style: TextStyle(fontSize: 16.fz))

+ // Always updates via context
+ Builder(
+   builder: (context) => Text(
+     "Hi",
+     style: TextStyle(fontSize: context.sp(16)),
+   ),
+ )
```

--------------------------------

### ResponsiveImage with Placeholder and Auto-Optimization

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Use ResponsiveImage to display images that adapt to screen size. Set autoOptimize to true to decode images at their display size, saving memory. A placeholder and error widget can be provided for loading and error states.

```dart
ResponsiveImage(
  mobile: NetworkImage('https://example.com/sm.jpg'),
  desktop: NetworkImage('https://example.com/lg.jpg'),
  autoOptimize: true,  // Decodes at display size to save memory
  width: 300.w,
  height: 200.s,
  placeholder: Center(child: CircularProgressIndicator()),
  errorWidget: Icon(Icons.broken_image),
)
```

--------------------------------

### Scalable Spacing Usage

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Demonstrates how to use scalable spacing extensions for `Column` and `Container` widgets. Spacing values are automatically scaled.

```dart
Column(
  children: [
    Text('Title', style: TextStyle(fontSize: 24.fz)),
    Spacing.sm.gap,         // SizedBox(height: 8 * scaleFactor)
    Text('Subtitle'),
    Spacing.md.gap,         // SizedBox(height: 16 * scaleFactor)
    Text('Body text'),
  ],
)

Container(
  padding: Spacing.lg.insets,    // EdgeInsets.all(24 * scaleFactor)
  margin: Spacing.sm.insetsH,   // EdgeInsets.symmetric(horizontal: 8.s)
  child: Content(),
)
```

--------------------------------

### Running Flutter Tests

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Execute all comprehensive tests for the Scalify package using the flutter test command. This command verifies all widgets, extensions, and edge cases.

```bash
flutter test --reporter compact
# 00:04 +312: All tests passed!
```

--------------------------------

### Create Flutter Wrapper Application Library

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/windows/flutter/CMakeLists.txt

Builds a static library for the Flutter C++ wrapper intended for the application runner. It links against the Flutter library and sets include directories.

```cmake
add_library(flutter_wrapper_app STATIC
  ${CPP_WRAPPER_SOURCES_CORE}
  ${CPP_WRAPPER_SOURCES_APP}
)
apply_standard_settings(flutter_wrapper_app)
target_link_libraries(flutter_wrapper_app PUBLIC flutter)
target_include_directories(flutter_wrapper_app PUBLIC
  "${WRAPPER_ROOT}/include"
)
add_dependencies(flutter_wrapper_app flutter_assemble)
```

--------------------------------

### Set Include Directories

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/linux/runner/CMakeLists.txt

Specifies the include directories for the application target, allowing source files to find header files.

```cmake
target_include_directories(${BINARY_NAME} PRIVATE "${CMAKE_SOURCE_DIR}")
```

--------------------------------

### ResponsiveWrap API

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

API reference for the ResponsiveWrap widget, which arranges children horizontally and wraps them to the next line automatically.

```APIDOC
## ResponsiveWrap API Reference

### Parameters

- `children` (List<Widget>) - Required - The list of widgets to be laid out.
- `spacing` (double) - Optional - The horizontal gap between children. Auto-scaled. Defaults to 8.0.
- `runSpacing` (double) - Optional - The vertical gap between lines of wrapped children. Defaults to 8.0.
- `alignment` (WrapAlignment) - Optional - The alignment of children along the main axis. Defaults to `WrapAlignment.start`.
- `crossAxisAlignment` (WrapCrossAlignment) - Optional - The alignment of children along the cross axis. Defaults to `WrapCrossAlignment.center`.
- `scaleSpacing` (bool) - Optional - If true, spacing is scaled using `.s`. Defaults to true.
- `padding` (EdgeInsetsGeometry?) - Optional - Padding around the outside of the widget. Defaults to null.
```

--------------------------------

### Flutter and System Dependencies

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/linux/CMakeLists.txt

Includes the Flutter managed directory and checks for GTK+ 3.0 system dependencies using PkgConfig.

```cmake
# Flutter library and tool build rules.
set(FLUTTER_MANAGED_DIR "${CMAKE_CURRENT_SOURCE_DIR}/flutter")
add_subdirectory(${FLUTTER_MANAGED_DIR})

# System-level dependencies.
find_package(PkgConfig REQUIRED)
pkg_check_modules(GTK REQUIRED IMPORTED_TARGET gtk+-3.0)

# Application build; see runner/CMakeLists.txt.
add_subdirectory("runner")

# Run the Flutter tool portions of the build. This must not be removed.
add_dependencies(${BINARY_NAME} flutter_assemble)
```

--------------------------------

### ScalifySliverAppBar API

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

A responsive SliverAppBar with per-screen expanded heights.

```APIDOC
## ScalifySliverAppBar

### Description
A responsive `SliverAppBar` with per-screen expanded heights.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **title** (String) - Required - Title text
- **mobileExpandedHeight** (double) - Optional - Height on mobile (Default: `200.0`)
- **tabletExpandedHeight** (double?) - Optional - Height on tablet (Default: `null`)
- **desktopExpandedHeight** (double?) - Optional - Height on desktop (Default: `null`)
- **flexibleBackground** (Widget?) - Optional - Background widget (Default: `null`)
- **pinned** (bool) - Optional - Stay visible on scroll (Default: `true`)
- **floating** (bool) - Optional - Show on scroll up (Default: `false`)
- **stretch** (bool) - Optional - Stretch on over-scroll (Default: `true`)

### Request Example
```dart
CustomScrollView(
  slivers: [
    ScalifySliverAppBar(
      title: 'My Store',
      mobileExpandedHeight: 200,
      desktopExpandedHeight: 350,
      flexibleBackground: Image.asset('assets/banner.jpg', fit: BoxFit.cover),
      pinned: true,
    ),
    // ... more slivers
  ],
)
```

### Response
None
```

--------------------------------

### Context API for Const Widgets

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Provides a context-based API for responsive scaling when widgets are inside a `const` tree and cannot use global extensions.

```dart
context.w(100)
context.h(50)
context.r(12)
context.sp(16)
context.fz(18)
context.iz(24)
context.s(10)
context.pw(50)
context.hp(25)
```

--------------------------------

### Flutter Integration

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/windows/CMakeLists.txt

Includes the Flutter managed directory and generated plugin CMake files to integrate Flutter into the native build.

```cmake
set(FLUTTER_MANAGED_DIR "${CMAKE_CURRENT_SOURCE_DIR}/flutter")
add_subdirectory(${FLUTTER_MANAGED_DIR})
```

```cmake
include(flutter/generated_plugins.cmake)
```

--------------------------------

### Profile Build Mode Settings

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/windows/CMakeLists.txt

Configures linker and compiler flags for the Profile build mode, typically by copying settings from the Release mode.

```cmake
set(CMAKE_EXE_LINKER_FLAGS_PROFILE "${CMAKE_EXE_LINKER_FLAGS_RELEASE}")
set(CMAKE_SHARED_LINKER_FLAGS_PROFILE "${CMAKE_SHARED_LINKER_FLAGS_RELEASE}")
set(CMAKE_C_FLAGS_PROFILE "${CMAKE_C_FLAGS_RELEASE}")
set(CMAKE_CXX_FLAGS_PROFILE "${CMAKE_CXX_FLAGS_RELEASE}")
```

--------------------------------

### Build Configuration for Multi-Config Generators

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/windows/CMakeLists.txt

Defines the available build configurations (Debug, Profile, Release) for multi-configuration generators like Visual Studio.

```cmake
get_property(IS_MULTICONFIG GLOBAL PROPERTY GENERATOR_IS_MULTI_CONFIG)
if(IS_MULTICONFIG)
  set(CMAKE_CONFIGURATION_TYPES "Debug;Profile;Release"
    CACHE STRING "" FORCE)
else()
  if(NOT CMAKE_BUILD_TYPE AND NOT CMAKE_CONFIGURATION_TYPES)
    set(CMAKE_BUILD_TYPE "Debug" CACHE
      STRING "Flutter build mode" FORCE)
    set_property(CACHE CMAKE_BUILD_TYPE PROPERTY STRINGS
      "Debug" "Profile" "Release")
  endif()
endif()
```

--------------------------------

### Create Flutter Wrapper Plugin Library

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/windows/flutter/CMakeLists.txt

Builds a static library for the Flutter C++ wrapper intended for plugins. It applies standard settings, sets position-independent code, and links against the Flutter library.

```cmake
add_library(flutter_wrapper_plugin STATIC
  ${CPP_WRAPPER_SOURCES_CORE}
  ${CPP_WRAPPER_SOURCES_PLUGIN}
)
apply_standard_settings(flutter_wrapper_plugin)
set_target_properties(flutter_wrapper_plugin PROPERTIES
  POSITION_INDEPENDENT_CODE ON)
set_target_properties(flutter_wrapper_plugin PROPERTIES
  CXX_VISIBILITY_PRESET hidden)
target_link_libraries(flutter_wrapper_plugin PUBLIC flutter)
target_include_directories(flutter_wrapper_plugin PUBLIC
  "${WRAPPER_ROOT}/include"
)
add_dependencies(flutter_wrapper_plugin flutter_assemble)
```

--------------------------------

### New: Theme Scaling

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Apply responsive scaling to your MaterialApp's ThemeData by using the .scale() extension method, passing the current context.

```dart
MaterialApp(
  theme: ThemeData.light().scale(context),
)
```

--------------------------------

### Nested Providers with observeMetrics: false

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

When nesting ScalifyProvider, set `observeMetrics: false` on the inner provider to prevent double debouncing and ensure synchronous updates for 60fps performance during window resizing.

```dart
ScalifyProvider(
  config: sectionConfig,
  observeMetrics: false, // ⚡️ Disables internal resize listener
  child: SectionContent(),
)
```

--------------------------------

### Unicode Support

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/windows/CMakeLists.txt

Enables Unicode support for all projects by defining specific preprocessor macros.

```cmake
add_definitions(-DUNICODE -D_UNICODE)
```

--------------------------------

### Flutter Tool Backend Custom Command

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/windows/flutter/CMakeLists.txt

Configures a custom command to run the Flutter tool backend. This command is designed to execute every time by using a phony output file, ensuring up-to-date artifact generation.

```cmake
set(PHONY_OUTPUT "${CMAKE_CURRENT_BINARY_DIR}/_phony_")
set_source_files_properties("${PHONY_OUTPUT}" PROPERTIES SYMBOLIC TRUE)
add_custom_command(
  OUTPUT ${FLUTTER_LIBRARY} ${FLUTTER_LIBRARY_HEADERS}
    ${CPP_WRAPPER_SOURCES_CORE} ${CPP_WRAPPER_SOURCES_PLUGIN}
    ${CPP_WRAPPER_SOURCES_APP}
    ${PHONY_OUTPUT}
  COMMAND ${CMAKE_COMMAND} -E env
    ${FLUTTER_TOOL_ENVIRONMENT}
    "${FLUTTER_ROOT}/packages/flutter_tools/bin/tool_backend.bat"
      ${FLUTTER_TARGET_PLATFORM} $<CONFIG>
  VERBATIM
)
```

--------------------------------

### ResponsiveWrap for Auto-Wrapping Layout

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Use ResponsiveWrap to create a horizontal layout that automatically wraps items to the next line when space is insufficient. Ideal for displaying chips, tags, or button groups that need to adapt to available width.

```dart
ResponsiveWrap(
  spacing: 12,
  runSpacing: 8,
  children: [
    FilterChip(label: Text('All')),
    FilterChip(label: Text('Clothes')),
    FilterChip(label: Text('Electronics')),
    FilterChip(label: Text('Shoes')),
    FilterChip(label: Text('Books')),
  ],
)
```

--------------------------------

### Include Generated Plugins

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/linux/CMakeLists.txt

Includes the CMake file that manages the build rules for generated plugins, ensuring they are correctly integrated into the application.

```cmake
# Generated plugin build rules, which manage building the plugins and adding
# them to the application.
include(flutter/generated_plugins.cmake)
```

--------------------------------

### Configure Flutter Library Headers

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/windows/flutter/CMakeLists.txt

Appends and transforms paths for Flutter library header files. Ensures all headers are correctly prefixed with the ephemeral directory.

```cmake
list(APPEND FLUTTER_LIBRARY_HEADERS
  "flutter_export.h"
  "flutter_windows.h"
  "flutter_messenger.h"
  "flutter_plugin_registrar.h"
  "flutter_texture_registrar.h"
)
list(TRANSFORM FLUTTER_LIBRARY_HEADERS PREPEND "${EPHEMERAL_DIR}/")
```

--------------------------------

### Correct Spacing for Buttons and Inputs

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Illustrates the correct usage of `.s` for height in buttons and input fields to maintain proportionality across different screen sizes, avoiding text overflow.

```dart
// ❌ Wrong — height shrinks on wide screens
SizedBox(height: 48.h, child: ElevatedButton(...))

// ✅ Correct — stays proportional everywhere
SizedBox(height: 48.s, child: ElevatedButton(...))
```

--------------------------------

### Alternative: Child Pattern with ScalifyProvider

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

This alternative pattern places ScalifyProvider inside MaterialApp. It is less performant as changes in window size might rebuild MaterialApp.

```dart
MaterialApp(
  builder: (context, child) {
    return ScalifyProvider(
      config: const ScalifyConfig(designWidth: 375, designHeight: 812),
      child: child ?? const SizedBox(),
    );
  },
  home: const HomeScreen(),
);
```

--------------------------------

### Responsive Size Extensions

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Scales dimensions based on screen width, height, or a general scaling factor. Use `.w` for width, `.h` for height, and `.s` for general scaling.

```dart
100.w
50.h
20.s
16.fz
24.iz
12.r
10.si
16.sc
16.ui
```

--------------------------------

### Flutter Tool Backend Custom Command

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/linux/flutter/CMakeLists.txt

Configures a custom command to run the Flutter tool backend script for generating build artifacts like the Flutter library and headers. It uses a phony target to ensure execution on every build.

```cmake
add_custom_command(
  OUTPUT ${FLUTTER_LIBRARY} ${FLUTTER_LIBRARY_HEADERS}
    ${CMAKE_CURRENT_BINARY_DIR}/_phony_
  COMMAND ${CMAKE_COMMAND} -E env
    ${FLUTTER_TOOL_ENVIRONMENT}
    "${FLUTTER_ROOT}/packages/flutter_tools/bin/tool_backend.sh"
      ${FLUTTER_TARGET_PLATFORM} ${CMAKE_BUILD_TYPE}
  VERBATIM
)
add_custom_target(flutter_assemble DEPENDS
  "${FLUTTER_LIBRARY}"
  ${FLUTTER_LIBRARY_HEADERS}
)
```

--------------------------------

### ResponsiveConstraints API

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Applies different BoxConstraints based on screen type for precise control over min/max dimensions per device.

```APIDOC
## ResponsiveConstraints

### Description
Applies different `BoxConstraints` based on screen type — precise control over min/max dimensions per device.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **mobile** (BoxConstraints) - Required - Constraints for mobile
- **tablet** (BoxConstraints?) - Optional - Constraints for tablet
- **desktop** (BoxConstraints?) - Optional - Constraints for desktop
- **alignment** (AlignmentGeometry?) - Optional - Align constrained child
- **scaleConstraints** (bool) - Optional - Scale values by `scaleFactor` (Default: `false`)

### Request Example
```dart
ResponsiveConstraints(
  mobile: BoxConstraints(maxWidth: 350, minHeight: 100),
  tablet: BoxConstraints(maxWidth: 500, minHeight: 120),
  desktop: BoxConstraints(maxWidth: 800, minHeight: 150),
  child: ProductCard(),
)
```

### Response
None
```

--------------------------------

### Independent Section Scaling with ScalifySection

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Employ ScalifySection to create independent scaling contexts for UI parts, ideal for split-screen layouts. Use context-based extensions within ScalifySection for accurate local scaling.

```dart
Row(
  children: [
    SizedBox(
      width: 300,
      child: ScalifySection(child: Sidebar()),
    ),
    Expanded(
      child: ScalifySection(child: MainContent()),
    ),
  ],
)
```

```dart
class MasterDetailLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.sizeOf(context).width;

    if (width < 900) {
      return Scaffold(
        body: MainPages(),
        bottomNavigationBar: BottomNav(),
      );
    }

    return Row(
      children: [
        SizedBox(
          width: 300,
          child: ScalifySection(child: Sidebar()),
        ),
        Expanded(
          child: ScalifySection(child: MainPages()),
        ),
      ],
    );
  }
}
```

--------------------------------

### List Shorthand for Symmetric and FromLTRB Padding

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Enables creating EdgeInsets using a list of values for symmetric or left-right-top-bottom padding.

```dart
[20, 10].p      // EdgeInsets.symmetric(horizontal: 20.w, vertical: 10.h)
[10, 5, 10, 5].p // EdgeInsets.fromLTRB(10.w, 5.h, 10.w, 5.h)
```

--------------------------------

### ResponsiveTable Basic Usage

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Implement ResponsiveTable for adaptive data display. It renders as a DataTable on larger screens and a card list on mobile. Specify columns and rows, and optionally hide columns on mobile.

```dart
ResponsiveTable(
  columns: ['Name', 'Price', 'Status', 'Date'],
  rows: [
    ['iPhone 15', '
$999', 'Available', '2024-01-15'],
    ['MacBook Pro', '
$1999', 'Sold Out', '2024-02-20'],
    ['AirPods', '
$249', 'Available', '2024-03-10'],
  ],
  hiddenColumnsOnMobile: [3],  // Hide 'Date' on mobile
)
```

--------------------------------

### ResponsiveText Basic Usage

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Display text that automatically adjusts its font size to fit available space. This basic usage sets the text and its style.

```dart
ResponsiveText(
  'Welcome to our Amazing Application',
  style: TextStyle(fontSize: 18.fz),
  maxLines: 2,
)
```

--------------------------------

### ResponsiveBuilder for Direct Data Access

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Access responsive data like screen type and width directly within your widget tree using ResponsiveBuilder. This allows for fine-grained control based on current responsive metrics.

```dart
ResponsiveBuilder(
  builder: (context, data) {
    return Text("Screen: ${data.screenType} — ${data.width.toInt()}px");
  },
)
```

--------------------------------

### Local Scaling with ScalifyBox

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Use ScalifyBox to scale elements relative to a specific container's dimensions. Configure reference width, height, and fit mode. The builder provides local scaling extensions for width, height, padding, border radius, and font size.

```dart
ScalifyBox(
  referenceWidth: 320,
  referenceHeight: 200,
  fit: ScalifyFit.contain,
    builder: (context, ls) {
    return Container(
      width: ls.w(300),
      height: ls.h(180),
      padding: ls.p(20),
      decoration: BoxDecoration(
        borderRadius: ls.br(12),
      ),
      child: Column(
        children: [
          Text("VISA", style: TextStyle(fontSize: ls.fz(18))),
          ls.sbh(10),
        ],
      ),
    );
  },
)
```

--------------------------------

### ResponsiveImage API

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

API reference for the ResponsiveImage widget, which displays different image sources based on the screen type.

```APIDOC
## ResponsiveImage API Reference

### Parameters

- `mobile` (ImageProvider) - Required - The image provider for mobile screen sizes.
- `tablet` (ImageProvider) - Required - The image provider for tablet screen sizes.
- `desktop` (ImageProvider) - Required - The image provider for desktop screen sizes.
- `fit` (BoxFit?) - Optional - How the image should be inscribed into the box. Defaults to null.
- `height` (double?) - Optional - The height of the image. Defaults to null.
- `borderRadius` (BorderRadius?) - Optional - The border radius for the image. Defaults to null.
```

--------------------------------

### SizedBox Spacing Extensions

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Provides shorthand extensions for creating SizedBox widgets with responsive spacing. Use `.sbh` for height, `.sbw` for width, and combined extensions for both.

```dart
20.sbh
10.sbw
20.sbhw(width: 10)
10.sbwh(height: 20)
```

--------------------------------

### Link Dependency Libraries

Source: https://github.com/alaa989/flutter_scalify/blob/main/example/linux/runner/CMakeLists.txt

Links the necessary libraries to the application target. Includes the Flutter engine library and GTK for graphical interface support.

```cmake
target_link_libraries(${BINARY_NAME} PRIVATE flutter)
target_link_libraries(${BINARY_NAME} PRIVATE PkgConfig::GTK)
```

--------------------------------

### Scalify Debug Overlay Usage

Source: https://github.com/alaa989/flutter_scalify/blob/main/README.md

Integrates the `ScalifyDebugOverlay` into a Flutter app using `ScalifyProvider`. This overlay shows live responsive metrics with zero overhead in release builds.

```dart
ScalifyProvider(
  builder: (context, child) => MaterialApp(
    home: ScalifyDebugOverlay(
      child: child!,
    ),
  ),
  child: const HomeScreen(),
)
```

--------------------------------

### Import Flutter Scalify Package

Source: https://github.com/alaa989/flutter_scalify/blob/main/QUICK_START.md

Import the necessary package into your Dart file to use its functionalities.

```dart
import 'package:flutter_scalify/flutter_scalify.dart';

```