Mix

https://www.fluttermix.com/documentation
Admin
Mix is a utility-first, type-safe styling system for Flutter that separates style definitions from...
Tokens:32,852
Snippets:214
Trust Score:6.2
Update:10 months ago
Show doc for...
Tokens:
Raw
### Install Mix Package

Source: https://www.fluttermix.com/documentation/overview/getting-started

Add the Mix package to your Flutter project using the flutter pub add command. This is the first step to integrate Mix styling into your application.

```bash
flutter pub add mix
```

--------------------------------

### Create First Mix Widget (Flutter)

Source: https://www.fluttermix.com/documentation/overview/getting-started

Demonstrates how to create a basic Flutter widget using Mix. It shows the creation of a styled card using BoxStyler and StyledText, including properties like height, width, color, border radius, and border.

```dart
import 'package:flutter/material.dart';
import 'package:mix/mix.dart';

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

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

  @override
  Widget build(BuildContext context) {
    final cardStyle = BoxStyler()
        .height(100)
        .width(240)
        .color(Colors.blue)
        .borderRounded(12)
        .borderAll(color: Colors.black, width: 1, style: BorderStyle.solid);

    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Box(
            style: cardStyle,
            child: StyledText(
              'Hello Mix',
              style: TextStyler().color(Colors.white).fontSize(18),
            ),
          ),
        ),
      ),
    );
  }
}

```

--------------------------------

### Reuse Mix Styles (Flutter)

Source: https://www.fluttermix.com/documentation/overview/getting-started

Illustrates how to extract and reuse Mix styles across different widgets. This example shows defining a primary card style and then applying it, with modifications, to multiple Box widgets.

```dart
final primaryCard = BoxStyler()
  .color(Colors.blue)
  .borderRounded(12);

final box = Box(style: primaryCard, child: StyledText('Primary'));

final box2 = Box(
  style: primaryCard.color(Colors.green),
  child: StyledText('Success'),
);

```

--------------------------------

### Import Mix Package

Source: https://www.fluttermix.com/documentation/overview/getting-started

Import the Mix package into your Dart files where you intend to use its styling functionalities. This makes the Mix features available for your widgets.

```dart
import 'package:mix/mix.dart';
```

--------------------------------

### Update pubspec.yaml with Mix Dependency

Source: https://www.fluttermix.com/documentation/tutorials/creating-a-widget

Example of how the 'pubspec.yaml' file should look after adding the 'mix' package. This ensures the 'mix' package is available for use in your Flutter application.

```yaml
dependencies:
  flutter:
    sdk: flutter
  mix: ^1.0.0
```

--------------------------------

### Flutter Button Examples using Mix

Source: https://www.fluttermix.com/documentation/tutorials/creating-a-widget

This Flutter code defines a screen that displays various types of buttons (Filled, Outlined, ElevatedButton, LinkButton) using the Mix library. It demonstrates how to style these buttons, including handling their disabled states, and sets up the main application structure.

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: ButtonExampleScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final icon = Icons.favorite;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Button Examples'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            FilledButton(  // Assuming FilledButton is a custom widget defined elsewhere that uses Mix
              label: 'Filled Button',
              icon: icon,
              onPressed: () {},
            ),
            const SizedBox(height: 10),
            OutlinedButton( // Assuming OutlinedButton is a custom widget defined elsewhere that uses Mix
              label: 'Outlined Button',
              icon: icon,
              onPressed: () {},
            ),
            const SizedBox(height: 10),
            ElevatedButton( // Assuming ElevatedButton is a custom widget defined elsewhere that uses Mix
              label: 'Elevated Button',
              icon: icon,
              onPressed: () {},
            ),
            const SizedBox(height: 10),
            LinkButton( // Assuming LinkButton is a custom widget defined elsewhere that uses Mix
              label: 'Link Button',
              icon: icon,
              onPressed: () {},
            ),
            const SizedBox(height: 20),
            const Text(
              'Disabled State:',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 10),
            FilledButton(
              label: 'Disabled Button',
              icon: icon,
              disabled: true,
              onPressed: () {},
            ),
          ],
        ),
      ),
    );
  }
}
```

--------------------------------

### Dart: Applying Theming with MixThemeData

Source: https://www.fluttermix.com/documentation/overview/migration

Demonstrates how to define and apply custom theme data using MixThemeData in Flutter. It shows how to reference color tokens and apply them to widgets like Box. This feature improves API usability for theming.

```dart
const primaryColor = ColorToken('primary');
final theme = MixThemeData(
  colors: {
    primaryColor: Colors.blue,
  },
);

// ... body method ...
MixTheme(
  data: theme,
  Box(
    key: key,
    style: Style(
      $box.color.ref(primaryColor),
    ),
  )
)
```

--------------------------------

### StackBox Widget Usage with Styling

Source: https://www.fluttermix.com/documentation/widgets/stack

Demonstrates how to use the StackBox widget with the StackBoxStyler API to apply padding, decoration, and alignment. This example showcases creating a stacked layout with an icon and a positioned text element, styled using the Mix framework.

```dart
final style = StackBoxStyler()
 .padding(EdgeInsets.all(16))
 .decoration(
 BoxDecoration(
 color: Colors.white,
 borderRadius: BorderRadius.circular(12),
 ),
 )
 .alignment(Alignment.center);

