Mix

https://mix-docs-gosljkd74-fluttertools.vercel.app/docs
Admin
Mix is a styling system for Flutter that enables the creation of beautiful and consistent UIs...
Tokens:52,372
Snippets:494
Trust Score:7.8
Update:10 months ago
Show doc for...
Tokens:
Raw
### Install Mix Package - Dart

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/overview/getting-started

Installs the Mix package into your Flutter project using the Dart package manager. This is the first step to using Mix for styling.

```dart
flutter pub add mix
```

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

### Mix Approach to Container Styling - Dart

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/overview/getting-started

Illustrates how to style a Box widget (equivalent to Flutter's Container) using Mix's utility-first syntax. This approach often results in more concise and readable styling code.

```dart
final style = Style(
  $box.height(100),
  $box.width(100),
  $box.margin(10, 20),
  $box.color.blue(),
  $box.borderRadius(10),
  $box.border(
    color: Colors.black,
    width: 1,
    style: BorderStyle.solid,
  ),
);
 
Box(
  style: style,
  child: Text('Hello Mix'),
);
```

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

### Traditional Flutter Container Styling - Dart

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/overview/getting-started

Demonstrates the conventional Flutter way to style a Container widget, including properties like height, width, margin, and decoration. This serves as a baseline for comparison with the Mix approach.

```dart
Container(
  height: 100,
  width: 100,
  margin: EdgeInsets.symmetric(
    vertical: 10,
    horizontal: 20,
  ),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10),
    border: Border.all(
      color: Colors.black,
      width: 1,
      style: BorderStyle.solid,
    ),
  ),
  child: Text('Hello World'),
);
```

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

### Import Mix Package - Dart

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/overview/getting-started

Imports the Mix library into your Dart files, making its styling utilities available for use. This import statement is required before using any Mix features.

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

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

### Successful Animation: Defined Start Point for Color

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/guides/animations

Shows a correctly implemented animation where the start point for the `$box.color` attribute is defined in the initial `Style` object, ensuring the animation proceeds as expected when triggered.

```dart
PressableBox(
  onPress: () => { /* Action to perform when the box is pressed. */ },
  child: Box(
    style: AnimatedStyle(
      Style(
        $box.height(50),
        $box.width(50),
        $box.color(Colors.red),
        $on.hover(
          $box.color(Colors.blue),
        ),
      ),
      duration: Durations.long1,
      curve: Curves.decelerate,
    ),
  ),
);
```

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

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

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/overview/migration

Illustrates the usage of the new '$on' and '$with' namespaces in the Mix Package for applying context variants and modifiers respectively. This example shows how to style a PressableBox based on hover and press states, and apply scale and opacity modifiers.

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

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

```

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

### Install and Configure Mix Lint in Flutter

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/tools/lint

Installs the mix_lint and custom_lint packages as development dependencies and configures the analysis_options.yaml file to enable custom linting. This setup is essential for the linter to function within your Flutter project.

```bash
flutter pub add -d mix_lint custom_lint
```

```yaml
analyzer:
  plugins:
    - custom_lint
```

```bash
flutter clean
flutter pub get
dart run custom_lint
```

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

### Animation Failure: Missing Start Point for Color

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/guides/animations

Demonstrates a scenario where an animation fails because a required start point for a style attribute (e.g., `$box.color`) is not defined in the initial `Style` object within `AnimatedStyle`.

```dart
PressableBox(
  onPress: () => { /* Intended action when the box is pressed. */ },
  child: Box(
    style: AnimatedStyle(
      Style(
        $box.height(50),
        $box.width(50),
        $on.hover(
          $box.color(Colors.blue),
        ),
      ),
      duration: Durations.long1,
      curve: Curves.decelerate,
    ),
  ),
);
```

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

### Add Mix Packages to Flutter Project

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/tutorials/creating-a-widget

Installs the 'mix' and 'mix_annotations' packages required for building design system components in Flutter. These are core dependencies for utilizing the Mix framework.

```bash
flutter pub add mix mix_annotations
```

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

### ZBox Widget Usage Example

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/stack

Demonstrates how to instantiate and use the ZBox widget. It requires a Style object for layout and visual properties, and a list of children widgets to be stacked. The Style object configures alignment, fitting, dimensions, and color.

```dart
ZBox(
  style: Style(
    $stack.alignment.bottomLeft(),
    $stack.fit.loose(),
    $box.width(300),
    $box.height(300),
    $box.color.blue(),
  ),
  children: [...],
);
```

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

### Define Basic Style with Mix

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/overview

Demonstrates how to define a basic style using the Mix `Style` class. This example shows setting properties like height, width, background color, and border radius for a box element. Dependencies include the Mix library.

```dart
final style = Style(
  $box.height(100),
  $box.width(100),
  $box.color.purple(),
  $box.borderRadius(10),
);
```

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

### Flutter StyledWidgets StyledIcon Widget Example

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/introduction

StyledIcon is the styled equivalent of Flutter's Icon widget. It allows customization of icon properties such as color and size using a Style object.

```dart
StyledIcon(
  Icons.ac_unit,
  style: Style(
    $icon.color(Colors.blue),
    $icon.size(30),
  )
)
```

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

### Utility Aliases for Shorthand Styling

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/overview/utility-first

Demonstrates the use of utility aliases in Mix Utilities for creating shorthands or shortcuts to nested utility paths. It shows how '$box.border' is an alias for '$box.decoration.border' and provides examples of applying colors to borders using aliases.

```dart
// A utility to define a box border.
$box.border.color.red();

// The same as
$box.decoration.border.color.red();
```

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

### Create a Red, Rounded Container with Style Class

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/guides/animations

Demonstrates how to use the Style class to define basic widget stylizations such as height, width, color, and border radius. This serves as a foundational step before implementing animations.

```dart
Box(
  style: Style(
    $box.height(50),
    $box.width(50),
    $box.color(Colors.red),
    $box.borderRadius(10),
  ),
);
```

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

### Utility-First Padding in Mix

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/overview

Demonstrates the utility-first approach in Mix for applying padding. This example shows how to apply uniform padding, padding to specific axes (top/bottom, left/right), and padding to individual sides using utility functions. Dependencies include the Mix library and `$box.padding` utilities.

```dart
$box.padding(20); /// Padding 20 on all sides
$box.padding(20, 10); /// Padding 20 on top and bottom, 10 on left and right

$box.padding.top(20); /// Padding 20 on top
$box.padding.horizontal(20); /// Padding 20 on left and right
```

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

### Example of defining vertical gradients in Mix

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/tutorials/extending-utilities

Demonstrates the repetitive way of defining vertical gradients using LinearGradientUtility in Mix, highlighting the need for a more streamlined approach.

```dart
final style = Style(
  $box.linearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
  ),
  
  // Or you can do this
  $box.linearGradient.begin.topCenter(),
  $box.linearGradient.end.bottomCenter(),
);
```

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

### Theming API Update in Mix Package

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/overview/migration

Demonstrates the updated MixTheme API for applying theme data, including colors, to widgets. It shows how to define a theme with color tokens and apply it to a Box widget using Style and the .ref() method.

```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),
    ),
  )
)
```

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

### BorderRadiusDirectional Start

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/utilities/box-utilities

Styles the start (topStart and bottomStart) BorderRadiusDirectional of a BoxDecoration. Provides methods for setting a uniform radius, circular radius, elliptical radius, or resetting to zero.

```APIDOC
## BorderRadiusDirectional Start

