### Flutter App Entry Point and Navigation Setup

Source: https://pub.dev/packages/mix/versions/2.0.0-dev.1/example

Sets up the main application widget and a navigator for example routes. It utilizes WidgetsApp and PageRouteBuilder for navigation and displays a list of example items categorized for clarity.

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

import 'components/custom_scaffold.dart';
import 'components/chip_button.dart';
import 'api/animation/animation.curved.0.dart' as animCurved0;
import 'api/animation/animation.curved.1.dart' as animCurved1;
import 'api/animation/animation.phase.0.dart' as animPhase0;
import 'api/animation/animation.phase.1.dart' as animPhase1;
import 'api/animation/animation.spring.dart' as animSpring;
import 'api/context_variants/disabled.dart' as disabled;
import 'api/context_variants/focused.dart' as focused;
import 'api/context_variants/hovered.dart' as hovered;
import 'api/context_variants/on_dark_light.dart' as darkLight;
import 'api/context_variants/pressed.dart' as pressed;
import 'api/context_variants/selected.dart' as selected;
// Animation examples have different class names, will be added separately
import 'api/design_tokens/design_token.dart' as designToken;
// Import all example widgets
import 'api/widgets/box/box.0.dart' as box0;
import 'api/widgets/box/box.1.dart' as box1;
import 'api/widgets/hbox/hbox.0.dart' as hbox0;
import 'api/widgets/icon/icon.0.dart' as icon0;
import 'api/widgets/text/text.0.dart' as text0;
import 'api/widgets/vbox/vbox.0.dart' as vbox0;
import 'api/widgets/zbox/stack.0.dart' as zbox0;

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

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

  @override
  Widget build(BuildContext context) {
    return WidgetsApp(
      title: 'Mix Examples',
      color: const Color(0xFF2196F3),
      home: const ExampleNavigator(),
      pageRouteBuilder:
          <T extends Object?>(RouteSettings settings, WidgetBuilder builder) =>
              PageRouteBuilder<T>(
                settings: settings,
                pageBuilder: (context, animation, _) => builder(context),
              ),
    );
  }
}

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

  @override
  State<ExampleNavigator> createState() => _ExampleNavigatorState();
}

class _ExampleNavigatorState extends State<ExampleNavigator> {
  String _selectedCategory = 'All';

  final List<ExampleItem> _examples = [
    // Widget Examples
    ExampleItem(
      title: 'Box - Basic',
      description: 'Simple red box with rounded corners',
      category: 'Widgets',
      widget: const box0.Example(),
    ),
    ExampleItem(
      title: 'Box - Gradient',
      description: 'Box with gradient and shadow',
      category: 'Widgets',
      widget: const box1.Example(),
    ),
    ExampleItem(
      title: 'HBox - Horizontal Layout',
      description: 'Horizontal flex container with icon and text',
      category: 'Widgets',
      widget: const hbox0.Example(),
    ),
    ExampleItem(
      title: 'VBox - Vertical Layout',
      description: 'Vertical flex container with styled elements',
      category: 'Widgets',
      widget: const vbox0.Example(),
    ),
    ExampleItem(
      title: 'ZBox - Stack Layout',
      description: 'Stacked boxes with different alignments',
      category: 'Widgets',
      widget: const zbox0.Example(),
    ),
    ExampleItem(
      title: 'Icon - Styled',
      description: 'Styled icon with custom size and color',
      category: 'Widgets',
      widget: const icon0.Example(),
    ),
    ExampleItem(
      title: 'Text - Styled',
      description: 'Styled text with custom typography',
      category: 'Widgets',
      widget: const text0.Example(),
    ),

    // Context Variants
    ExampleItem(
      title: 'Hover State',
      description: 'Box that changes color on hover',
      category: 'Context Variants',
      widget: const hovered.Example(),
    ),
    ExampleItem(
      title: 'Press State',
      description: 'Box that changes color when pressed',
      category: 'Context Variants',
      widget: const pressed.Example(),
    ),
    ExampleItem(
      title: 'Focus State',
      description: 'Boxes that change color when focused',
      category: 'Context Variants',
      widget: const focused.Example(),
    ),
    ExampleItem(
      title: 'Selected State',
      description: 'Box that toggles selected state',
      category: 'Context Variants',
      widget: const selected.Example(),
    ),
    ExampleItem(
      title: 'Disabled State',
      description: 'Disabled box with grey color',
      category: 'Context Variants',
      widget: const disabled.Example(),
    ),
    ExampleItem(
      title: 'Dark/Light Theme',
      description: 'Boxes that adapt to theme changes',
      category: 'Context Variants',
      widget: const darkLight.Example(),
    ),

    // Design Tokens
    ExampleItem(
      title: 'Design Tokens',
      description: 'Using design tokens for consistent styling',
      category: 'Design System',
      // widget: const designToken.Example(),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Mix Examples'),
      ),
      body: Row(
        children: [
          // Sidebar
          Container(
            width: 200,
            color: Colors.grey[200],
            child: ListView(
              children: [
                ListTile(
                  title: const Text('All'),
                  selected: _selectedCategory == 'All',
                  onTap: () => setState(() => _selectedCategory = 'All'),
                ),
                // Add other categories
                ListTile(
                  title: const Text('Widgets'),
                  selected: _selectedCategory == 'Widgets',
                  onTap: () => setState(() => _selectedCategory = 'Widgets'),
                ),
                ListTile(
                  title: const Text('Context Variants'),
                  selected: _selectedCategory == 'Context Variants',
                  onTap: () => setState(() => _selectedCategory = 'Context Variants'),
                ),
                ListTile(
                  title: const Text('Design System'),
                  selected: _selectedCategory == 'Design System',
                  onTap: () => setState(() => _selectedCategory = 'Design System'),
                )
              ],
            ),
          ),
          // Main content
          Expanded(
            child: ListView.builder(
              itemCount: _examples.length,
              itemBuilder: (context, index) {
                final example = _examples[index];
                if (_selectedCategory != 'All' &&
                    example.category != _selectedCategory) {
                  return null; // Skip items not matching the category
                }
                return ListTile(
                  title: Text(example.title),
                  subtitle: Text(example.description),
                  onTap: () => Navigator.of(context).push(
                    MaterialPageRoute(builder: (_) => example.widget),
                  ),
                );
              },
            ),
          )
        ],
      ),
    );
  }
}

