fabrik_layout

A lightweight, opinionated layout and responsiveness foundation for Flutter applications.

fabrik_layout provides a simple and predictable way to understand what kind of screen your app is running on (mobile, tablet, desktop) and optionally apply safe, global text scaling, without introducing layout widgets, UI abstractions, or performance pitfalls.

This package focuses on layout context, not UI composition.

Learn more

Detailed documentation, guides, and design rationale are available at
fabriktool.com

Overview

The goal of fabrik_layout is to make responsive decisions explicit and centralized.

It encourages:

  • Clear device categorization (mobile, tablet, desktop)
  • Layout decisions based on constraints, not platform checks
  • Optional, controlled text scaling
  • Zero global state and no widget-level calculations

The package is intentionally small and framework-aligned.

What this package provides

Layout context

A single widget, FabrikLayout, computes layout information once and exposes it via BuildContext.

if (context.layout.isTablet) {
  // Tablet-specific UI
}

Device classification

Responsive behavior is derived from width-based breakpoints:

  • Mobile
  • Tablet
  • Desktop

Defaults are provided and can be overridden if needed.

Optional text scaling

fabrik_layout can optionally apply conservative, device-aware text scaling using Flutter’s TextScaler API.

Scaling is:

  • Opt-in
  • Applied via MediaQuery
  • Fully compatible with accessibility settings

Installation

dependencies:
  fabrik_layout: ^1.0.0

Basic usage

Wrap your app once

FabrikLayout must be placed inside MaterialApp.builder or CupertinoApp.builder.

MaterialApp(
  builder: (context, child) {
    return FabrikLayout(
      enableTextScaling: true,
      child: child!,
    );
  },
  home: const HomePage(),
);

Consume layout information

if (context.layout.isMobile) {
  return const MobileView();
}

if (context.layout.isTablet) {
  return const TabletView();
}

return const DesktopView();

Use with theming

fabrik_layout works independently, but pairs naturally with fabrik_theme.

Text(
  'Dashboard',
  style: context.layout.isMobile
      ? context.typography.titleMedium
      : context.typography.titleLarge,
);

Layout controls structure.
Theme controls appearance.

Text scaling

When enabled, text scaling is applied globally via MediaQuery.

FabrikLayout(
  enableTextScaling: true,
  child: child,
);

All Text widgets automatically respect scaling.
No theme mutation or manual font size adjustments are required.

Maintainers

Libraries

fabrik_layout