### Description
Styles the start (topStart and bottomStart) BorderRadiusDirectional of a BoxDecoration. Provides methods for setting a uniform radius, circular radius, elliptical radius, or resetting to zero.

### Method
N/A (This is a property/method chaining example)

### Endpoint
N/A

### Parameters
N/A

### Request Example
```dart
$box.borderRadiusDirectional.start(10);
$box.borderRadiusDirectional.start.circular(10);
$box.borderRadiusDirectional.start.elliptical(10, 20);
$box.borderRadiusDirectional.start.zero();
```

### Response
#### Success Response (N/A)
N/A

#### Response Example
N/A
```

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

### Flutter StyledWidgets StyleImage Widget Example

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/introduction

StyleImage applies styles to Flutter's Image widget. It uses a Style object to control layout properties and accepts an ImageProvider for the image source.

```dart
StyledImage(
  style: Style(
    $box.color.blue(),
    $flex.direction.horizontal(),
    $flex.mainAxisAlignment.spaceBetween(),
  ),
  image: // <-- Enter the ImageProvider here,
)
```

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

### Flutter StyledWidgets ZBox Widget Example

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/introduction

ZBox functions similarly to Flutter's Stack widget, enabling layered layouts. It takes a Style object for overall alignment and dimensions and accepts a list of children widgets to be stacked.

```dart
ZBox(
  style: Style(
    $stack.alignment.centerLeft(),
    $box.width(200),
    $box.height(200),
  ),
  children: [
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
    ),
    Container(
      color: Colors.blue,
      width: 50,
      height: 50,
    ),
  ],
)
```

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

### Intuitive API Design for Mix Utilities

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/overview/utility-first

Illustrates the intuitive API design of Mix Utilities, where utilities mimic method functionality. Examples show different ways to use alignment utilities, including direct method chaining, passing an 'Alignment' object as a parameter, and specifying 'x' and 'y' values.

```dart
// Chaining style is the most common way to use utilities.
$box.alignment.center();

// As this seems similar to the above, this allows you to pass an `Alignment` as a parameter.
$box.alignment(Alignment.center);

// Gives you direct control over the `x` and `y` values of an `Alignment` object.
$box.alignment.only(x: 0.0, y: 0.0);
```

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

### BuildContext Responsive Styling in Mix

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/overview

Shows how to create context-aware styles in Mix that adapt based on the `BuildContext`. This example defines a style that changes box and text colors depending on whether the context is dark or light. Dependencies include the Mix library and `$on.dark` utility.

```dart
final style = Style(
  $box.color.black(),
  $text.style.color.white(),
  $on.dark(
    $box.color.white(),
    $text.style.color.black(),
  ),
);
```

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

### Basic Box Usage with Styling

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/box

Demonstrates the fundamental usage of the Box widget to apply basic styles like background color, border radius, padding, and elevation to a child widget. This is the most common way to start using Box for styled containers.

```dart
Box(
  style: Style(
    $box.color.blue(),
    $box.borderRadius.all(8),
    $box.padding.vertical(20),
    $box.elevation(2),
  ),
  child: Text('Styled Box'),
);
```

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

### Creating Custom Utility Aliases

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/overview/utility-first

Explains how to create custom utility aliases in Mix Utilities by assigning utilities to variables. Examples include creating a shorthand for border top styling ('bt') and for a specific border color and position ('borderRedTop').

```dart
// Custom alias for border top styling
final bt = $box.border.top;