StackBox(
 children: [
 Icon(Icons.star, size: 48),
 Positioned(
 right: 0,
 bottom: 0,
 child: Text('Badge'),
 ),
 ],
 style: style,
)
```

--------------------------------

### Complete Example: Custom Context Variant with Inherited Widget

Source: https://www.fluttermix.com/documentation/tutorials/creating-context-variants

This is a full, runnable example demonstrating the creation and usage of a custom context variant in Flutter Mix. It includes the `CustomInheritedWidget`, a `BoxStyler` with a variant that changes color based on the inherited widget's flag, and a `StatelessWidget` (`Example`) that utilizes these components. The `Example` widget wraps its child with `CustomInheritedWidget` to provide the context.

```dart
import 'package:flutter/material.dart';
import 'package:mix/mix.dart';

class CustomInheritedWidget extends InheritedWidget {
  final bool flag;

  const CustomInheritedWidget({
    super.key,
    required this.flag,
    required super.child,
  });

  static CustomInheritedWidget? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<CustomInheritedWidget>();
  }

  @override
  bool updateShouldNotify(covariant CustomInheritedWidget oldWidget) {
    return flag != oldWidget.flag;
  }
}

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

  BoxStyler get box =>
      BoxStyler()
          .color(Colors.red)
          .size(100, 100)
          .variant(
            ContextVariant('custom_flag', (context) {
              final flag = CustomInheritedWidget.of(context)?.flag ?? false;
              return flag;
            }),
            BoxStyler().color(Colors.blue),
          );

  @override
  Widget build(BuildContext context) {
    return CustomInheritedWidget(flag: true, child: box());
  }
}
```

--------------------------------

### Flutter Custom Widget Styling Without Mix

Source: https://www.fluttermix.com/documentation/overview/comparison

Illustrates styling a custom widget in Flutter without using the Mix library. This example highlights the verbosity and complexity involved in managing styles, hover states, and animations using traditional Flutter widgets and state management. It requires core Flutter packages.

```dart
class CustomWidget extends StatefulWidget {
  const CustomWidget({
    Key? key,
  }) : super(key: key);
 
  @override
  _CustomWidgetState createState() => _CustomWidgetState();
}
 
class _CustomWidgetState extends State<CustomWidget> {
  bool _isHover = false;
 
  final _curve = Curves.linear;
  final _duration = 100.ms;
 