class ExampleItem {
  const ExampleItem({
    required this.title,
    required this.description,
    required this.category,
    required this.widget,
  });

  final String title;
  final String description;
  final String category;
  final Widget widget;
}

```

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

### Flutter Mix Package Main Example Setup

Source: https://pub.dev/packages/mix/versions/2.0.0-beta.1/example

This Dart code sets up the main application for the Mix Flutter package examples. It imports necessary components, defines the root widget 'MixExampleApp', and configures navigation for various examples.

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

import 'components/custom_scaffold.dart';
import 'components/chip_button.dart';
import 'api/animation/implicit.curved.hover.dart' as hover_scale;
import 'api/animation/implicit.curved.scale.dart' as auto_scale;
import 'api/animation/phase.compress.dart' as tap_phase;
import 'api/animation/keyframe.switch.dart' as animated_switch;
import 'api/animation/implicit.spring.translate.dart' as spring_anim;
import 'api/context_variants/disabled.dart' as disabled;
import 'api/context_variants/focused.dart' as focused;
import 'api/context_variants/hovered.dart' as hovered;
import 'api/context_variants/on_dark_light.dart' as dark_light;
import 'api/context_variants/pressed.dart' as pressed;
import 'api/context_variants/selected.dart' as selected;
import 'api/context_variants/selected_toggle.dart' as selected_toggle;
import 'api/context_variants/responsive_size.dart' as responsive_size;
// Animation examples have different class names, will be added separately
import 'api/design_tokens/theme_tokens.dart' as theme_tokens;
// Import all example widgets
import 'api/widgets/box/simple_box.dart' as simple_box;
import 'api/widgets/box/gradient_box.dart' as gradient_box;
import 'api/widgets/hbox/icon_label_chip.dart' as icon_label_chip;
import 'api/widgets/icon/styled_icon.dart' as styled_icon;
import 'api/widgets/text/styled_text.dart' as styled_text;
import 'api/widgets/vbox/card_layout.dart' as card_layout;
import 'api/widgets/zbox/layered_boxes.dart' as layered_boxes;
// Text examples
import 'api/text/text_directives.dart' as text_directives;
// Gradient examples
import 'api/gradients/gradient_linear.dart' as gradient_linear;
import 'api/gradients/gradient_radial.dart' as gradient_radial;
import 'api/gradients/gradient_sweep.dart' as gradient_sweep;

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

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

  @override
  Widget build(BuildContext context) {
    return WidgetsApp(
      pageRouteBuilder:
          <T extends Object?>(RouteSettings settings, WidgetBuilder builder) =>
              PageRouteBuilder<T>(
                settings: settings,
                pageBuilder: (context, animation, _) => builder(context),
              ),
      home: const ExampleNavigator(),
      title: 'Mix Examples',
      color: const Color(0xFF2196F3),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  @override
  State<ExampleNavigator> createState() => _ExampleNavigatorState();
}

class _ExampleNavigatorState extends State<ExampleNavigator> {
  String _selectedCategory = 'All';

  final List<ExampleItem> _examples = [
    // Widget Examples
    ExampleItem(
      title: 'Box - Basic',
      description: 'Simple red box with rounded corners',
      category: 'Widgets',
      widget: const simple_box.Example(),
    ),
    ExampleItem(
      title: 'Box - Gradient',
      description: 'Box with gradient and shadow',
      category: 'Widgets',
      widget: const gradient_box.Example(),
    ),
    ExampleItem(
      title: 'HBox - Horizontal Layout',
      description: 'Horizontal flex container with icon and text',
      category: 'Widgets',
      widget: const icon_label_chip.Example(),
    ),
    ExampleItem(
      title: 'VBox - Vertical Layout',
      description: 'Vertical flex container with styled elements',
      category: 'Widgets',
      widget: const card_layout.Example(),
    ),
    ExampleItem(
      title: 'ZBox - Stack Layout',
      description: 'Stacked boxes with different alignments',
      category: 'Widgets',
      widget: const layered_boxes.Example(),
    ),
    ExampleItem(
      title: 'Icon - Styled',
      description: 'Styled icon with custom size and color',
      category: 'Widgets',
      widget: const styled_icon.Example(),
    ),
    ExampleItem(
      title: 'Text - Styled',
      description: 'Styled text with custom typography',
      category: 'Widgets',
      widget: const styled_text.Example(),
    ),
    ExampleItem(
      title: 'Text - Directives',
      description:
          'Text transformations: uppercase, lowercase, capitalize, etc.',
      category: 'Widgets',
      widget: const text_directives.Example(),
    ),

    // Context Variants
    ExampleItem(
      title: 'Hover State',
      description: 'Box that changes color on hover',
      category: 'Context Variants',
      widget: const hovered.Example(),
    ),
    ExampleItem(
      title: 'Press State',
      description: 'Box that changes color when pressed',
      category: 'Context Variants',
      widget: const pressed.Example(),
    ),
    ExampleItem(
      title: 'Focus State',

```

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

### Example pubspec.yaml Dependency

Source: https://pub.dev/packages/mix/versions/1.0.0-beta.7/install