// As a method
bt.color.red();

// As a paramter
bt(color: Colors.red);

// Custom alias for border.top.color.red
final borderRedTop = $box.border.top.color.red;

// Usage
borderRedTop();
```

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

### Flutter StyledWidgets FlexBox, HBox, VBox Examples

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/introduction

FlexBox, HBox, and VBox are styled equivalents of Flutter's Flex, Row, and Column widgets, respectively. They support all Box widget functionalities plus flex attributes, allowing for flexible layouts.

```dart
FlexBox(
  direction: Axis.horizontal,
  style: Style(
    $box.color.blue(),
    $flex.direction.horizontal(),
    $flex.mainAxisAlignment.spaceBetween(),
  ),
  children: [
    Box(
      child: Text('Box 1'),
    ),
    Box(
      child: Text('Box 2'),
    ),
    Box(
      child: Text('Box 3'),
    ),
  ],
)
```

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

### Add Mix Generator and Build Runner to Dev Dependencies

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/tutorials/creating-a-widget

Installs 'mix_generator' and 'build_runner' as development dependencies. These are necessary for code generation tasks related to the Mix package, enabling the creation of spec utilities.

```bash
flutter pub add --dev mix_generator build_runner
```

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

### Style Start Side of BorderDirectional in Flutter

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/utilities/box-utilities

This section demonstrates how to style the start side of a BorderDirectional object. It covers setting color, width, style, and stroke alignment for the start border. This syntax is part of a Flutter styling utility.

```dart
$box.borderDirectional.start.color.red();
$box.borderDirectional.start.width(2);
$box.borderDirectional.start.style.solid();
$box.borderDirectional.start.strokeAlign(0.5);
```

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

### Stack Alignment Utilities

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/stack

Provides examples of using $stack.alignment utilities to control the positioning of children within the ZBox or StyledStack. These methods allow for precise alignment of layered widgets.

```dart
// Align at the bottom center of the stack
$stack.alignment.bottomCenter();

