core/responsive library Core Layout Responsive

Flutstrap Responsive System

Provides comprehensive responsive design utilities that work with Flutstrap's breakpoint system to create adaptive layouts that respond to different screen sizes.

Key Features:

  • Mobile-First Approach: Responsive values fall back to smaller breakpoints first
  • Performance Optimized: LRU caching and efficient algorithms
  • Type-Safe: Comprehensive generic support for all value types
  • Developer Friendly: Intuitive API with extensive helper methods
  • Production Ready: Error handling, validation, and performance monitoring

Usage Examples:

// Responsive value selection
final padding = FSResponsive.of(MediaQuery.of(context).size.width).value<double>(
  xs: 16.0,    // Mobile
  sm: 20.0,    // Small tablet
  md: 24.0,    // Tablet
  lg: 32.0,    // Desktop
  fallback: 24.0,
);

// Conditional rendering
FSResponsive.layoutBuilder(
  context,
  builder: (responsive) {
    return responsive.show(
      child: FloatingActionButton(onPressed: () {}),
      showOnXs: false, // Hide FAB on mobile
      showOnSm: false, // Hide FAB on small tablets
    );
  },
)

// Responsive widget building
responsive.builder(
  builder: (breakpoint) {
    switch (breakpoint) {
      case FSBreakpoint.xs:
        return MobileLayout();
      case FSBreakpoint.sm:
      case FSBreakpoint.md:
        return TabletLayout();
      default:
        return DesktopLayout();
    }
  },
)

// Using responsive value container
static const responsivePadding = FSResponsiveValue<double>(
  xs: 16.0,
  sm: 20.0,
  md: 24.0,
  lg: 32.0,
  xl: 40.0,
  xxl: 48.0,
);

final padding = responsivePadding.value(responsive.breakpoint);

Performance Features

  • LRU Caching: Efficient breakpoint caching with least-recently-used eviction
  • Compile-time Optimization: Const breakpoint configurations for better performance
  • Efficient Algorithms: Optimized value resolution with mobile-first priority
  • Memory Management: Automatic cache cleanup and size limits
  • Performance Monitoring: Built-in cache statistics and hit rate tracking

Performance Tips:

  • Use const FSResponsiveValue for static responsive values
  • Cache responsive instances in stateful widgets when possible
  • Use LayoutBuilder for automatic responsive updates
  • Monitor cache hit rates for optimization opportunities

Classes

FSResponsive
Responsive utility class that provides methods for responsive design with performance optimizations and comprehensive breakpoint handling.
FSResponsiveValue<T>
Responsive value container that automatically updates with screen size

Extensions

FSResponsiveContextExtensions on BuildContext
Extension methods for BuildContext for easier responsive access
FSResponsiveExtensions on FSBreakpoint
Extension methods for FSBreakpoint enum