Flexi UI 🚀 #

A High-Performance, Type-Safe Flutter Responsive & Adaptive UI Framework

Flexi UI is a production-ready Flutter responsive framework for building scalable, adaptive apps across mobile, tablet, and desktop.
It combines fluid scaling, breakpoint-based layouts, design tokens, and a granular performance model powered by InheritedModel.

✨ Why Flexi UI? #

Most responsive solutions only scale sizes. Flexi UI provides a complete adaptive system:

✔ Screen-based scaling
✔ Parent-based component scaling
✔ Discrete breakpoint logic
✔ Fluid multi-stage interpolation
✔ Responsive design tokens (spacing, typography, icons)
✔ Built-in accessibility & motion helpers
✔ Granular rebuild performance

📚 Table of Contents #

• Getting Started
• API Quick Reference
• Scaling System
• Component-Level Responsiveness
• Layout & Adaptive Components
• Design Tokens
• Motion & Accessibility
• Breakpoints & Device Model
• Configuration
• Best Practices
• Performance Model
• Troubleshooting
• Debug Overlay
• Example App
• Support

🚀 Getting Started #

1️⃣ Install #

dependencies:
  flexi_ui: ^1.2.1

2️⃣ Wrap Your App #

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

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

  @override
  Widget build(BuildContext context) {
    return FlexiConfig(
      designMinWidth: 360,
      designMaxWidth: 1440,
      showDebugOverlay: true,
      child: const MaterialApp(home: DashboardScreen()),
    );
  }
}

3️⃣ Use Anywhere #

@override
Widget build(BuildContext context) {
  final flexi = context.flexi;

  return Scaffold(
    appBar: AppBar(title: Text(flexi.breakpoint.name)),
    body: flexi.isDesktop ? DesktopLayout() : MobileLayout(),
  );
}

🧾 API Quick Reference #

Extensions on num #

• .w(context) — % of screen width
• .h(context) — % of screen height
• .rw(context) — responsive width
• .rh(context) — responsive height
• .fw(context) — parent-based width
• .fh(context) — parent-based height
• .aw(max, context) — fluid width interpolation
• .ah(max, context) — fluid height interpolation
• .fr(context) — fluid radius scaling
• .fStroke(context) — dampened border scaling
• .fs(context) — safe uniform scaling
• Tuple2(a, b).d(context) — diagonal scaling

Helpers #

• FlexiFluid3 — tiered fluid scaling
• BreakpointValue<T> — discrete breakpoint values
• context.flexi — semantic responsive helper

📐 Scaling System #

🖥 Screen-Based Scaling #

🌊 Fluid Interpolation #

fontSize: 18.aw(32, context)

🎚 Tiered Scaling #

const FlexiFluid3(mobile: 14, tablet: 16, desktop: 20).resolve(context);

🎛 Visual Scaling #

🧱 Component-Level Responsiveness #

ResponsiveCard(
  targetWidth: 300,
  targetHeight: 400,
  child: Padding(
    padding: EdgeInsets.all(16.fw(context)),
  ),
)

FlexiCircle #

FlexiCircle(size: 48, child: Icon(Icons.person))

🧩 Layout & Adaptive Components #

• FlexiLayout — breakpoint-based layouts
• FlexiAdaptiveNav — adaptive navigation
• FlexiGrid — responsive grid
• FlexiMaxWidth — max-width constraint
• FlexiVisibility — breakpoint visibility

🎨 Design Tokens #

Typography #

FlexiTextStyles.h1(context)

Spacing #

FlexiSpacing.m(context)

Icons #

FlexiIconSize.m(context)

🎞 Motion & Accessibility #

Motion #

FlexiMotion.durationMedium(context)

Accessibility #

• FlexiMinTapTarget
• FlexiTextClamp

📊 Breakpoints #

⚙ Configuration #

FlexiConfig(
  designMinWidth: 360,
  designMaxWidth: 1440,
  mobilePortraitBreakpoint: 600,
  tabletLandscapeBreakpoint: 1100,
  spacing: FlexiSpacingConfig.defaultConfig,
  typography: FlexiTypographyConfig.defaultConfig,
  icons: FlexiIconConfig.defaultConfig,
)

Advanced Flags #

✅ Best Practices #

• Use context.flexi.breakpoint for layout switching
• Prefer design tokens over hardcoded sizes
• Use .fs() for circles/icons
• Keep allowImplicitRebuilds disabled

⚡ Performance Model #

Flexi UI uses InheritedModel aspect scoping for minimal rebuilds.
You get performance benefits automatically.

❗ Troubleshooting #

FlexiConfig not found → Wrap your app root with FlexiConfig.
Circles distorted → Use .fs(context).
Unbounded constraints → Use FlexiMaxWidth or constrained parent.

🔍 Debug Overlay #

FlexiConfig(showDebugOverlay: true)

Shows screen metrics & breakpoints in debug mode.

📱 Example App #

See /example for dashboard, grids, forms, and scaling showcase.

🤝 Support & Contributions #

• Issues: https://github.com/akshaySavanoor/flutter_flexi/issues
• PRs welcome

Made with ❤️ for the Flutter community