// Align at the top right of the stack
$stack.alignment.topRight();
```

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

### Flutter StyledWidgets PressableBox Widget Example

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/introduction

PressableBox combines Container and GestureDetector functionalities, enabling interaction like onPress and onLongPress on a styled box. It takes a Style object for appearance and a child widget.

```dart
PressableBox(
  onPress: () => {// Do something},
  style: Style(
    $box.color.blue(),
    $box.width(100),
    $box.height(100),
  ),
  child: // <- Enter the child parameter,
)
```

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

### Create and Apply Variants with Mix

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/overview

Illustrates how to define and apply variants in Mix for conditional styling. This example defines an 'outlined' variant that changes the box and text colors and adds a border. It showcases composing styles and applying variants using `applyVariant`. Dependencies include the Mix library and `Variant`.

```dart
const onOutlined = Variant('outlined');

final baseStyle = Style(
  $box.borderRadius(10),
  $box.color.black(),
  $text.style.color.white(),

  onOutlined(
    $box.color.transparent(),
    $box.border.color.black(),
    $text.style.color.black(),
  ),
);

final outlinedStyle = baseStyle.applyVariant(onOutlined);
```

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

### Icon Styling Utilities in Flutter

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/icon

Provides examples of using utility attributes like color, size, weight, grade, optical size, fill, and text scaling with the $icon alias for styling StyledIcon and AnimatedStyledIcon widgets.

```dart
// Change the color of the icon:
$icon.color.red();

// Set the size of the icon:
$icon.size(24);

// Set the stroke weight for drawing the icon:
$icon.weight(24);

// Set the grade (granular stroke weight) for drawing the icon:
$icon.grade(10);

// Set the optical size for drawing the icon:
$icon.opticalSize(10);

// Set the fill for drawing the icon:
$icon.fill(0.7);

// Set to enable the icon scale:
$icon.applyTextScaling.on();
```

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

### Flutter StyledWidgets Box Widget Example

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/introduction

The Box widget is a styled version of Flutter's Container. It accepts a Style object to apply attributes like width, height, and background color. This is a fundamental widget for layout and styling in the Mix framework.

```dart
Box(
  style: Style(
    $box.width(100),
    $box.height(100),
    $box.backgroundColor(Colors.blue),
  )
)
```

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

### Flutter StyledWidgets StyledText Widget Example

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/introduction

StyledText enhances Flutter's Text widget by allowing text styling through a Style object. It supports properties like color and font size, simplifying text presentation.

```dart
StyledText(
  'Hello, World!',
  style: Style(
    $text.style.color(Colors.blue),
    $text.style.fontSize(20),
  )
)
```

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

### Animate Container Properties on Hover with AnimatedStyle

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/guides/animations

Shows how to use the AnimatedStyle class to create animations based on style differences, triggered by events like hover. It defines initial styles and styles to animate to, along with animation duration and curve.

```dart
PressableBox(
  onPress: () => { /* This function will be triggered when the box is pressed. */ },
  child: Box(
    style: AnimatedStyle(
      Style(
        $box.height(50),
        $box.width(50),
        $box.color(Colors.blue),
        $box.borderRadius(10),
        $on.hover(
          $box.height(100),
          $box.width(100),
          $box.color(Colors.red),
        ),
      ),
      duration: Durations.long1,
      curve: Curves.decelerate,
    ),
  ),
);
```

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

### Simplify Animation with Style.animate() Method

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/guides/animations

Illustrates the use of the `animate()` method on the Style class to create an AnimatedStyle object more concisely. This method applies specified duration and curve to animate style properties, such as color and border radius on hover.

```dart
PressableBox(
  onPress: () => { /* Action to perform when the box is pressed. */ },
  child: Box(
    style: Style(
      $box.height(100),
      $box.width(100),
      $box.color(Colors.red),
      $box.borderRadius(20),
      $on.hover(
        $box.color(Colors.blue),
        $box.borderRadius(10),
      ),
    ).animate(
      duration: Durations.long1,
      curve: Curves.linear,
    )
  ),
);
```

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

### Configure MixableType with Utility Type and Properties

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/tools/generator

This Dart example demonstrates configuring `@MixableType()` with a specific `type` for the utility (e.g., `BoxDecoration`) and defining the `properties` to be included, such as `color`, `border`, and `borderRadius`. This allows for fine-grained control over generated utility code.

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

@MixableType(
  utilities: MixableUtility(
    type: BoxDecoration,
    properties: [
      (path: 'color', alias: 'color'),
      (path: 'border', alias: 'border'),
      (path: 'borderRadius', alias: 'borderRadius'),
    ],
  ),
)
final Decoration? decoration;
```

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

### Flutter pubspec.yaml with Mix Dependencies

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/tutorials/creating-a-widget

Illustrates the 'pubspec.yaml' file after adding the necessary Mix packages. Shows the 'dependencies' and 'dev_dependencies' sections with the specified versions.

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

dev_dependencies:
  flutter_test:
    sdk: flutter
  mix_generator: ^1.0.0
  build_runner: ^2.0.0
```

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

### Basic StyledText Usage

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/text

Demonstrates the basic usage of the StyledText widget to display 'Hello World' with custom styling applied using Mix style attributes.

```dart
StyledText(
  'Hello World',
  style: Style(
    $text.style.color.red(),
    $text.style.fontSize(20),
  )
);
```

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

### Descriptive Styling with Mix Utilities

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/overview/utility-first

This snippet demonstrates how to apply descriptive styles using Mix Utilities by chaining various style properties like width, padding, alignment, and color. It assumes the availability of a 'Style' class and predefined utility objects like '$box'.

```dart
final style = Style(
  $box.width(100),
  $box.padding(10),
  $box.alignment.center(),
  $box.color.red(),
);
```

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

### Set Start Directional Border Radius (Flutter)

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/utilities/box-utilities

Applies a directional border radius to the start edges (topStart and bottomStart) of a BoxDecoration. Supports setting a uniform radius, a circular radius, an elliptical radius, or resetting to zero. This is a utility function from mix_generatorText.

```dart
$box.borderRadiusDirectional.start(10);
$box.borderRadiusDirectional.start.circular(10);
$box.borderRadiusDirectional.start.elliptical(10, 20);
$box.borderRadiusDirectional.start.zero();
```

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

### Font Weight Styling with $text Utility

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/text

Shows how to set the font weight (boldness) of the text using the $text utility, with examples for bold and medium weights.

```dart
$text.style.fontWeight.bold(); // Bold
$text.style.fontWeight.w500(); // Medium
```

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

### Flex Direction Utility - Flutter

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/flex

Provides examples of how to use the Flex utility to set the direction of the flex container, either horizontally or vertically. This controls the primary axis.

```dart
// Set the direction to horizontal.
$flex.direction.horizontal();

// Set the direction to vertical.
$flex.direction.vertical();
```

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

### Set TextAlign in Flutter

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/utilities/text-utilities

Utilities for setting TextAlign values to control the horizontal alignment of text within its bounds. Supports left, right, center, justify, start, and end alignments.

```dart
$text.textAlign.left();
$text.textAlign.right();
$text.textAlign.center();
$text.textAlign.justify();
$text.textAlign.start();
$text.textAlign.end();
```

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

### FlexBox Widget Usage - Flutter

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/flex

Demonstrates the basic usage of the FlexBox widget, equivalent to Flutter's Flex widget. It shows how to apply styles and arrange child widgets.

```dart
FlexBox(
  style: Style(
    $box.color.blue(),
    $flex.direction.horizontal(),
    $flex.mainAxisAlignment.spaceBetween(),
  ),
  children: [
    Box(
      child: Text('Box 1'),
    ),
    Box(
      child: Text('Box 2'),
    ),
    Box(
      child: Text('Box 3'),
    ),
  ],
)
```

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

### Trigger Code Generation with build_runner

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/tools/generator

This command-line instruction is used to initiate the code generation process for the Mix package. Running `flutter pub run build_runner build` will process the annotations and generate the necessary Dart files based on your configurations.

```bash
flutter pub run build_runner build
```

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

### Use Custom Scale Modifier with Style

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/guides/widget-modifiers

Shows how to use the custom `ScaleModifier` (via the `scale` utility function) within a Mix `Style`. This example applies a 0.5 scale to a `Box` widget.

```dart
final style = Style(
  $with.scale(0.5),
  // or $box.wrap.scale(0.5),
);
 
Box(
  style: style,
  child: const Text('Half sized box'),
);
```

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

### Manual Scale Transformation with Container

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/guides/widget-modifiers

Shows a manual implementation of scaling a Container widget using Flutter's `Transform.scale`. This example highlights the underlying mechanism that Mix modifiers abstract away.

```dart
Transform.scale(
  scale: 0.5,
  child: Container(
    child: const Text("Half sized box"),
  ),
)
```

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

### Icon Shadow Styling in Flutter

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/icon

Demonstrates how to apply single shadows or multiple shadows to icons using the $icon.shadow and $icon.shadows utilities, respectively. Includes examples with ColorDto for shadow color.

```dart
// Set the shadow that will be painted underneath the icon:
$icon.shadow(10);

$icon.shadows([
  ShadowDto(
    color: ColorDto(
      Colors.black,
    ),
  ),
]);
```

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

### StyledText Inheritance Example

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/text

Illustrates how StyledText inherits styles from a parent widget. The 'inherit' parameter is true by default, applying parent styles to child StyledText widgets. Note that 'modifier' attributes are not inherited.

```dart
Box(
  Style(
    $text.style.color.red(),
    $text.style.fontSize(20),
  ),
  child: StyledText('Hello World');
);
```

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

### Built-in Clip Oval Modifier Usage

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/guides/widget-modifiers

Shows the usage of the Clip Oval modifier in Mix, with examples for `$with.clipOval()` and `$box.wrap.clipOval()`, demonstrating how to clip a Box widget into an oval shape, equivalent to using `ClipOval`.

```dart
final modifier = Style(
  $with.clipOval(),
);

final specModifier = Style(
  $box.wrap.clipOval(),
);

// Equivalent to
ClipOval(
  child: Box(
    child: const Text('Oval box'),
  ),
);
```

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

### Create a Custom Scale WidgetModifier

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/guides/widget-modifiers

Provides a Dart code example for creating a custom `WidgetModifier` named `ScaleModifier`. This class extends `WidgetModifier` and implements `lerp`, `props`, and `build` to handle scaling logic.

```dart
class ScaleModifier extends WidgetModifier<ScaleModifier> {
  final double scale;
  const ScaleModifier(this.scale, {super.key});
 
  @override
  ScaleModifier lerp(ScaleModifier? other, double t) {
    return ScaleModifier(lerpDouble(scale, other?.scale, t) ?? scale);
  }
 
  @override
  get props => [scale];
 
  @override
  Widget build(MixData mix, Widget child) {
    return Transform.scale(
      key: key,
      scale: scale,
      child: child,
    );
  }
}

```

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

### Flutter Button Styling Utilities and Design Tokens

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/tutorials/creating-a-widget

Demonstrates how to set up styling for the CustomButton widget. It shows the use of utility references for different button parts and how to integrate Material Design theme tokens within a MixTheme. This section defines a base style for the button.

```dart
final _util = ButtonSpecUtility.self;
final _label = _util.label;
final _container = _util.container;
final _flex = _util.flex;
final _icon = _util.icon;
```

```dart
MixTheme(
  data: MixThemeData.withMaterial(),
  child: child,
)
```

```dart
final _mdPrimary = $material.colorScheme.primary;
final _mdOnPrimary = $material.colorScheme.onPrimary;
final _mdButton = $material.textTheme.button;
```

```dart
Style get _baseStyle => Style(
  // Container 
  _container.borderRadius(6),
  _container.padding(8, 12),
  // Flex
  _flex.gap(8),
  _flex.mainAxisAlignment.center(),
  _flex.crossAxisAlignment.center(),
  _flex.mainAxisSize.min(),
  //Label
  _label.style.ref(_mdButton),
  // Icon
  _icon.size(18),
);
```

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

### Basic PressableBox Usage

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/pressable-box

Demonstrates the basic usage of PressableBox, wrapping a widget to provide press and hover effects with style changes. It shows how to define default, pressed, and hovered styles.

```dart
PressableBox(
  style: Style(
    $box.color.blue(),
    $on.press(
      $box.color.red(),
    ),
    $on.hover(
      $box.color.green(),
    ),
  ),
  onPress: () => print('Pressed!'),
  child: StyledText('Press Me'),
);
```

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

### StyledImage Style Inheritance Example

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/image

Illustrates the default inheritance behavior of the StyledImage widget. Styles defined in an ancestor 'Style' widget are inherited by the StyledImage, simplifying style management. Note that modifier attributes cannot be inherited.

```dart
Box(
  Style(
    $image.height(30),
    $image.color.blue(),
  ),
  child: StyledImage(image: const AssetImage('some_image.jpg')),
);
```

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

### Apply Style When Condition is False (NOT Operator)

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/guides/variants

Explains the 'onNot' functionality, which allows for composing variants that are applied when a given context condition evaluates to false. The example shows creating an 'onDisabled' variant by negating the 'onEnabled' condition.

```dart
final onDisabled = $on.not($on.enabled);

final style = Style(
  $on.disabled(
    $with.scale(1.2),
  ),
);
```

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

### Basic StyledImage Usage with Mix Styles

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/image

Demonstrates how to use the StyledImage widget by providing an ImageProvider and applying various style attributes using the Mix Style class. This includes setting width, height, fit, alignment, and blend mode.

```dart
StyledImage(
  image: const AssetImage('assets/image.jpg'),
  style: Style(
    $image.width(152),
    $image.height(152),
    $image.fit.fill(),
    $image.alignment.bottomLeft(),
    $image.blendMode.colorDodge(),
  ),
)
```

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

### Box Constraints

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/utilities/box-utilities

Utilities for setting the maximum and minimum width and height of a box.

```APIDOC
## Box Constraints

### `$box.maxWidth`
Sets the maximum width the box can have.

**Usage:**
```dart
$box.maxWidth(200)
```

### `$box.minWidth`
Sets the minimum width the box must have.

**Usage:**
```dart
$box.minWidth(100)
```

### `$box.maxHeight`
Sets the maximum height the box can have.

**Usage:**
```dart
$box.maxHeight(200)
```

### `$box.minHeight`
Sets the minimum height the box must have.

**Usage:**
```dart
$box.minHeight(100)
```
```

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

### Mix Lint: Refactor Large Styles

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/tools/lint

Provides an example of how to refactor a `Style` with too many attributes (violating `mix_max_number_of_attributes_per_style`) into smaller, manageable styles. This improves code organization and adheres to the rule's intention of keeping styles concise.

```dart
final auxStyle = Style(
    $attribute1(),
    $attribute2(),
    $attribute3(),
    $attribute4(),
    $attribute5(),
);

final mainStyle = Style(
    auxStyle(),
    $attribute6(),
    $attribute7(),
    $attribute8(),
    $attribute9(),
    $attribute10(),
    $attribute11(),
);
```

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

### Define a Simple Variant (Flutter)

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/guides/variants

Demonstrates how to define a custom styling variation using the `Variant` constructor. This allows for manual application to `Style` instances for fine-grained control over widget appearance.

```dart
const outlined = Variant('outlined');
```

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

### StrutStyle Utilities

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/utilities/text-utilities

Utilities for configuring StrutStyle properties.

```APIDOC
## StrutStyle Utilities

### Description
Utility for setting `StrutStyle` values.

### Methods
- `$text.strutStyle.fontFamily(family: String)`: Sets the font family.
- `$text.strutStyle.fontSize(size: double)`: Sets the font size.
- `$text.strutStyle.fontWeight(weight: FontWeight)`: Sets the font weight.
- `$text.strutStyle.fontStyle.italic()`: Sets the font style to italic.
- `$text.strutStyle.forceStrutHeight.on()`: Enables forcing strut height.
- `$text.strutStyle.height(height: double)`: Sets the minimum height of the strut.
- `$text.strutStyle.leading(leading: double)`: Sets the additional leading for the strut.
- `$text.strutStyle.fontFamilyFallback(families: List<String>)`: Sets fallback font families.
```

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

### Style Horizontal Sides of BorderDirectional in Flutter

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/utilities/box-utilities

This section demonstrates how to style the horizontal sides (start and end) of a BorderDirectional object. It covers setting color, width, style, and stroke alignment for these sides. This syntax is part of a Flutter styling utility.

```dart
$box.borderDirectional.horizontal.color.red();
$box.borderDirectional.horizontal.width(2);
$box.borderDirectional.horizontal.style.solid();
$box.borderDirectional.horizontal.strokeAlign(0.5);
```

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

### Box Color and Elevation

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/utilities/box-utilities

Utilities for setting the background color and elevation of a box.

```APIDOC
## Box Color and Elevation

### `$box.color`
Sets the background color of the box.

**Usage:**
```dart
$box.color(Colors.blue)
$box.color.blue()
```

### `$box.elevation`
Sets the elevation of the box.

**Note:** Elevation can be values like 0, 1, 2, 3, 4, 6, 8, 9, 12, 16, 24.

**Usage:**
```dart
$box.elevation(2)
```
```

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

### StyledIcon Basic Usage in Flutter

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/icon

Demonstrates the basic usage of the StyledIcon widget by passing an icon data and applying styles using the Style class. This allows for easy theming and styling of icon widgets.

```dart
StyledIcon(
  Icons.star,
  style: Style(
    $icon.size(30),
    $icon.color.blue(),
  ),
);
```

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

### Configure MyApp with Material Design Tokens in Mix

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/tutorials/theming

Configures the root MyApp widget to use Material Design tokens provided by Mix. This involves wrapping the application with `MixTheme` and initializing `MixThemeData` with `MixThemeData.withMaterial()`. This enables access to Material ColorScheme and TextTheme tokens.

```dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Mix App',
      home: MixTheme(
        data: MixThemeData.withMaterial(),
        child: ProfilePage(),
      ),
    );
  }
}

