flutter_artist_styles 2.1.1

A modular and foundational design system package providing centralized theme tokens, custom typography, and color systems.

flutter_artist_styles

The core styling system for the FlutterArtist ecosystem. This package provides an enterprise-grade, strict architectural solution for Design Token Management without incurring circular dependency issues.

LIVE DEMO

Download Demo Source Code

---

 Visual Debugging Tools & Code Generation

To unlock the interactive visual tools shown above, you can install the optional developer companion package flutter_artist_styles_inspector.

Add it to your environment via pub.dev/packages/flutter_artist_styles_inspector:

• FaColors Inspector: Allows you to visually scan, debug, and trace active token branches directly within your application runtime layout layer.
• FaColors Code Generator: Instantly automates and mirrors full multi-theme translation code graphs, speeding up compile pipelines across your workspace ecosystem.

🎨 Interactive Previews

Core Action Token Mechanics

Discover how token graphs fluidly map interactions without static context breaks.

---

Automatic Token Code Generation

The official FlutterArtist Code Generator rendering full cross-theme translation graphs instantly.

---

🚀 Key Architectural Concepts (faColors)

Rather than relying on brittle, floating Color variables, faColors builds a structured Color Graph directly into the Flutter infrastructure through a localized BuildContext graph extension (context.faColors).

Core Principles

• Strict Component Mapping
  Sub-divided into semantic layout namespaces:

  • ink
  • action
  • surface
  • input
  • divider

• Zero Circular Dependencies
  Separates the visual execution layer from high-level widgets, enabling components to remain uncoupled from hardcoded color instances.

• Safe Pairings Enforcement
  Built-in pairing guarantees between active surface backgrounds (fill) and content typography/icons (ink).

---

🛠 Basic Structural Rules

When constructing dynamic action structures (such as custom Buttons, Chips, or Interactive Overlays), strictly enforce the following context layouts:

1. Creating Interactive Elements

• Always map target components through:

  context.faColors.action.xxx
  

2. Standard Color Group Pairing

• Solid backgrounds using:

  context.faColors.action.fill.primary
  

• Must exclusively pair text/icons with:

  context.faColors.action.ink.onPrimaryFill
  

3. Reverse Color Group Pairing

• Outlined or secondary layouts using:

  context.faColors.action.fill.reversePrimary
  

• Must always map content text/icons with:

  context.faColors.action.ink.primary
  

4. Action Borders & Outlines

• Define boundaries via:

  context.faColors.action.stroke.xxx
  

---

📖 Complete Usage Examples

Here are two complete production-grade examples demonstrating how to properly map tokens to prevent layout decoupling.

---

Example 1: Standard Elevated Action Button

Perfect for core primary application touchpoints, ensuring proper contrast parameters.

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

class FaPrimaryButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;

  const FaPrimaryButton({
    super.key,
    required this.text,
    required this.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    // Standard pairing:
    // fill.primary paired with ink.onPrimaryFill
    final backgroundColor =
        context.faColors.action.fill.primary;

    final contentColor =
        context.faColors.action.ink.onPrimaryFill;

    return GestureDetector(
      onTap: onPressed,
      child: Container(
        padding: const EdgeInsets.symmetric(
          horizontal: 24.0,
          vertical: 12.0,
        ),
        decoration: BoxDecoration(
          color: backgroundColor,
          borderRadius: BorderRadius.circular(8.0),
          boxShadow: [
            BoxShadow(
              color: context.faColors.common.black
                  .withValues(alpha: 0.05),
              blurRadius: 4,
              offset: const Offset(0, 2),
            ),
          ],
        ),
        child: Text(
          text,
          style: TextStyle(
            color: contentColor,
            fontWeight: FontWeight.bold,
            fontSize: 16.0,
          ),
        ),
      ),
    );
  }
}

Example 2: Reverse Outlined Action Chip

Ideal for filter tags, alternative choices, or sub-navigation items requiring structured strokes.

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

class FaFilterChip extends StatelessWidget {
  final String label;
  final bool isSelected;
  final VoidCallback onTap;

  const FaFilterChip({
    super.key,
    required this.label,
    required this.isSelected,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    // Reverse pairing:
    // fill.reversePrimary paired with ink.primary
    final backgroundColor = isSelected
        ? context.faColors.action.fill.reversePrimary
        : context.faColors.common.transparent;

    final textColor =
        context.faColors.action.ink.primary;

    final borderColor =
        context.faColors.action.stroke.enabled;

    return GestureDetector(
      onTap: onTap,
      child: Container(
        padding: const EdgeInsets.symmetric(
          horizontal: 16.0,
          vertical: 8.0,
        ),
        decoration: BoxDecoration(
          color: backgroundColor,
          borderRadius: BorderRadius.circular(20.0),
          border: Border.all(
            color: borderColor,
            width: 1.0,
          ),
        ),
        child: Text(
          label,
          style: TextStyle(
            color: textColor,
            fontWeight: FontWeight.w500,
            fontSize: 14.0,
          ),
        ),
      ),
    );
  }
}