fabrik_theme

fabrik_theme provides a consistent design system — typography, color tokens, spacing, border radii, and MaterialApp theming — so you maintain visual consistency across your entire Flutter app without reinventing the wheel.

Installation

Add the package to your pubspec.yaml:

dependencies:
  fabrik_theme: ^1.0.2

Then run:

flutter pub get

Import it in your Dart files:

import 'package:fabrik_theme/fabrik_theme.dart';

Getting Started

Apply the Fabrik theme in MaterialApp:

MaterialApp(
  themeMode: ThemeMode.system,
  theme: FabrikThemeBuilder.light(),
  darkTheme: FabrikThemeBuilder.dark(),
  home: const HomePage(),
);

Both light() and dark() accept optional fontFamily and colors parameters:

final colors = FabrikColors.custom(
  lightPrimary: Colors.indigo,
  darkPrimary: Colors.indigoAccent,
);

MaterialApp(
  themeMode: ThemeMode.system,
  theme: FabrikThemeBuilder.light(fontFamily: 'Inter', colors: colors),
  darkTheme: FabrikThemeBuilder.dark(fontFamily: 'Inter', colors: colors),
  home: const HomePage(),
);

Accessing the Theme

Use FabrikTheme.of(context) anywhere in the widget tree:

final theme = FabrikTheme.of(context);

Text(
  'Hello, Fabrik',
  style: theme.typography.bodyLarge.copyWith(
    color: theme.colors.primary,
  ),
),

Typography

FabrikTheme.of(context).typography exposes the full type scale:

Token	Usage
`displayLarge`	Hero headlines
`displayMedium`	Section headings
`displaySmall`	Sub-headings
`headlineLarge`	Page titles
`headlineMedium`	Card titles
`headlineSmall`	Minor headings
`titleLarge`	App bar titles
`titleMedium`	List item titles
`titleSmall`	Supporting labels
`bodyLarge`	Primary body copy
`bodyMedium`	Default body text
`bodySmall`	Captions, helper text
`labelLarge`	Button labels
`labelMedium`	Tab labels
`labelSmall`	Overlines, tags

Colors

FabrikTheme.of(context).colors gives you access to the semantic color tokens:

theme.colors.primary     // brand primary
theme.colors.secondary   // brand secondary
theme.colors.background  // page background
theme.colors.surface     // card / sheet surface
theme.colors.error       // error state
theme.colors.onPrimary   // text/icons on primary color

Use FabrikColors.custom(...) to override defaults for both light and dark modes.

Spacing Tokens

Static design tokens for consistent padding and gaps:

FabrikSpacing.x1   // 4px
FabrikSpacing.x2   // 8px
FabrikSpacing.x3   // 12px
FabrikSpacing.x4   // 16px
FabrikSpacing.x5   // 20px
FabrikSpacing.x6   // 24px
FabrikSpacing.x8   // 32px
FabrikSpacing.x10  // 40px
FabrikSpacing.x12  // 48px

Radius Tokens

FabrikRadius.r1    // 4px
FabrikRadius.r2    // 8px
FabrikRadius.r3    // 12px
FabrikRadius.r4    // 16px
FabrikRadius.r5    // 20px
FabrikRadius.r6    // 24px
FabrikRadius.full  // circular / pill