```

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

### StyledImage Repeat Utility

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/image

Shows how to configure the repetition behavior of the image within its bounds using the `$image.repeat` utility. This is useful for tiling images.

```dart
$image.repeat.repeat();
```

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

### StyledIcon Style Inheritance in Flutter

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/icon

Illustrates how the StyledIcon widget inherits styles from its nearest Style ancestor due to the 'inherit' flag being true by default. This example shows a Box widget applying styles that are then inherited by its child StyledIcon.

```dart
Box(
  Style(
    $icon.size(30),
    $icon.color.blue(),
  ),
  child: StyledIcon(Icons.star),
);
```

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

### Apply Design Tokens using .ref() Method

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/guides/design-token

Shows the syntax for referencing design tokens (ColorToken, TextStyleToken, RadiusToken, SpaceToken) using the `.ref()` method within Mix's styling attributes.

```dart
$box.color.ref(ColorToken)

$text.style.ref(TextStyleToken)

$box.borderRadius.ref(RadiusToken)

$box.padding.all.ref(SpaceToken) // You can replace `all` with any other padding property
```

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

### Box Padding - Individual Sides (Using `only` Method)

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/box

Illustrates applying padding to specific sides of a Box widget using the `$box.padding.only()` method. This method allows for precise control over top, bottom, left, right, start, and end padding values.

```dart
$box.padding.only(
  top: 16,
  bottom: 16,
  left: 8, // or start: 8,
  right: 8, // or end: 8,
);
```

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

### Stack Fit Utilities

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/stack

Illustrates the use of $stack.fit utilities to define how children are sized and fitted within the stacking context of ZBox or StyledStack. Options include loose and expand fitting behaviors.

```dart
// StackFit.loose
$stack.fit.loose();

