dynamic_layouts 0.2.2

A lightweight, dependency-free Flutter package for adaptive UI rendering across mobile, tablet, and desktop screens.

dynamic_layouts

[Dynamic Layouts Hero]

A lightweight, dependency-free Flutter package for building fluid, heavily responsive, adaptive UI rendering across mobile, tablet, and desktop screens natively.

Built on a modern, strictly reactive InheritedWidget architecture (AdaptiveScope), it efficiently responds to window resizing, layout transitions, safe-area, and orientation constraints natively.

---

📱 Adaptive Demos

Experience how the package handles layout shifts from mobile to desktop seamlessly.

Mobile Experience	Tablet & Desktop Experience
[Mobile Demo]	[Desktop Demo]
Bottom Navigation & List Layout	Navigation Rail & Grid Layout

---

⚡ Setup & Architecture

1. Initialize AdaptiveScope

Inject AdaptiveScope at the application root passing a continuous ScreenConfig.watch(context).

Important

This creates a unified configuration reacting to MediaQuery bounds across the entire Flutter ecosystem natively.

import 'package:dynamic_layouts/dynamic_layouts.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AdaptiveScope(
      config: ScreenConfig.watch(
        context, 
        designWidth: 375, // Your figma/design base width
        designHeight: 812 // Your figma/design base height
      ),
      child: MaterialApp(
        builder: (context, child) => AdaptiveDebugOverlay(child: child!),
        home: HomeScreen(),
      ),
    );
  }
}

2. Contextual Dimensional Scaling

Safely extract responsive bounds tailored downwards into the tree. Your fonts, padding, and alignments automatically morph based on constraints.

Container(
  // Scales 200 physical pixels natively relative to current bounding constraints
  width: context.w(200),    
  height: context.h(100),   
  padding: EdgeInsets.all(context.w(16)),
  child: Text(
    'Responsive Font',
    style: TextStyle(fontSize: context.sp(16)),  // Text scales independently
  ),
)

Tip

Global static .w, .h, .sp variables extended on num are preserved for backward compatibility if you run ScreenConfig.init() strictly.

---

🛠️ Feature & UI Components Matrix

AdaptiveValue

Avoid if/else constraint logic inside builders. Use AdaptiveValue to conditionally map configurations directly.

// Auto-resolves based on current screen boundary.
final paddingLimit = const AdaptiveValue<double>(
  mobile: 16.0,
  tablet: 32.0,
  desktop: 64.0,
).resolve(context);

AdaptiveLayout

Return entirely distinct widget blueprints depending on the bounds. Supports native fallback.

AdaptiveGrid

Automagically scale grid layout matrices utilizing AdaptiveValue. Provide a responsive crossAxisCount resolving automatically.

AdaptiveCollectionView

Dynamically shift an axis iteration rendering natively as a ListView on tight mobile bounds, but elevating to a GridView seamlessly on tablets/desktops.

AdaptiveWrap

Flipping between vertical Columns and horizontal Rows seamlessly based on a specified breakpoint target.

AdaptiveNavigationScaffold

An intelligent Scaffold that renders a native BottomNavigationBar on smaller screens, instantly snapping into a NavigationRail or native Drawer on Desktop limits.

---

⚙️ Breakpoint Architectures

Built-in tailored presets corresponding to industry tracking metrics:

BreakpointConfig.material3();
BreakpointConfig.bootstrap();
BreakpointConfig.tailwind();

License

MIT — see LICENSE