  @override
  Widget build(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;
    final backgroundColor = isDark ? Colors.cyan : Colors.blue;
    final textColor = isDark ? Colors.black : Colors.white;
    final borderRadius = BorderRadius.circular(10);
 
    final onHoverTextColor =
        isDark ? textColor.lighten(20) : textColor.darken(20);
 
    final onHoverBgColor =
        isDark ? backgroundColor.lighten(20) : backgroundColor.darken(30);
 
    return MouseRegion(
      onEnter: (event) {
        setState(() => _isHover = true);
      },
      onExit: (event) {
        setState(() => _isHover = false);
      },
      child: Material(
        elevation: _isHover ? 2 : 9,
        borderRadius: borderRadius,
        child: AnimatedScale(
          scale: _isHover ? 1.5 : 1,
          curve: _curve,
          duration: _duration,
          child: AnimatedContainer(
            curve: _curve,
            duration: _duration,
            height: 120,
            width: 120,
            padding:
                _isHover ? const EdgeInsets.all(10) : const EdgeInsets.all(20),
            decoration: BoxDecoration(
              color: _isHover ? onHoverBgColor : backgroundColor,
              borderRadius: borderRadius,
            ),
            child: AnimatedAlign(
              alignment: _isHover ? Alignment.topLeft : Alignment.center,
              curve: _curve,
              duration: _duration,
              child: Text(
                'Custom Widget',
                style: Theme.of(context)
                    .textTheme
                    .labelLarge
                    ?.copyWith(color: _isHover ? onHoverTextColor : textColor),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
```

--------------------------------

### Create Styled Box with BoxStyler - Dart

Source: https://www.fluttermix.com/documentation/widgets/box

Demonstrates how to create a styled Box widget using the BoxStyler fluent API. This example shows setting width, height, color, rounded borders, and padding. The Box widget takes the generated style and a child widget.

```dart
final style = BoxStyler()
 .width(200)
 .height(100)
 .color(Colors.blue)
 .borderRounded(12)
 .padding(16);

Box(style: style, child: Text('Hello Mix'))
```

--------------------------------

### Compose Styles with Variants

Source: https://www.fluttermix.com/documentation/guides/dynamic-styling

This example shows how to compose styles where variants can be reused and modified. `styleB` inherits from `styleA` and overrides the hover color while maintaining other properties, illustrating Mix's style composition capabilities.

```dart
final styleA = BoxStyler()
  .color(Colors.red)
  .height(100)
  .width(100)
  .borderRounded(10)
  .onHovered(
    BoxStyler()
      .color(Colors.blue)
      .width(200)
  );

final styleB = styleA.onHovered(BoxStyler().color(Colors.green));

// Final style when hovered:
// BoxStyler()
//   .color(Colors.green)
//   .height(100)
//   .width(200)
//   .borderRounded(10);
```

--------------------------------

### Using $on and $with Namespaces in Mix

Source: https://www.fluttermix.com/documentation/overview/migration

This snippet demonstrates the usage of the new $on and $with namespaces in the Mix package. The $on namespace is used to apply styles based on interaction states like hover and press, while $with is used for applying visual modifiers such as scale and opacity. These are applied within the Style constructor of a PressableBox widget.

```dart
PressableBox(
  onPress: () {},
  style: Style(
    $box.width(200),
    $box.height(200),
    $box.color.blue(),

    $with.scale(2), // <-- Modifier
    $with.opacity(0.5),
    
    $on.hover( // <-- ContextVariant
      $box.color.red(),
    ),
    $on.press(
      $box.color.green(),
    ),
  ),
  child: Box(),
)

```

--------------------------------

### Dynamic Styling with Hover and Dark Mode Variants (Dart)

Source: https://www.fluttermix.com/documentation/overview/introduction

This example illustrates Mix's dynamic styling capabilities, allowing styles to change based on widget states and context. It defines a button style that changes color when hovered or when in dark mode, showcasing the use of .onHovered() and .onDark() modifiers for responsive UI.

```dart
final buttonStyle = BoxStyler()
    .height(50)
    .borderRounded(25)
    .color(Colors.blue)
    .onHovered(BoxStyler().color(Colors.blue.shade700))
    .onDark(BoxStyler().color(Colors.blue.shade200));
```

--------------------------------

### Using StyleBuilder for Widget Styling (Flutter)

Source: https://www.fluttermix.com/documentation/tutorials/controlling-widget-state

Provides an example of using StyleBuilder to construct styled widgets with Mix. It takes a style definition and a controller to resolve the appropriate style properties based on the widget's current state. The resolved spec is then passed to a builder function to render the widget.

```dart
StyleBuilder(
  style: style,
  controller: controller,
  builder: (context, spec) {
    return Box(styleSpec: StyleSpec(spec: spec));
  },
)
```

--------------------------------

### Building Styles with BoxStyler in Dart

Source: https://www.fluttermix.com/documentation/overview/utility-first

Demonstrates creating a style configuration using the BoxStyler API in Dart. It shows how to chain methods like width, paddingAll, alignment, and color to build a style object step-by-step, following the builder design pattern.

```dart
final boxStyle = BoxStyler()
  .width(100)
  .paddingAll(10)
  .alignment(Alignment.center)
  .color(Colors.red);
```

--------------------------------

### Basic Box Styling with Mix

Source: https://www.fluttermix.com/documentation/guides/styling

Demonstrates creating a basic BoxStyler with properties like width, height, color, and border radius. This showcases the fluent API for declarative style building.

```dart
final style = BoxStyler()
  .width(240)
  .height(100)
  .color(Colors.blue)
  .borderRounded(12);
```

--------------------------------

### Disabled Pressable Widget Example

Source: https://www.fluttermix.com/documentation/widgets/pressable

Shows how to disable user interaction with the Pressable widget by setting its `enabled` property to false. Disabled widgets do not respond to press events.

```dart
Pressable(
  enabled: false,
  onPress: () => print('This won\'t be called'),
  child: StyledText('Disabled Button'),
);
```

--------------------------------

### Apply Hover Style to Box

Source: https://www.fluttermix.com/documentation/guides/dynamic-styling

This example demonstrates how to apply a style variant when a widget is hovered. Mix automatically merges the variant style with the base style, reducing verbosity. It uses BoxStyler and the .onHovered() method.

```dart
final style = BoxStyler()
  .color(Colors.red)
  .height(100)
  .width(100)
  .borderRounded(10)
  .onHovered(BoxStyler().color(Colors.blue));
```

--------------------------------

### Define Box and Text Styles with Styler API (Dart)

Source: https://www.fluttermix.com/documentation/overview/introduction

This snippet demonstrates defining basic box and text styles using Mix's fluent Styler API. It shows how to chain methods to set properties like height, width, color, border radius, font size, and font weight. This approach enhances readability and maintainability for styling definitions.

```dart
final boxStyle = BoxStyler()
    .height(100)
    .width(100)
    .color(Colors.purple)
    .borderRounded(10);

final textStyle = TextStyler()
    .fontSize(20)
    .fontWeight(FontWeight.bold)
    .color(Colors.black);
```

--------------------------------

### Creating Custom Styler Helpers in Dart

Source: https://www.fluttermix.com/documentation/overview/utility-first

Demonstrates two methods for creating reusable style helpers in Dart using BoxStyler: defining standalone helper functions and using extension methods. This allows for shorthand creation of common style patterns like custom borders.

```dart
// Custom helper for border top styling
BoxStyler borderTop(Color color) => BoxStyler().borderTop(color: color);
 
// Use the helper
borderTop(Colors.red);
 
// Extension method
extension on BoxStyler {
  BoxStyler borderRedTop() => borderTop(color: Colors.red);
}
 
// Use the extension method
BoxStyler().borderRedTop();
```

--------------------------------

### Nesting Variants for Combined States

Source: https://www.fluttermix.com/documentation/guides/dynamic-styling

This example illustrates nesting variants to apply styles based on multiple conditions, such as hover state combined with dark/light mode. It uses .onHovered(), .onDark(), and .onLight() for complex conditional styling.

```dart
final hoverStyle = BoxStyler()
  .onDark(BoxStyler().color(Colors.blue))
  .onLight(BoxStyler().color(Colors.green));

final style = BoxStyler()
  .color(Colors.red)
  .height(100)
  .width(100)
  .borderRounded(10)
  .onHovered(hoverStyle);
```

--------------------------------

### Flutter Custom Widget Styling with Mix

Source: https://www.fluttermix.com/documentation/overview/comparison

Demonstrates styling a custom widget using the Mix library in Flutter. It showcases defining custom text and box styles, including hover effects and animations, with a focus on readability and conciseness. Dependencies include the Mix package.

```dart
class CustomMixWidget extends StatelessWidget {
  const CustomMixWidget({super.key});
 
  TextStyler get customTextStyle {
    return TextStyler()
        .fontSize(16)
        .fontWeight(.w600)
        .color(Colors.white)
        .animate(.easeInOut(100.ms))
        .onDark(TextStyler().color(Colors.black))
        .onHovered(
          TextStyler()
              .animate(.easeInOut(100.ms))
              .onLight(TextStyler().color(Colors.white)),
        );
  }
 
  BoxStyler get customBoxStyle {
    return BoxStyler()
        .height(120)
        .width(120)
        .paddingAll(20)
        .elevation(.nine)
        .alignment(.center)
        .borderRounded(10)
        .color(Colors.blue)
        .scale(1.0)
        .animate(.easeInOut(100.ms))
        .onDark(BoxStyler().color(Colors.cyan))
        .onHovered(
          BoxStyler()
              .alignment(.topLeft)
              .elevation(.two)
              .paddingAll(10)
              .scale(1.5)
              .animate(.easeInOut(100.ms))
              .onLight(BoxStyler().color(Colors.blue.shade300)),
        );
  }
 
  @override
  Widget build(BuildContext context) {
    return Pressable(
      onPress: () {},
      child: Box(
        style: customBoxStyle,
        child: StyledText('Custom Widget', style: customTextStyle),
      ),
    );
  }
}
```

--------------------------------

### Pressable and PressableBox Interaction Handling

Source: https://www.fluttermix.com/documentation/widgets/stylewidgets

Covers the Pressable and PressableBox widgets, which enhance Flutter's GestureDetector, MouseRegion, and Focus widgets with improved interaction state management and styling. Examples show how to handle press, long press, and focus changes.

```dart
Pressable(
  onPress: () => print('Pressed'),
  onLongPress: () => print('Long pressed'),
  onFocusChange: (focused) => print('Focus: $focused'),
  autofocus: true,
  child: StyledText('Interactive Button'),
);
```

```dart
PressableBox(
  style: BoxStyler()
    .color(Colors.blue)
    .paddingAll(16)
    .borderRounded(8),
  onPress: () => print('PressableBox pressed'),
  child: StyledText('Styled Button'),
);
```

--------------------------------

### Apply Custom Token Value to BoxStyler Padding

Source: https://www.fluttermix.com/documentation/guides/design-token

This example shows how to apply a custom design token, assumed to be defined as $spacing() which returns an EdgeInsetsGeometryRef, to the padding property of a BoxStyler. It merges the existing style with a new style created via BoxStyler.create.

```dart
final style = BoxStyler()
  .color(Colors.red)
  .size(100, 100)
  .merge(BoxStyler.create(padding: $spacing()));
```

--------------------------------

### Connecting Gestures to WidgetStatesController (Flutter)

Source: https://www.fluttermix.com/documentation/tutorials/controlling-widget-state

Illustrates how to link Flutter's GestureDetector events to update the state of a WidgetStatesController. This example shows how to manually control the 'pressed' state by setting `controller.pressed` to true or false based on tap down, tap up, and tap cancel events.

```dart
GestureDetector(
  onTapDown: (_) => controller.pressed = true,
  onTapUp: (_) => controller.pressed = false,
  onTapCancel: () => controller.pressed = false,
  child: StyleBuilder(...),
)
```

--------------------------------

### Dynamic and Context-Aware Styling with Mix

Source: https://www.fluttermix.com/documentation/guides/styling

Shows how to create dynamic styles that adapt to context using variants like hover states and dark mode. This enables responsive designs that react to user interactions and theme changes.

```dart
final button = BoxStyler()
  .color(Colors.blue)
  .onHovered(BoxStyler().color(Colors.blue.shade700))
  .onDark(BoxStyler().color(Colors.blue.shade200));
```

--------------------------------

### Style Composition and Overriding with Mix

Source: https://www.fluttermix.com/documentation/guides/styling

Illustrates how to compose styles by building new styles on top of existing ones and how later attributes override earlier ones in case of conflicts. This promotes reusability and consistency.

```dart
final base = BoxStyler()
    .paddingX(16)
    .paddingY(8)
    .borderRounded(8)
    .color(Colors.black)
    .wrapDefaultTextStyle(
      TextStyleMix()
        .color(Colors.deepOrange)
        .fontWeight(FontWeight.bold),
    );
 
final solid = base.color(Colors.blue);
 
final soft = base
    .color(Colors.blue.shade100)
    .wrapDefaultTextStyle(TextStyleMix().color(Colors.blue));
```

--------------------------------

### Using BoxStyler Alignment and Spacing Helpers in Dart

Source: https://www.fluttermix.com/documentation/overview/utility-first

Illustrates common BoxStyler usage patterns in Dart, focusing on explicit alignment and various spacing helper methods. This includes setting alignment to center-right and applying padding to all sides, horizontal/vertical, or specific sides.

```dart
// Explicit alignment
BoxStyler().alignment(Alignment.centerRight);
 
// Spacing helpers
BoxStyler().paddingAll(16); // All sides
BoxStyler().paddingX(12).paddingY(8); // Horizontal and vertical
BoxStyler().paddingOnly(horizontal: 12, vertical: 8); // Specific sides
```

--------------------------------

### Create and Apply Image Styles with ImageStyler

Source: https://www.fluttermix.com/documentation/widgets/image

Demonstrates how to create a visual style for the StyledImage widget using the ImageStyler fluent API. This includes setting dimensions, fit, color, and blend mode. The resulting style is then applied to a StyledImage instance.

```dart
final style = ImageStyler()
 .width(200)
 .height(200)
 .fit(BoxFit.cover)
 .color(Colors.blue.withOpacity(0.5))
 .colorBlendMode(BlendMode.overlay);

StyledImage(
 image: AssetImage('assets/photo.jpg'),
 style: style,
)
```

--------------------------------

### Create Responsive Variants for StyledImage

Source: https://www.fluttermix.com/documentation/widgets/image

Demonstrates how to define variants for the StyledImage widget that adapt to different contexts, such as screen orientation, device type, platform, or text direction. This enables creating responsive image layouts.

```dart
StyledImage(
 image: AssetImage('assets/responsive_image.png'),
 style: ImageStyler()
 .variant(
  ImageVariant.onLandscape,
  ImageStyler()..width(300).height(150).build()
 )
 .variant(
  ImageVariant.onPortrait,
  ImageStyler()..width(150).height(300).build()
 )
 .build(),
)
```

--------------------------------

### Define Custom Design Tokens with Dart Enums

Source: https://www.fluttermix.com/documentation/tutorials/theming

Shows how to define custom design tokens for colors, text styles, radii, and spacing using Dart enums. This approach ensures type safety, autocompletion, and a clean API for accessing tokens. It includes examples for creating ColorToken, TextStyleToken, RadiusToken, and SpaceToken.

```dart
enum CustomColorTokens {
  primary('primary'),
  onPrimary('on-primary'),
  surface('surface'),
  onSurface('on-surface'),
  onSurfaceVariant('on-surface-variant');
 
  final String name;
  const CustomColorTokens(this.name);
 
  ColorToken get token => ColorToken(name);
}
 
enum CustomTextStyleTokens {
  headline1('headline1'),
  headline2('headline2'),
  button('button'),
  body('body'),
  callout('callout');
 
  final String name;
  const CustomTextStyleTokens(this.name);
 
  TextStyleToken get token => TextStyleToken(name);
}
 
enum MyThemeRadiusToken {
  large('large'),
  medium('medium');
 
  final String name;
  const MyThemeRadiusToken(this.name);
 
  RadiusToken get token => RadiusToken(name);
}
 
enum MyThemeSpaceToken {
  medium('medium'),
  large('large');
 
  final String name;
  const MyThemeSpaceToken(this.name);
 
  SpaceToken get token => SpaceToken(name);
}

final primaryColorToken = CustomColorTokens.primary.token;
final headline1TextStyleToken = CustomTextStyleTokens.headline1.token;
```

--------------------------------

### Define ButtonSpec for Design System Button (Flutter/Dart)

Source: https://www.fluttermix.com/documentation/tutorials/creating-a-widget

Defines a `ButtonSpec` class extending Mix's `Spec<ButtonSpec>` for a design system button. It includes `StyleSpec` properties for container, icon, and label, along with `copyWith` and `lerp` methods for style management and animation.

```dart
import 'package:flutter/material.dart';
import 'package:mix/mix.dart';

class ButtonSpec extends Spec<ButtonSpec> {
  final StyleSpec<FlexBoxSpec>? container;
  final StyleSpec<IconSpec>? icon;
  final StyleSpec<TextSpec>? label;

  const ButtonSpec({this.container, this.icon, this.label});

  @override
  ButtonSpec copyWith({
    StyleSpec<FlexBoxSpec>? container,
    StyleSpec<IconSpec>? icon,
    StyleSpec<TextSpec>? label,
  }) {
    return ButtonSpec(
      container: container ?? this.container,
      icon: icon ?? this.icon,
      label: label ?? this.label,
    );
  }

  @override
  ButtonSpec lerp(covariant ButtonSpec? other, double t) {
    return ButtonSpec(
      container: container?.lerp(other?.container, t),
      icon: icon?.lerp(other?.icon, t),
      label: label?.lerp(other?.label, t),
    );
  }

  @override
  List<Object?> get props => [container, icon, label];
}
```

--------------------------------

### Wrap Root Widget with MixScope

Source: https://www.fluttermix.com/documentation/tutorials/theming

Demonstrates how to wrap the root widget of a Flutter application with MixScope to globally apply theme tokens. This involves providing token values like colors, text styles, radii, and spaces through named parameters.

```dart
class MyApp extends StatelessWidget {
  const MyApp({super.key});
 
  @override
  Widget build(BuildContext context) {
    return MixScope(
      colors: LightBlueTheme.colors,
      textStyles: LightBlueTheme.textStyles,
      radii: LightBlueTheme.radii,
      spaces: LightBlueTheme.spaces,
      child: const MaterialApp(
        home: ProfilePage(),
      ),
    );
  }
}
```

--------------------------------

### Heart Keyframe Animation in Flutter

Source: https://www.fluttermix.com/documentation/guides/animations

Demonstrates a heart icon animation using `keyframeAnimation` in Flutter. This example animates multiple properties simultaneously, including color, scale, vertical offset, vertical stretch, and angle, to create a choreographed sequence. It uses `ValueNotifier` to trigger the animation and relies on `IconStyler`, `Pressable`, `StyledIcon`, and `CupertinoIcons`.

```dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class HeartKeyframeAnimation extends StatefulWidget {
  const HeartKeyframeAnimation({super.key});

  @override
  State<HeartKeyframeAnimation> createState() => _HeartKeyframeAnimationState();
}

class _HeartKeyframeAnimationState extends State<HeartKeyframeAnimation> {
  final _trigger = ValueNotifier(0);

  @override
  Widget build(BuildContext context) {
    final style = IconStyler()
        .color(Colors.red)
        .size(80)
        .keyframeAnimation(
          trigger: _trigger,
          timeline: [
            KeyframeTrack<Color>(
              'color',
              [
                .linear(Colors.blue.shade100, 100.ms),
                .elasticOut(Colors.blue.shade400, 800.ms),
                .elasticOut(Colors.green.shade100, 800.ms),
              ],
              initial: Colors.red.shade100,
              tweenBuilder: ColorTween.new,
            ),
            KeyframeTrack<double>('scale', [
              .linear(1.0, 360.ms),
              .elasticOut(1.5, 800.ms),
              .elasticOut(1.0, 800.ms),
            ], initial: 1.0),
            KeyframeTrack<double>('verticalOffset', [
              .linear(0.0, 100.ms),
              .easeIn(20.0, 150.ms),
              .elasticOut(-60.0, 1000.ms),
              .elasticOut(0.0, 800.ms),
            ], initial: 0.0),
            KeyframeTrack<double>('verticalStretch', [
              .ease(1.0, 100.ms),
              .ease(0.6, 150.ms),
              .ease(1.5, 100.ms),
              .ease(1.05, 150.ms),
              .ease(1.0, 880.ms),
              .ease(0.8, 100.ms),
              .ease(1.04, 400.ms),
              .ease(1.0, 220.ms),
            ], initial: 1.0),
            KeyframeTrack<double>('angle', [
              .easeIn(0.0, 580.ms),
              .easeIn(16.0 * (pi / 180), 125.ms),
              .easeIn(-16.0 * (pi / 180), 125.ms),
              .easeIn(16.0 * (pi / 180), 125.ms),
              .easeIn(0.0, 125.ms),
            ], initial: 0.0),
          ],
          styleBuilder: (values, style) {
            final scale = values.get('scale');
            final verticalOffset = values.get('verticalOffset');
            final verticalStretch = values.get('verticalStretch');
            final angle = values.get('angle');

            return style.wrapTransform(
              Matrix4.identity()
                ..scaleByDouble(scale, scale, scale, 1.0)
                ..translateByDouble(0, verticalOffset, 0, 1)
                ..scaleByDouble(1, verticalStretch, 1, 1)
                ..rotateZ(angle),
            );
          },
        );
    return Pressable(
      onPress: () {
        _trigger.value++;
      },
      child: StyledIcon(icon: CupertinoIcons.heart_fill, style: style),
    );
  }
}
```

--------------------------------

### StyledText: Create and Apply Text Styles with TextStyler (Flutter)

Source: https://www.fluttermix.com/documentation/widgets/text

Demonstrates how to create a text style using the `TextStyler` fluent API and apply it to the `StyledText` widget. This style includes font size, font weight, and color. The `StyledText` widget itself takes the text content and the created style as parameters.

```dart
final style = TextStyler()
 .fontSize(24)
 .fontWeight(FontWeight.bold)
 .color(Colors.blue);

StyledText(
 'Hello Mix',
 style: style,
)
```

--------------------------------

### Basic PressableBox Widget Usage

Source: https://www.fluttermix.com/documentation/widgets/pressable

Presents the basic implementation of PressableBox, which combines Pressable functionality with Box styling. This allows for creating visually styled, pressable containers.

```dart
PressableBox(
  style: BoxStyler()
    .color(Colors.blue)
    .paddingAll(16)
    .borderRounded(8),
  onPress: () => print('PressableBox pressed'),
  child: StyledText('Styled Button'),
);
```

--------------------------------

### Implement Dynamic Theme Switching in Flutter with MixScope

Source: https://www.fluttermix.com/documentation/tutorials/theming

This code demonstrates how to implement dynamic theme switching in a Flutter application using Mix's MixScope widget. By changing the theme properties (colors, textStyles, radii, spaces) provided to MixScope, the entire application's theme can be updated dynamically. A stateful widget is used to manage the theme's state and trigger re-renders.

```dart
class ThemingTutorialApp extends StatefulWidget {
  const ThemingTutorialApp({super.key});
 
  @override
  State<ThemingTutorialApp> createState() => _ThemingTutorialAppState();
}

class _ThemingTutorialAppState extends State<ThemingTutorialApp> {
  bool _isDarkPurpleTheme = false;

  @override
  Widget build(BuildContext context) {
    // Select theme based on state
    final colors = _isDarkPurpleTheme 
        ? DarkPurpleTheme.colors 
        : LightBlueTheme.colors;
    final textStyles = _isDarkPurpleTheme
        ? DarkPurpleTheme.textStyles
        : LightBlueTheme.textStyles;
    final radii = _isDarkPurpleTheme 
        ? DarkPurpleTheme.radii 
        : LightBlueTheme.radii;
    final spaces = _isDarkPurpleTheme 
        ? DarkPurpleTheme.spaces 
        : LightBlueTheme.spaces;

    return MixScope(
      colors: colors,
      textStyles: textStyles,
      radii: radii,
      spaces: spaces,
      child: const ProfilePage(),
    );
  }
}
```

--------------------------------

### Basic StyledIcon Usage with IconStyler

Source: https://www.fluttermix.com/documentation/widgets/icon

Demonstrates how to use the `IconStyler` to define a style for the `StyledIcon` widget. This approach allows for fluent chaining of style properties like size and color. The `StyledIcon` then applies this defined style to a standard Flutter icon.

```dart
final style = IconStyler()
 .size(32)
 .color(Colors.blue);

StyledIcon(
 Icons.favorite,
 style: style,
)
```

--------------------------------

### Basic Pressable Widget Usage

Source: https://www.fluttermix.com/documentation/widgets/pressable

Demonstrates the fundamental usage of the Pressable widget, which is a versatile component for handling tap gestures and providing visual feedback. It takes a child widget and an onPress callback.

```dart
Pressable(
  onPress: () => print('Pressed!'),
  child: StyledText('Press Me'),
);
```

--------------------------------

### Create Flutter Profile Page with Mix Widgets

Source: https://www.fluttermix.com/documentation/tutorials/theming

This snippet shows how to create a ProfilePage widget in Flutter using Mix's layout and styling utilities like ColumnBox and FlexBoxStyler. It also includes a reusable ImagePlaceholder component. Styling is achieved through token resolution for colors, text styles, and spacing.

```dart
class ProfilePage extends StatelessWidget {
  const ProfilePage({super.key});
 
  @override
  Widget build(BuildContext context) {
    // AppBar title styling
    final appBarTitle = TextStyler()
        .style(CustomTextStyleTokens.headline2.token.mix())
        .color(CustomColorTokens.onSurface.token());
 
    // Layout styling with FlexBoxStyler
    final flexBox = FlexBoxStyler()
        .crossAxisAlignment(.start)
        .marginAll(MyThemeSpaceToken.medium.token())
        .spacing(MyThemeSpaceToken.medium.token());
 
    return Scaffold(
      backgroundColor: CustomColorTokens.surface.token.resolve(context),
      appBar: AppBar(
        backgroundColor: CustomColorTokens.surface.token.resolve(context),
        title: appBarTitle('Profile'),
        centerTitle: false,
      ),
      body: SafeArea(
        child: ColumnBox(
          style: flexBox,
          children: [
            // Image placeholder
            ImagePlaceholder(),
            // Title
            StyledText(
              'Hollywood Academy',
              style: TextStyler()
                  .style(CustomTextStyleTokens.headline1.token.mix())
                  .color(CustomColorTokens.onSurface.token()),
            ),
            // Subtitle
            StyledText(
              'Education · Los Angeles, California',
              style: TextStyler()
                  .style(CustomTextStyleTokens.callout.token.mix())
                  .color(CustomColorTokens.onSurfaceVariant.token()),
            ),
            // Description
            StyledText(
              'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
              style: TextStyler()
                  .style(CustomTextStyleTokens.body.token.mix())
                  .color(CustomColorTokens.onSurfaceVariant.token()),
            ),
            const Spacer(),
            // Button
            const ProfileButton(label: 'Add to your contacts'),
          ],
        ),
      ),
    );
  }
}
 
class ImagePlaceholder extends StatelessWidget {
  const ImagePlaceholder({super.key});
 
  @override
  Widget build(BuildContext context) {
    final imageContainer = BoxStyler()
        .height(200)
        .width(double.infinity)
        .color(CustomColorTokens.primary.token())
        .borderRadiusAll(MyThemeRadiusToken.medium.token());
 
    final icon = IconStyler()
        .size(80)
        .color(CustomColorTokens.onPrimary.token());
 
    return imageContainer(child: icon(icon: Icons.image));
  }
}
```

--------------------------------

### Decoration API

Source: https://www.fluttermix.com/documentation/widgets/box

This section details the various methods available for applying decorations to widgets, such as colors, gradients, shadows, images, and shapes.

```APIDOC
## Decoration API

### Description
Methods for applying various visual decorations to widgets.

### Methods

*   **`color`**: Sets background color.
*   **`gradient`**: Sets gradient with any GradientMix type.
*   **`shadow`**: Sets a single shadow.
*   **`shadows`**: Sets multiple shadows.
*   **`elevation`**: Sets elevation shadow.
*   **`image`**: Sets image decoration.
*   **`shape`**: Sets box shape.
*   **`shapeCircle`**: Sets a circular shape (CircleBorder).
*   **`shapeStadium`**: Sets a stadium shape (StadiumBorder).
*   **`shapeRoundedRectangle`**: Sets a rounded rectangle shape (RoundedRectangleBorder).
*   **`shapeBeveledRectangle`**: Sets a beveled rectangle shape (BeveledRectangleBorder).
*   **`shapeContinuousRectangle`**: Sets a continuous rectangle shape (ContinuousRectangleBorder).
*   **`shapeStar`**: Sets a star shape (StarBorder).
*   **`shapeLinear`**: Sets a linear border shape (LinearBorder).
*   **`shapeSuperellipse`**: Sets a superellipse shape (RoundedSuperellipseBorder).
*   **`backgroundImage`**: Sets a background image from an ImageProvider.
*   **`backgroundImageUrl`**: Sets a background image from a network URL.
*   **`backgroundImageAsset`**: Sets a background image from an asset path.
*   **`foregroundLinearGradient`**: Sets a foreground linear gradient.
*   **`foregroundRadialGradient`**: Sets a foreground radial gradient.
*   **`foregroundSweepGradient`**: Sets a foreground sweep gradient.
*   **`linearGradient`**: Sets a background linear gradient.
*   **`radialGradient`**: Sets a background radial gradient.
*   **`sweepGradient`**: Sets a background sweep gradient.
```

--------------------------------

### Create Convenience Widgets for Button Variants in Flutter

Source: https://www.fluttermix.com/documentation/tutorials/creating-a-widget

These classes extend `CustomButton` to provide convenient widgets for specific button variants like Filled, Outlined, Elevated, and Link. Each widget pre-configures the `variant` property, simplifying button instantiation.

```dart
final class FilledButton extends CustomButton {
  const FilledButton({
    super.key,
    required super.label,
    super.disabled = false,
    super.icon,
    required super.onPressed,
    super.style,
  }) : super(variant: ButtonVariant.filled);
}
 
final class OutlinedButton extends CustomButton {
  const OutlinedButton({
    super.key,
    required super.label,
    super.disabled = false,
    super.icon,
    required super.onPressed,
    super.style,
  }) : super(variant: ButtonVariant.outlined);
}
 
final class ElevatedButton extends CustomButton {
  const ElevatedButton({
    super.key,
    required super.label,
    super.disabled = false,
    super.icon,
    required super.onPressed,
    super.style,
  }) : super(variant: ButtonVariant.elevated);
}
 
final class LinkButton extends CustomButton {
  const LinkButton({
    super.key,
    required super.label,
    super.disabled = false,
    super.icon,
    required super.onPressed,
    super.style,
  }) : super(variant: ButtonVariant.link);
}
```
Tokens:
Raw