// StackFit.expand
$stack.fit.expand();
```

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

### Mix Lint: Correct Attribute Ordering in Style

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/tools/lint

Demonstrates the correct way to order attributes within a `Style` constructor according to the `mix_attributes_ordering` rule. Attributes are grouped by category to improve code readability and understanding.

```dart
Style (
    $box.color.red(),
    $box.height(200),
    $text.color.blue(),
    $text.style.fontSize(10),
)
```

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

### Implement Dynamic Color Token Resolution

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/guides/design-token

Demonstrates how to create a dynamic color token ('surface') that resolves its value based on the current platform brightness using `ColorResolver` and `BuildContext`.

```dart
final surface = ColorToken('surface');

final docTheme = MixThemeData(
  colors: {
    surface: ColorResolver((context) {
      if (MediaQuery.of(context).platformBrightness == Brightness.dark) {
        return Colors.black;
      }
      return Colors.white;
    }),
  },
);
```

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

### $box.borderRadiusDirectional.topStart

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/utilities/box-utilities

Styles the `BorderRadiusDirectional.topStart` of a `BoxDecoration.$box.borderRadius`. Supports uniform, circular, elliptical, and zero radius.

```APIDOC
## $box.borderRadiusDirectional.topStart

### Description
Styles the `BorderRadiusDirectional.topStart` of a `BoxDecoration.$box.borderRadius`.

