💎 Stylix UI #

Stylix UI is a beautiful, highly-opinionated, and highly-scalable design system for Flutter. It brings together expertly crafted color palettes (brands), pixel-perfect spacing, modern typography, elevation shadows, layout gaps, and fully pre-built component styles (Buttons & Cards).

Say goodbye to manually tweaking padding and hunting for hex codes. Stylix acts as the unified design language for your entire application.

✨ Features #

• 18 Premium Brand Presets: Instantly switch your entire app's look and feel with one line of code.
• Dynamic Light/Dark Modes: Automatically adapts your brand tokens to perfectly balanced light and dark schemes.
• Semantic Tokens via Context: Access colors contextually with context.stylixColors.background instead of messy raw colors.
• Unified Spacing & Gaps: No more magic numbers. Use StylixSpacing.md and StylixGap.hXl for consistent layouts.
• Pre-built Component Styles: Instantly style Buttons and Cards with StylixButtonStyles and StylixCardStyles.
• 40+ Premium Gradients: Access beautifully crafted linear gradients for hero sections, cards, and backgrounds via StylixGradients.
• Premium Typography: Integrates seamlessly with GoogleFonts (Barlow Condensed for English, Cairo for Arabic).

🚀 Getting Started #

1. Add Dependency #

Add stylix_ui to your pubspec.yaml:

dependencies:
  stylix_ui: ^1.0.3

2. Initialize the Theme #

Wrap your MaterialApp with StylixTheme.light and StylixTheme.dark.

import 'package:flutter/material.dart';
import 'package:stylix_ui/stylix_ui.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    // 1. Pick one of the 18 gorgeous built-in brands!
    const brand = StylixBrand.jadeCanopy;

    return MaterialApp(
      title: 'Stylix Demo',
      themeMode: ThemeMode.system,
      // 2. Inject Stylix into ThemeData
      theme: StylixTheme.light(brand, locale: const Locale('en', 'US')),
      darkTheme: StylixTheme.dark(brand, locale: const Locale('en', 'US')),
      home: const HomePage(),
    );
  }
}

🎨 Core Systems & Code Examples #

1. Colors & Semantic Tokens #

Access your theme's semantic colors from anywhere using the context.stylixColors extension. This ensures your app perfectly adapts to light/dark modes automatically.

Container(
  // Use semantic colors!
  color: context.stylixColors.surfaceContainer,
  child: Text(
    'Hello World',
    style: TextStyle(
      color: context.stylixColors.primary,
    ),
  ),
)

2. The 18 Brand Presets #

Stylix comes with 18 professionally designed brand palettes. You can access them via the StylixBrand enum. If you need a readable string for the UI (like a settings dropdown), just use .displayName!

final currentBrand = StylixBrand.neonVelvet;
print(currentBrand.displayName); // "Neon Velvet"

Available Brands:

3. Spacing & Gaps (StylixSpacing / StylixGap) #

Stop hardcoding 16.0 and 8.0. Use the standardized semantic spacing scale.

Available Spacing Values (StylixSpacing): none, xxs, xs, sm, md, lg, xl, xxl, xxxl, huge

Available Gaps (StylixGap):

• Horizontal: wNone, wXxs, wXs, wSm, wMd, wLg, wXl, wXxl, wXxxl
• Vertical: hNone, hXxs, hXs, hSm, hMd, hLg, hXl, hXxl, hXxxl

Convenience Padding (StylixInsets): screenPadding, cardPadding, dialogPadding, buttonPadding, chipPadding, inputContentPadding

// ❌ Bad: Magic Numbers
Padding(
  padding: EdgeInsets.all(16.0),
  child: Column(
    children: [
      Text('Title'),
      SizedBox(height: 24.0),
      Text('Subtitle'),
    ]
  )
)

// ✅ Good: Stylix Semantic Spacing
Padding(
  padding: EdgeInsets.all(StylixSpacing.lg),
  child: Column(
    children: [
      Text('Title'),
      StylixGap.hXl, // Automatically creates a SizedBox with height 24.0
      Text('Subtitle'),
    ]
  )
)

(Note: StylixSpacing.none and StylixGap.hNone / wNone are also available for 0.0 spacing!)

4. Borders & Radius (StylixRadius & StylixCorners) #

Achieve consistent roundness across your entire app using explicit doubles (StylixRadius) or pre-built BorderRadius objects (StylixCorners).

Available Radius Tokens: none, xs, sm, md, lg, xl, xxl, pill

Container(
  decoration: BoxDecoration(
    color: context.stylixColors.card,
    // Use pre-built BorderRadius objects!
    borderRadius: StylixCorners.md, 
  ),
)

5. Elevation & Shadows (StylixShadows) #

Beautiful, buttery-smooth shadows that look modern, unlike the default harsh Material shadows.

Container(
  decoration: BoxDecoration(
    color: context.stylixColors.surface,
    boxShadow: StylixShadows.lg(context.stylixColors), // Perfectly tuned shadow
  ),
)

6. Component Styles (StylixButtonStyles & StylixCardStyles) #

Stylix provides static helpers that instantly generate complex ButtonStyle and BoxDecoration objects so you don't have to write boilerplate.

Buttons:

ElevatedButton(
  // Instantly applies the primary brand color, correct padding, and hover states!
  style: StylixButtonStyles.primary(context.stylixColors, Theme.of(context).textTheme),
  onPressed: () {},
  child: const Text('Primary Action'),
)

OutlinedButton(
  style: StylixButtonStyles.outline(context.stylixColors, Theme.of(context).textTheme),
  onPressed: () {},
  child: const Text('Secondary Action'),
)

Cards:

Container(
  padding: StylixCardStyles.padding, // Standardized 16.0 padding
  decoration: StylixCardStyles.surface(context.stylixColors), // Standard background + border + shadow
  child: const Text('I am a card!'),
)

7. Gradients (StylixGradients & StylixGradient) #

Need a beautiful background for a splash screen, onboarding, or a premium card? Stylix includes over 40 hand-crafted gradients.

Container(
  decoration: BoxDecoration(
    // Access a specific gradient by ID or list
    gradient: StylixGradients.all.first.gradient,
  ),
)

🛠 Example App #

Want to see all these tokens, brands, and components in action? Check out the example/ folder! It includes a full DesignSystemPreviewPage that allows you to hot-swap between all 18 brands and instantly see how the spacing, colors, and typography react.