An example of how the 'mix' package dependency will appear in your pubspec.yaml file after running the installation command. This ensures the correct version is tracked for your project.

```yaml
dependencies:
  mix: ^1.0.0-beta.7
```

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

### Flutter App Entry Point (Dart)

Source: https://pub.dev/packages/mix/versions/2.0.0-dev.3/example

Sets up the main application widget and navigation for the Mix examples. It initializes the WidgetsApp and provides a basic routing mechanism for navigating between different example screens.

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

import 'components/custom_scaffold.dart';
import 'components/chip_button.dart';
import 'api/animation/implicit.curved.hover.dart' as hover_scale;
import 'api/animation/implicit.curved.scale.dart' as auto_scale;
import 'api/animation/phase.compress.dart' as tap_phase;
import 'api/animation/keyframe.switch.dart' as animated_switch;
import 'api/animation/spring.spring.dart' as spring_anim;
import 'api/context_variants/disabled.dart' as disabled;
import 'api/context_variants/focused.dart' as focused;
import 'api/context_variants/hovered.dart' as hovered;
import 'api/context_variants/on_dark_light.dart' as dark_light;
import 'api/context_variants/pressed.dart' as pressed;
import 'api/context_variants/selected.dart' as selected;
import 'api/context_variants/selected_toggle.dart' as selected_toggle;
import 'api/context_variants/responsive_size.dart' as responsive_size;
// Animation examples have different class names, will be added separately
import 'api/design_tokens/theme_tokens.dart' as theme_tokens;
// Import all example widgets
import 'api/widgets/box/simple_box.dart' as simple_box;
import 'api/widgets/box/gradient_box.dart' as gradient_box;
import 'api/widgets/hbox/icon_label_chip.dart' as icon_label_chip;
import 'api/widgets/icon/styled_icon.dart' as styled_icon;
import 'api/widgets/text/styled_text.dart' as styled_text;
import 'api/widgets/vbox/card_layout.dart' as card_layout;
import 'api/widgets/zbox/layered_boxes.dart' as layered_boxes;
// Text examples
import 'api/text/text_directives.dart' as text_directives;
// Gradient examples
import 'api/gradients/gradient_linear.dart' as gradient_linear;
import 'api/gradients/gradient_radial.dart' as gradient_radial;
import 'api/gradients/gradient_sweep.dart' as gradient_sweep;

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

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

  @override
  Widget build(BuildContext context) {
    return WidgetsApp(
      pageRouteBuilder:
          <T extends Object?>(RouteSettings settings, WidgetBuilder builder) =>
              PageRouteBuilder<T>(
                settings: settings,
                pageBuilder: (context, animation, _) => builder(context),
              ),
      home: const ExampleNavigator(),
      title: 'Mix Examples',
      color: const Color(0xFF2196F3),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  @override
  State<ExampleNavigator> createState() => _ExampleNavigatorState();
}

class _ExampleNavigatorState extends State<ExampleNavigator> {
  String _selectedCategory = 'All';

  final List<ExampleItem> _examples = [
    // Widget Examples
    ExampleItem(
      title: 'Box - Basic',
      description: 'Simple red box with rounded corners',
      category: 'Widgets',
      widget: const simple_box.Example(),
    ),
    ExampleItem(
      title: 'Box - Gradient',
      description: 'Box with gradient and shadow',
      category: 'Widgets',
      widget: const gradient_box.Example(),
    ),
    ExampleItem(
      title: 'HBox - Horizontal Layout',
      description: 'Horizontal flex container with icon and text',
      category: 'Widgets',
      widget: const icon_label_chip.Example(),
    ),
    ExampleItem(
      title: 'VBox - Vertical Layout',
      description: 'Vertical flex container with styled elements',
      category: 'Widgets',
      widget: const card_layout.Example(),
    ),
    ExampleItem(
      title: 'ZBox - Stack Layout',
      description: 'Stacked boxes with different alignments',
      category: 'Widgets',
      widget: const layered_boxes.Example(),
    ),
    ExampleItem(
      title: 'Icon - Styled',
      description: 'Styled icon with custom size and color',
      category: 'Widgets',
      widget: const styled_icon.Example(),
    ),
    ExampleItem(
      title: 'Text - Styled',
      description: 'Styled text with custom typography',
      category: 'Widgets',
      widget: const styled_text.Example(),
    ),
    ExampleItem(
      title: 'Text - Directives',
      description:
          'Text transformations: uppercase, lowercase, capitalize, etc.',
      category: 'Widgets',
      widget: const text_directives.Example(),
    ),

    // Context Variants
    ExampleItem(
      title: 'Hover State',
      description: 'Box that changes color on hover',
      category: 'Context Variants',
      widget: const hovered.Example(),
    ),
    ExampleItem(
      title: 'Press State',
      description: 'Box that changes color when pressed',
      category: 'Context Variants',
      widget: const pressed.Example(),
    ),
    ExampleItem(
      title: 'Focus State',

```

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

### Build Example Card Widget

Source: https://pub.dev/packages/mix/versions/2.0.0-beta.1/example

A Flutter widget responsible for rendering individual example cards within the application. It displays the title, description, and the widget example itself, with basic styling.

```dart
Widget _buildExampleCard(ExampleItem example) {
    return Padding(
      padding: const EdgeInsets.all(12),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            example.title,
            style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            overflow: TextOverflow.ellipsis,
            maxLines: 2,
          ),
          const SizedBox(height: 8),
          Text(
            example.description,
            style: const TextStyle(color: Colors.grey, fontSize: 12),
            overflow: TextOverflow.ellipsis,
            maxLines: 2,
          ),
          const SizedBox(height: 12),
          Expanded(child: Center(child: example.widget)),
        ],
      ),
    );
  }
```

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

### Example pubspec.yaml dependency

Source: https://pub.dev/packages/mix/versions/1.4.1/install

Illustrates how the 'mix' package dependency is declared in a project's pubspec.yaml file after running the installation command.

```yaml
dependencies:
  mix: ^1.4.1
```

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

### Build Main Page Layout with Filtering

Source: https://pub.dev/packages/mix/versions/2.0.0-beta.1/example

The main build method for the examples page. It sets up the scaffold, app bar, category filter chips, and a grid view to display the examples. It handles category selection and filtering.

```dart
@override
  Widget build(BuildContext context) {
    final categories = ['All', ..._examples.map((e) => e.category).toSet()];
    final filteredExamples = _selectedCategory == 'All'
        ? _examples
        : _examples.where((e) => e.category == _selectedCategory).toList();

    return CustomScaffold(
      appBar: const CustomAppBar(title: 'Mix Examples'),
      body: Column(
        children: [
          // Category filter buttons
          Container(
            padding: const EdgeInsets.all(16),
            child: Wrap(
              spacing: 8,
              children: categories.map((category) {
                final isSelected = _selectedCategory == category;

                return FilterChipButton(
                  label: category,
                  selected: isSelected,
                  onPressed: () {
                    setState(() {
                      _selectedCategory = category;
                    });
                  },
                );
              }).toList(),
            ),
          ),
          // Examples grid
          Expanded(
            child: GridView.builder(
              padding: const EdgeInsets.all(16),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(

```

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

### Mix Package Context Variants Examples

Source: https://pub.dev/packages/mix/versions/2.0.0-beta.1/example

Demonstrates boxes with different contextual states: focused, selected, and disabled. Also includes examples for dark/light theme adaptation and responsive sizing based on screen width.

```dart
ExampleItem(
      title: 'Focused State',
      description: 'Boxes that change color when focused',
      category: 'Context Variants',
      widget: const focused.Example(),
    ),
    ExampleItem(
      title: 'Selected State',
      description: 'Box that toggles selected state',
      category: 'Context Variants',
      widget: const selected.Example(),
    ),
    ExampleItem(
      title: 'Disabled State',
      description: 'Disabled box with grey color',
      category: 'Context Variants',
      widget: const disabled.Example(),
    ),
    ExampleItem(
      title: 'Dark/Light Theme',
      description: 'Boxes that adapt to theme changes',
      category: 'Context Variants',
      widget: const dark_light.Example(),
    ),
    ExampleItem(
      title: 'Selected Toggle',
      description: 'Beautiful toggle button with selected state',
      category: 'Context Variants',
      widget: const selected_toggle.Example(),
    ),
    ExampleItem(
      title: 'Responsive Size',
      description: 'Dynamic sizing based on screen width',
      category: 'Context Variants',
      widget: const responsive_size.Example(),
    ),
```

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

### Example pubspec.yaml Dependency

Source: https://pub.dev/packages/mix/versions/1.7.0-beta.0/install

Example of how the Mix package dependency will appear in your project's pubspec.yaml file after running the add command.

```yaml
dependencies:
  mix: ^1.7.0-beta.0
```

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

### Example pubspec.yaml Dependency Entry

Source: https://pub.dev/packages/mix/versions/1.0.0-beta.11/install

An example of how the Mix package dependency will appear in your project's pubspec.yaml file after running the add command.

```yaml
dependencies:
  mix: ^1.0.0-beta.11
```

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

### Example pubspec.yaml Dependency

Source: https://pub.dev/packages/mix/versions/1.5.3/install

Example of how the Mix package dependency will appear in your project's pubspec.yaml file. This file manages your project's dependencies.

```yaml
dependencies:
  mix: ^1.5.3
```

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

### Example pubspec.yaml Entry

Source: https://pub.dev/packages/mix/versions/1.4.0/install

An example of how the 'mix' package dependency will appear in your project's pubspec.yaml file after adding it using 'dart pub add' or 'flutter pub add'.

```yaml
dependencies:
  mix: ^1.4.0
```

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

### Flutter Mix Examples Grid View

Source: https://pub.dev/packages/mix/versions/2.0.0-dev.1/example

This Flutter code defines a widget that displays a grid of example UI components and animations. It includes functionality for filtering examples by category and dynamically adjusts the grid layout based on screen width. It depends on Flutter's material and widgets libraries.

```dart
class MixExamples extends StatefulWidget {
  const MixExamples({
    super.key,
  });

  @override
  State<MixExamples> createState() => _MixExamplesState();
}

class _MixExamplesState extends State<MixExamples> {
  String _selectedCategory = 'All';

  final List<ExampleItem> _examples = [
    // Design Tokens
    ExampleItem(
      title: 'Design Token - Example',
      description: 'Example of a design token',
      category: 'Design Tokens',
      widget: const designToken.Example(),
    ),
    // Animations
    ExampleItem(
      title: 'Animation - Curved 0',
      description: 'Box that animates on hover',
      category: 'Animations',
      widget: const animCurved0.Example(),
    ),
    ExampleItem(
      title: 'Animation - Curved 1',
      description: 'Box that animates on appear',
      category: 'Animations',
      widget: const animCurved1.Example(),
    ),
    ExampleItem(
      title: 'Animation - Phase 0',
      description: 'Box that animates on hover',
      category: 'Animations',
      widget: const animPhase0.BlockAnimation(),
    ),
    ExampleItem(
      title: 'Animation - Phase 1',
      description: 'Box that animates on appear',
      category: 'Animations',
      widget: const animPhase1.SwitchAnimation(),
    ),
    ExampleItem(
      title: 'Animation - Spring',
      description: 'Box that animates on appear',
      category: 'Animations',
      widget: const animSpring.Example(),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    final categories = ['All', ..._examples.map((e) => e.category).toSet()];
    final filteredExamples = _selectedCategory == 'All'
        ? _examples
        : _examples.where((e) => e.category == _selectedCategory).toList();

    return CustomScaffold(
      appBar: const CustomAppBar(title: 'Mix Examples'),
      body: Column(
        children: [
          // Category filter buttons
          Container(
            padding: const EdgeInsets.all(16),
            child: Wrap(
              spacing: 8,
              children: categories.map((category) {
                final isSelected = _selectedCategory == category;
                return FilterChipButton(
                  label: category,
                  selected: isSelected,
                  onPressed: () {
                    setState(() {
                      _selectedCategory = category;
                    });
                  },
                );
              }).toList(),
            ),
          ),
          // Examples grid
          Expanded(
            child: GridView.builder(
              padding: const EdgeInsets.all(16),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: MediaQuery.of(context).size.width > 800 ? 3 : 2,
                crossAxisSpacing: 16,
                mainAxisSpacing: 16,
                childAspectRatio: 0.9,
              ),
              itemCount: filteredExamples.length,
              itemBuilder: (context, index) {
                final example = filteredExamples[index];
                return _buildExampleCard(example);
              },
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildExampleCard(ExampleItem example) {
    return Padding(
      padding: const EdgeInsets.all(12),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            example.title,
            style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
          ),
          const SizedBox(height: 8),
          Text(
            example.description,
            style: const TextStyle(fontSize: 12, color: Colors.grey),
            maxLines: 2,
            overflow: TextOverflow.ellipsis,
          ),
          const SizedBox(height: 12),
          Expanded(child: Center(child: example.widget)),
        ],
      ),
    );
  }
}

```

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

### Mix Package Design Tokens Example

Source: https://pub.dev/packages/mix/versions/2.0.0-beta.1/example

Demonstrates the usage of design tokens for maintaining consistent styling across the application. This promotes a unified look and feel.

```dart
ExampleItem(
      title: 'Design Tokens',
      description: 'Using design tokens for consistent styling',
      category: 'Design System',
      widget: const theme_tokens.Example(),
    ),
```

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

### Example pubspec.yaml Entry for 'mix'

Source: https://pub.dev/packages/mix/versions/1.0.0-beta.8/install

Illustrates how the 'mix' package dependency is represented in a project's pubspec.yaml file after running the add command.

```yaml
dependencies:
  mix: ^1.0.0-beta.8
```

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

### Context Variants Examples - Flutter

Source: https://pub.dev/packages/mix/versions/2.0.0-dev.2/example

Demonstrates different visual states and contexts for UI elements, including focused, selected, disabled, and theme-adaptive appearances. These examples utilize Flutter widgets and are part of the Mix package's context variant showcase.

```dart
ExampleItem(
      title: 'Focused State',
      description: 'Boxes that change color when focused',
      category: 'Context Variants',
      widget: const focused.Example(),
    ),
    ExampleItem(
      title: 'Selected State',
      description: 'Box that toggles selected state',
      category: 'Context Variants',
      widget: const selected.Example(),
    ),
    ExampleItem(
      title: 'Disabled State',
      description: 'Disabled box with grey color',
      category: 'Context Variants',
      widget: const disabled.Example(),
    ),
    ExampleItem(
      title: 'Dark/Light Theme',
      description: 'Boxes that adapt to theme changes',
      category: 'Context Variants',
      widget: const dark_light.Example(),
    ),
```

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

### Example pubspec.yaml Dependency

Source: https://pub.dev/packages/mix/versions/2.0.0-dev.2/install

An example snippet showing how the Mix package dependency is added to the `pubspec.yaml` file in a Dart or Flutter project.

```yaml
dependencies:
  mix: ^2.0.0-dev.2
```

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

### Example pubspec.yaml dependency for 'mix'

Source: https://pub.dev/packages/mix/versions/1.1.1/install

An example of how the 'mix' package dependency is represented in a project's pubspec.yaml file. This ensures the package is correctly linked for the project.

```yaml
dependencies:
  mix: ^1.1.1
```

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

### Flutter Mix Theme and Styled Widget Example

Source: https://pub.dev/packages/mix/example

Demonstrates how to set up a MixTheme with custom color tokens and use StyledIcon and StyledText widgets with conditional styling based on breakpoints. This example showcases basic styling, animation, and responsive design principles within the mix framework.

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

const primary = ColorToken('primary');

void main() {
  runApp(
    MixTheme(
      data: MixThemeData(
        colors: {
          primary: Colors.blue,
        },
      ),
      child: const MyApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.ltr,
      child: Center(
        child: FlexBox(
          style: style(),
          direction: Axis.horizontal,
          children: const [
            StyledIcon(Icons.image),
            StyledText('Hello World'),
          ],
        ),
      ),
    );
  }
}

Style style() => Style(
      $icon.color.red(),
      $flexbox
        ..flex.direction(Axis.horizontal)
        ..flex.mainAxisSize.min(),
      $on.breakpoint(const Breakpoint(minWidth: 0, maxWidth: 365))(
        $flexbox.flex.direction(Axis.vertical),
      ),
    ).animate(
      duration: const Duration(milliseconds: 200),
      curve: Curves.easeInOut,
    );

```

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

### Example pubspec.yaml Dependency

Source: https://pub.dev/packages/mix/versions/1.1.3/install

An example of how the 'mix' package dependency appears in your project's pubspec.yaml file after running the 'pub add' command.

```yaml
dependencies:
  mix: ^1.1.3
```

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

### Flutter Widget without Mix

Source: https://pub.dev/packages/mix/versions/1.0.0-beta.12/example

Illustrates the traditional Flutter approach to creating a custom widget with similar styling and hover effects as the Mix example. This code involves more verbose setup, including `StatefulWidget`, `MouseRegion`, `AnimatedContainer`, and explicit `Theme` and `Color` usage. It highlights the complexity Mix aims to simplify.

```dart
class CustomWidget extends StatefulWidget {
  const CustomWidget({
    super.key,
  });

  @override
  _CustomWidgetState createState() => _CustomWidgetState();
}

class _CustomWidgetState extends State<CustomWidget> {
  bool _isHover = false;
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final colorScheme = Theme.of(context).colorScheme;

    return MouseRegion(
      onEnter: (event) {
        setState(() => _isHover = true);
      },
      onExit: (event) {
        setState(() => _isHover = false);
      },
      child: Material(
        elevation: _isHover ? 2 : 10,
        child: AnimatedContainer(
          curve: Curves.linear,
          duration: const Duration(milliseconds: 100),
          height: 100,
          padding:
              _isHover ? const EdgeInsets.all(20) : const EdgeInsets.all(0),
          margin: const EdgeInsets.symmetric(vertical: 10),
          decoration: BoxDecoration(
            color: _isHover ? colorScheme.secondary : colorScheme.primary,
            borderRadius: BorderRadius.circular(10),
          ),
          child: Text(
            'Custom Widget',
            style: Theme.of(context).textTheme.button?.copyWith(
                  color:
                      _isHover ? colorScheme.onSecondary : colorScheme.onPrimary,
                ),
          ),
        ),
      ),
    );
  }
}

```

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

### Mix Package Gradient Examples

Source: https://pub.dev/packages/mix/versions/2.0.0-beta.1/example

Illustrates different types of gradient effects including linear, radial, and sweep gradients. These examples showcase the visual possibilities for backgrounds and fills.

```dart
ExampleItem(
      title: 'Linear Gradient',
      description: 'Beautiful purple-to-pink gradient with shadow',
      category: 'Gradients',
      widget: const gradient_linear.Example(),
    ),
    ExampleItem(
      title: 'Radial Gradient',
      description: 'Orange radial gradient with focal points',
      category: 'Gradients',
      widget: const gradient_radial.Example(),
    ),
    ExampleItem(
      title: 'Sweep Gradient',
      description: 'Colorful sweep gradient creating rainbow effect',
      category: 'Gradients',
      widget: const gradient_sweep.Example(),
    ),
```

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

### Flutter Mix: Utility-First Padding Examples

Source: https://pub.dev/packages/mix/index

Provides examples of using the utility-first approach for padding in Flutter with the Mix package. It demonstrates setting padding on all sides, specific axes, and individual sides.

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

```

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

### Mix Package Animation Examples

Source: https://pub.dev/packages/mix/versions/2.0.0-beta.1/example

Showcases various animation types including hover-triggered scaling, automatic scaling on load, multi-phase tap animations, animated switches, and spring physics-based animations.

```dart
ExampleItem(
      title: 'Hover Scale Animation',
      description: 'Box that scales up smoothly when hovered',
      category: 'Animations',
      widget: const hover_scale.Example(),
    ),
    ExampleItem(
      title: 'Auto Scale Animation',
      description: 'Box that automatically scales on load',
      category: 'Animations',
      widget: const auto_scale.Example(),
    ),
    ExampleItem(
      title: 'Tap Phase Animation',
      description: 'Multi-phase animation triggered by tap',
      category: 'Animations',
      widget: const tap_phase.BlockAnimation(),
    ),
    ExampleItem(
      title: 'Animated Switch',
      description: 'Toggle switch with phase-based animation',
      category: 'Animations',
      widget: const animated_switch.SwitchAnimation(),
    ),
    ExampleItem(
      title: 'Spring Animation',
      description: 'Bouncy spring physics animation',
      category: 'Animations',
      widget: const spring_anim.Example(),
    ),
```

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

### Example 'pubspec.yaml' Dependency

Source: https://pub.dev/packages/mix/versions/1.5.1/install

Shows an example of how the 'mix' package dependency is represented in a project's `pubspec.yaml` file. This is automatically added when using `dart pub add` or `flutter pub add`.

```yaml
dependencies:
  mix: ^1.5.1
```

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

### Context Variant Widgets - Flutter

Source: https://pub.dev/packages/mix/versions/2.0.0-dev.5/example

Demonstrates widgets with different contextual states such as focused, selected, and disabled. These examples likely utilize a common base widget that adapts its appearance based on these states, providing visual feedback to the user. No specific external dependencies are mentioned, but they are part of a Flutter application.

```dart
ExampleItem(
      title: 'Focused State',
      description: 'Boxes that change color when focused',
      category: 'Context Variants',
      widget: const focused.Example(),
    ),
    ExampleItem(
      title: 'Selected State',
      description: 'Box that toggles selected state',
      category: 'Context Variants',
      widget: const selected.Example(),
    ),
    ExampleItem(
      title: 'Disabled State',
      description: 'Disabled box with grey color',
      category: 'Context Variants',
      widget: const disabled.Example(),
    ),
```

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

### Example pubspec.yaml Dependency

Source: https://pub.dev/packages/mix/versions/1.0.0-beta.4/install

Shows the format of the dependency entry that is added to the 'pubspec.yaml' file when using 'dart pub add' or 'flutter pub add'.

```yaml
dependencies:
  mix: ^1.0.0-beta.4
```

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

### Example pubspec.yaml Dependency

Source: https://pub.dev/packages/mix/_annotations/install

Example of how the mix_annotations dependency will appear in a project's pubspec.yaml file after being added using 'dart pub add' or 'flutter pub add'.

```yaml
dependencies:
  mix_annotations: ^1.7.0
```

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

### Flutter ExampleItem Data Model

Source: https://pub.dev/packages/mix/versions/2.0.0-dev.1/example

This Dart code defines a simple data model class 'ExampleItem' used to hold information about each example component. It includes properties for title, description, category, and the widget itself. This class is a plain Dart object and has no external dependencies.

```dart
class ExampleItem {
  final String title;
  final String description;
  final String category;
  final Widget widget;

  const ExampleItem({
    required this.title,
    required this.description,
    required this.category,
    required this.widget,
  });
}

```

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

### Example pubspec.yaml Dependency

Source: https://pub.dev/packages/mix/versions/1.0.0-beta.6/install

Example of how the Mix package dependency is declared in a project's pubspec.yaml file. This configuration is automatically managed by `dart pub add` or `flutter pub add`.

```yaml
dependencies:
  mix: ^1.0.0-beta.6
```

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

### Example pubspec.yaml Dependency Entry

Source: https://pub.dev/packages/mix/install

This snippet shows how the mix dependency will appear in your `pubspec.yaml` file after running `flutter pub add mix`.

```yaml
dependencies:
  mix: ^1.7.0
```

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

### Theme Adaptive Widgets - Flutter

Source: https://pub.dev/packages/mix/versions/2.0.0-dev.5/example

Showcases widgets that adapt their appearance to different themes, specifically dark and light modes. This functionality is crucial for creating applications with a consistent look and feel across various user preferences. These examples are implemented in Dart for Flutter.

```dart
ExampleItem(
      title: 'Dark/Light Theme',
      description: 'Boxes that adapt to theme changes',
      category: 'Context Variants',
      widget: const dark_light.Example(),
    ),
```

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

### Example pubspec.yaml Dependency

Source: https://pub.dev/packages/mix/versions/1.4.6/install

Shows how the 'mix' package dependency is represented in a project's pubspec.yaml file after running the add command. This specifies the version of the mix package required.

```yaml
dependencies:
  mix: ^1.4.6
```

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

### Example pubspec.yaml Dependency

Source: https://pub.dev/packages/mix/versions/1.0.0-beta.14/install

Shows how the Mix package is added as a dependency in a project's pubspec.yaml file. This entry ensures that the Mix package is included when the project dependencies are fetched.

```yaml
dependencies:
  mix: ^1.0.0-beta.14
```

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

### Mix vs. Without Mix: Widget Styling in Flutter

Source: https://pub.dev/packages/mix/versions/1.0.0-beta.11/example

Demonstrates how to create a custom widget with styling and hover effects using the Mix package compared to the traditional Flutter approach. Mix simplifies style definitions, reducing boilerplate code. The 'With Mix' example uses a declarative style API, while the 'Without Mix' example uses standard Flutter widgets and state management.

```dart
class CustomMixWidget extends StatelessWidget {
  const CustomMixWidget({super.key});

  @override
  Widget build(BuildContext context) {
    final style = Style(
      height(100),
      marginVertical(10),
      elevation(10),
      borderRadius(10),
      backgroundColor($md.colorScheme.primary()),
      text.style($button()),
      text.style.color($md.colorScheme.onPrimary()),
      onHover(
        elevation(2),
        padding(20),
        backgroundColor($md.colorScheme.secondary()),
        text.style.color($md.colorScheme.onSecondary()),
      ),
    );
    return Box(
      mix: style,
      child: const TextMix('Custom Widget'),
    );
  }
}

```

```dart
class CustomWidget extends StatefulWidget {
  const CustomWidget({
    super.key,
  });

  @override
  _CustomWidgetState createState() => _CustomWidgetState();
}

class _CustomWidgetState extends State<CustomWidget> {
  bool _isHover = false;
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final colorScheme = Theme.of(context).colorScheme;

    return MouseRegion(
      onEnter: (event) {
        setState(() => _isHover = true);
      },
      onExit: (event) {
        setState(() => _isHover = false);
      },
      child: Material(
        elevation: _isHover ? 2 : 10,
        child: AnimatedContainer(
          curve: Curves.linear,
          duration: const Duration(milliseconds: 100),
          height: 100,
          padding:
              _isHover ? const EdgeInsets.all(20) : const EdgeInsets.all(0),
          margin: const EdgeInsets.symmetric(vertical: 10),
          decoration: BoxDecoration(
            color: _isHover ? colorScheme.secondary : colorScheme.primary,
            borderRadius: BorderRadius.circular(10),
          ),
          child: Text(
            'Custom Widget',
            style: Theme.of(context).textTheme.button?.copyWith(
                  color: _isHover
                      ? colorScheme.onSecondary
                      : colorScheme.onPrimary,
                ),
          ),
        ),
      ),
    );
  }
}

```

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

### Add mix_annotations Dependency in Dart

Source: https://pub.dev/packages/mix/_annotations/versions/0.2.0/install

This command adds the mix_annotations package as a dependency to your Dart project. It modifies your pubspec.yaml file and runs an implicit `dart pub get` to fetch the package. Ensure you have Dart SDK installed.

```bash
dart pub add mix_annotations
```

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

### ExampleItem Data Model in Dart

Source: https://pub.dev/packages/mix/versions/2.0.0-beta.1/example

This Dart code defines a simple data model class `ExampleItem` used to represent individual examples or components within a design system. It holds properties for title, description, category, and the associated Flutter Widget. The class uses named parameters for easy instantiation.

```dart
class ExampleItem {
  final String title;
  final String description;
  final String category;
  final Widget widget;

  const ExampleItem({
    required this.title,
    required this.description,
    required this.category,
    required this.widget,
  });
}
```

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

### Example pubspec.yaml Dependency

Source: https://pub.dev/packages/mix/versions/1.0.0-beta.3/install

A snippet showing how the 'mix' package dependency appears in a project's pubspec.yaml file after being added using 'dart pub add' or 'flutter pub add'.

```yaml
dependencies:
  mix: ^1.0.0-beta.3
```

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

### Example pubspec.yaml Dependency

Source: https://pub.dev/packages/mix/versions/1.3.0/install

Illustrates how the 'mix' package dependency appears in the pubspec.yaml file after being added. This line specifies the package and its version constraint.

```yaml
dependencies:
  mix: ^1.3.0
```

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

### Example pubspec.yaml Dependency

Source: https://pub.dev/packages/mix/versions/1.5.4/install

Example of how the 'mix' package dependency is declared in a Flutter or Dart project's pubspec.yaml file. This ensures the package is included in the project's build.

```yaml
dependencies:
  mix: ^1.5.4
```

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

### Example pubspec.yaml Dependency

Source: https://pub.dev/packages/mix/versions/0.0.5/install

This snippet shows how the 'mix' package dependency will be added to your project's pubspec.yaml file. This is an automatically managed section by Flutter.

```yaml
dependencies:
  mix: ^0.0.5
```

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

### Example pubspec.yaml Dependency

Source: https://pub.dev/packages/mix/versions/1.0.0-beta.1/install

Illustrates the line that will be added to your project's pubspec.yaml file when the 'mix' package is added as a dependency. This entry specifies the package name and its version constraint.

```yaml
dependencies:
  mix: ^1.0.0-beta.1
```

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

### Add mix Dependency to pubspec.yaml

Source: https://pub.dev/packages/mix/versions/1.0.0-beta.5/install

Example of how the 'mix' package dependency is declared in the pubspec.yaml file.

```yaml
dependencies:
  mix: ^1.0.0-beta.5
```

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

### Example pubspec.yaml Dependency

Source: https://pub.dev/packages/mix/versions/1.2.0/install

This snippet shows how the 'mix' package dependency is represented in your project's pubspec.yaml file. It specifies the version constraint for the package.

```yaml
dependencies:
  mix: ^1.2.0
```

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

### Specify mix Dependency in pubspec.yaml

Source: https://pub.dev/packages/mix/versions/0.0.1-dev.2/install

Example of how the 'mix' package dependency is declared in the pubspec.yaml file. This ensures the correct version is used for your project.

```yaml
dependencies:
  mix: ^0.0.1-dev.2
```

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

### Example pubspec.yaml Dependency

Source: https://pub.dev/packages/mix/versions/1.0.0-beta.12/install

This snippet shows how the mix package dependency will appear in your project's pubspec.yaml file after running the add command. It specifies the package name and version constraint.

```yaml
dependencies:
  mix: ^1.0.0-beta.12

```

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

### Example pubspec.yaml dependency

Source: https://pub.dev/packages/mix/versions/1.0.0/install

Illustrates how the 'mix' package dependency will appear in your pubspec.yaml file after running the add command. This line indicates the specified version constraint for the mix package.

```yaml
dependencies:
  mix: ^1.0.0
```

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

### Example pubspec.yaml dependency

Source: https://pub.dev/packages/mix/versions/1.0.0-beta.9/install

Shows how the 'mix' package dependency is represented in a project's pubspec.yaml file. This line is automatically added when using `dart pub add` or `flutter pub add`.

```yaml
dependencies:
  mix: ^1.0.0-beta.9
```

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

### Example pubspec.yaml Dependency Entry

Source: https://pub.dev/packages/mix/versions/0.0.4/install

This snippet shows how the Mix package dependency is represented in a Flutter project's `pubspec.yaml` file. This line is automatically added when using `flutter pub add mix`.

```yaml
dependencies:
  mix: ^0.0.4
```

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

### Example pubspec.yaml Dependency

Source: https://pub.dev/packages/mix/versions/1.4.4/install

Illustrates how the Mix package dependency is represented in a project's `pubspec.yaml` file. This format is automatically added by `dart pub add` or `flutter pub add` commands.

```yaml
dependencies:
  mix: ^1.4.4
```

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

### Responsive Sizing Widget - Flutter

Source: https://pub.dev/packages/mix/versions/2.0.0-dev.5/example

Illustrates a widget that dynamically adjusts its size based on the screen width. This is a fundamental aspect of responsive UI design, ensuring that components look and function well on various devices and screen resolutions. Implemented in Dart for Flutter.

```dart
ExampleItem(
      title: 'Responsive Size',
      description: 'Dynamic sizing based on screen width',
      category: 'Context Variants',
      widget: const responsive_size.Example(),
    ),
```

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

### Pubspec.yaml Dependency Entry

Source: https://pub.dev/packages/mix/versions/1.0.0-beta.15/install

Example of how the 'mix' package dependency will appear in your project's pubspec.yaml file after running the 'dart pub add mix' or 'flutter pub add mix' command.

```yaml
dependencies:
  mix: ^1.0.0-beta.15
```

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

### Add mix Dependency to Flutter Project

Source: https://pub.dev/packages/mix/install

This command adds the mix package as a dependency to your Flutter project. It modifies the pubspec.yaml file and runs `flutter pub get`.

```bash
$ flutter pub add mix
```

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

### Example pubspec.yaml Dependency

Source: https://pub.dev/packages/mix/versions/0.9.0/install

This shows how the mix package dependency will appear in your Flutter project's pubspec.yaml file after running `flutter pub add mix`. It specifies the version constraint.

```yaml
dependencies:
  mix: ^0.9.0
```

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

### Declare mix Dependency in pubspec.yaml

Source: https://pub.dev/packages/mix/versions/1.4.5/install

Example of how the 'mix' package dependency is declared in the pubspec.yaml file for a Dart or Flutter project.

```yaml
dependencies:
  mix: ^1.4.5
```