### Method
Applies a specific radius to the top-start corner.

### Endpoint
N/A (Code Snippet)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```dart
$box.borderRadiusDirectional.topStart(10);
$box.borderRadiusDirectional.topStart.circular(10);
$box.borderRadiusDirectional.topStart.elliptical(10, 20);
$box.borderRadiusDirectional.topStart.zero();
```

### Response
#### Success Response (200)
N/A (Code Snippet)

#### Response Example
N/A (Code Snippet)
```

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

### Combine AND and OR Operators for Complex Conditions

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/guides/variants

Illustrates combining the '|' (OR) and '&' (AND) operators to create intricate conditional styling logic. The example shows how operator precedence (left-to-right reading) affects the application of styles based on multiple conditions like hover, press, and dark mode.

```dart
final style = Style(
  $box.height(100),
  $box.width(100),
  (onHover | onPress & $on.dark)(
    $box.color.red(),
  ),
);
```

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

### Box Styling with Composition and Decoration

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/box

Illustrates how to use the Box widget to apply advanced visual effects such as scaling, opacity, and rotation using Mix's composable style modifiers. This enables rich visual transformations with concise code.

```dart
Box(
  style: Style(
    $with.scale(1.2),
    $with.opacity(0.75),
    $with.rotate(45),
  ),
  child: Icon(Icons.star),
);
```

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

### Box Dimensions

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/utilities/box-utilities

Utilities for setting the width and height of a box.

```APIDOC
## Box Dimensions

### `$box.width`
Sets the width of the box.

**Usage:**
```dart
$box.width(200)
```

### `$box.height`
Sets the height of the box.

**Usage:**
```dart
$box.height(100)
```
```

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

### Box Margin Individual Sides

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/widgets/box

Sets margins for specific sides of a Box using direct method naming (top, bottom, left, right, start, end) or the `only` method. The `only` method allows specifying margins for individual sides by name, providing flexibility in layout control.

```dart
$box.margin.top(8);
$box.margin.bottom(8);
$box.margin.left(8);
$box.margin.right(8);
$box.margin.start(8);
$box.margin.end(8);

$box.margin.only(left: 10, right: 10);
```

```dart
$box.margin.only(
  top: 16,
  bottom: 16,
  left: 8, // or start: 8,
  right: 8, // or end: 8,
);
```

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

### Flutter Main App with MixTheme and Buttons

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/tutorials/creating-a-widget

This Flutter code defines the main application widget, 'MyApp', which utilizes 'MixTheme' to apply a material design theme. It then renders a 'Scaffold' containing a 'Row' of various button types (FilledButton, OutlinedButton, ElevatedButton, LinkButton), each displaying a label and an icon. The 'main' function is the entry point for the application.

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

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

    return MaterialApp(
      home: MixTheme(
        data: MixThemeData.withMaterial(),
        child: Scaffold(
          body: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                FilledButton(
                  label: 'Button',
                  icon: icon,
                  onPressed: () {},
                ),
                SizedBox(height: 10),
                OutlinedButton(
                  label: 'Button',
                  icon: icon,
                  onPressed: () {},
                ),
                SizedBox(height: 10),
                ElevatedButton(
                  label: 'Button',
                  icon: icon,
                  onPressed: () {},
                ),
                SizedBox(height: 10),
                LinkButton(
                  label: 'Button',
                  icon: icon,
                  onPressed: () {},
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
```

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

### Box Padding

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/utilities/box-utilities

Utilities for setting the padding of a box on various sides.

```APIDOC
## Box Padding

### `$box.padding`
Sets the padding of the box.

**Usage:**
```dart
// Single value for all sides
$box.padding(10);

// Horizontal and vertical values
$box.padding(10, 20);

// Top, horizontal, and bottom values
$box.padding(10, 20, 30);

// Top, right, bottom, and left values
$box.padding(10, 20, 30, 40);
```

### `$box.padding.all`
Sets the padding of the box on all sides.

**Usage:**
```dart
$box.padding.all(10)
```

### `$box.padding.top`
Sets the padding of the box on the top side.

**Usage:**
```dart
$box.padding.top(10)
```

### `$box.padding.bottom`
Sets the padding of the box on the bottom side.

**Usage:**
```dart
$box.padding.bottom(10)
```

### `$box.padding.left`
Sets the padding of the box on the left side.

**Usage:**
```dart
$box.padding.left(10)
```

### `$box.padding.right`
Sets the padding of the box on the right side.

**Usage:**
```dart
$box.padding.right(10)
```

### `$box.padding.horizontal`
Sets the padding of the box on the horizontal (left and right) sides.

**Usage:**
```dart
$box.padding.horizontal(10)
```

### `$box.padding.vertical`
Sets the padding of the box on the vertical (top and bottom) sides.

**Usage:**
```dart
$box.padding.vertical(10)
```

### `$box.padding.only`
Sets the padding of the box on the specified sides.

**Usage:**
```dart
$box.padding.only(
  top: 10,
  bottom: 20,
  left: 30,
  right: 40
);
```
```

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

### Flutter Custom Widget Styling with Mix

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/overview/comparison

Demonstrates how to style a custom Flutter widget using the Mix library. This snippet includes basic box and text styling, hover effects, and dark mode variants. It simplifies complex styling by chaining properties and using contextual modifiers.

```dart
Style get customStyle {
  final style = Style(
    $box.height(120),
    $box.width(120),
    $box.padding(20),
    $box.elevation.nine(),
    $box.alignment.center(),
    $box.borderRadius(10),
    $box.color(Colors.blue),
    $text.style.ref($material.textTheme.button),
    $text.style.color(Colors.white),
    $with.scale(1),
    $on.dark(
      $box.color(Colors.cyan),
      $text.style.color(Colors.black),
    ),
    $on.hover(
      $box.alignment.topLeft(),
      $box.elevation(2),
      $box.padding(10),
      $with.scale(1.5),
      $on.dark(
        $text.style.color.lighten(20),
        $box.color.lighten(20),
      ),
      $on.light(
        $box.color.darken(30),
        $text.style.color.darken(20),
      ),
    ),
  );
 
  return style.animate(
    curve: Curves.linear,
    duration: const Duration(milliseconds: 100),
  );
}

```

```dart
import 'widget.style.dart';
 
class CustomMixWidget extends StatelessWidget {
  const CustomMixWidget({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return PressableBox(
      style: customStyle,
      child: const StyledText('Custom Widget'),
    );
  }
}

```

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

### Flutter Checkbox Usage Example

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/remix/checkbox

Demonstrates the basic implementation of a Checkbox widget in Flutter. It shows how to manage the checkbox's checked state and handle changes when the user interacts with it. The `value` property controls the checked state, and `onChanged` is a callback function that receives the new boolean value.

```dart
bool _value = false;
@override
Widget build(BuildContext context) {
  return Checkbox(
    value: _value,
    onChanged: (value) {
      setState(() {
        _value = value;
      });
    },
    label: 'Remember me',
  );
}
```

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

### $box.borderRadiusDirectional.bottomStart

Source: https://mix-docs-gosljkd74-fluttertools.vercel.app/docs/utilities/box-utilities

Styles the `BorderRadiusDirectional.bottomStart` of a `BoxDecoration.$box.borderRadius`. Supports uniform, circular, elliptical, and zero radius for the bottom-start corner.

```APIDOC
## $box.borderRadiusDirectional.bottomStart

### Description
Styles the `BorderRadiusDirectional.bottomStart` of a `BoxDecoration.$box.borderRadius`.

### Method
Applies a specific radius to the bottom-start corner.

### Endpoint
N/A (Code Snippet)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```dart
$box.borderRadiusDirectional.bottomStart(10);
$box.borderRadiusDirectional.bottomStart.circular(10);
$box.borderRadiusDirectional.bottomStart.elliptical(10, 20);
$box.borderRadiusDirectional.bottomStart.zero();
```

### Response
#### Success Response (200)
N/A (Code Snippet)

#### Response Example
N/A (Code Snippet)
```
Tokens:
Raw