Mix 1.4 "Norman"

Future releases will be named after influential figures in the UI/UX field, showcasing their contributions and encouraging our community to learn more about their impactful work, and it is with great honor that we name our first release after Don Norman.

Don Norman, a pioneering figure in the field of user interface design, has profoundly influenced the way we interact with technology. As the author of "The Design of Everyday Things," his work has illuminated the principles of user-centered design, emphasizing the importance of intuitive, accessible, and human-centric interfaces. Norman's insights have guided designers worldwide, shaping products that are not only functional but also delightful to use, making him a cornerstone of modern UI/UX design.

Release Notes

Highlights

New Feature: Spec Modifiers

The Spec Modifiers feature in Mix is a powerful and flexible tool that enhances the way you can style and modify specific widgets within your widget tree. This feature allows for precise control over individual elements, making it easier to create complex and dynamic layouts.

Key Points:

• Targeted styling: Apply modifiers to specific widget types without affecting others.
• Hierarchical control: Modify child widgets from parent styles, allowing for more organized and centralized styling.
• Simplified complex layouts: Easily handle intricate designs by applying transformations and other modifications to specific widgets.

Pressable(
  onPress: () {},
  child: Box(
    style: Style(
      $icon.wrap.scale(1),
      $on.hover(
        $icon.wrap.scale(0.9),
      ),
      $on.press(
        $icon.wrap.scale(1.5),
      ),
    ).animate(curve: Curves.decelerate),
    child: const StyledIcon(
      Icons.check,
    ),
  ),
);

The examples provided demonstrate the versatility of Spec Modifiers. You can scale a Box widget or target a specific StyledIcon within a Box, applying a scale transformation only to the icon. This level of granular control is invaluable for creating polished and responsive user interfaces.

Impact of Spec Modifiers

Spec Modifiers are a game-changer for Mix as they allow great support for third-party libraries and custom widgets. They provide a way to create a more consistent and maintainable codebase, making it easier to manage complex layouts and interactions.

This is an example of the use with the flutter_animate package.

final style = Style(
    $animate()
        .fadeIn(duration: 600.ms)
        .then(
          delay: 200.ms,
        )
        .slide(),
    );

We are excited to see how developers will leverage Spec Modifiers to create more dynamic and engaging user interfaces. Also, we are currently planning a package that provides official support for flutter_animate.

Read more about Spec Modifiers in our documentation.

New Feature: Widget Modifiers Codegen

As we have matured some of these concepts, it has become clear that Widget Modifiers can reuse a lot of the same infrastructure as Specs, and with that, we have brought code generation to Widget Modifiers, making it easier than ever to create and use them.

Here is the implementation of our Padding modifier, which wraps a widget with a Padding widget.

part 'padding_widget_modifier.g.dart';

@MixableSpec()
final class PaddingModifierSpec extends WidgetModifierSpec<PaddingModifierSpec>
    with _$PaddingModifierSpec {
  final EdgeInsetsGeometry padding;

  const PaddingModifierSpec([EdgeInsetsGeometry? padding])
      : padding = padding ?? EdgeInsets.zero;

  @override
  Widget build(Widget child) {
    return Padding(padding: padding, child: child);
  }
}

With code generation, it is easier than ever to create custom Widget Modifiers as the creation of attributes and utilities are all handled for you.

New Feature: The Assist to Extract Attributes

Supercharge Your Mix Code Refactoring!
We're excited to introduce the new assist in Mix Lint: Extract Attributes, a powerful new tool designed to enhance your Mix development experience.

Key Points:

• Instant Refactoring: Automatically available when you need it, right in your Style's constructor scope.
• Versatile Extraction: Works across various code structures including field declarations, method declarations, top-level variables, and function declarations.
• Improved Code Structure: Easily separate style attributes into distinct Style instances for better organization.
• Efficiency Boost: Streamline your workflow and save time with this intelligent refactoring assistant.

Screen.Recording.2024-07-25.at.15.25.50.mov

Read more about the new assist to help you Extract Attributes in our documentation

New Feature: Override The Default Modifier Order

Introducing defaultOrderOfModifiers in MixThemeData!

Key Points:

• App-Wide Consistency: Override the default order in which modifiers are applied globally across all styled widgets.
• Simplified Styling: Eliminate the need to specify orderOfModifiers for each individual StyledWidget.
• Optimized Workflow: Boost productivity by defining modifier order once at the theme level.

final overrideOrderTheme = MixThemeData(
  defaultOrderOfModifiers: [
    SizedBoxModifierSpec,
    ClipRectModifierSpec,
    TransformModifierSpec,
  ],
);

Read more about how to override the default order of modifiers in our documentation

New Feature: Controlling Widget State

The Controlling Widget State feature in Mix is an excellent addition that enhances the flexibility and power of custom widget creation. It provides a robust way to manage widget states using the MixWidgetStateController, allowing for fine-grained control over press, long press, focus, and hover interactions

Key Points:

• Improved user interaction: By easily handling press, long press, focus, and hover states, developers can create more interactive UI elements.
• Seamless integration with Mix: The feature works harmoniously with Mix's Style system, allowing for dynamic styling based on widget states.
• Clean separation of concerns: The implementation separates the widget logic from its presentation, promoting better code organization.

Read more about Controlling Widget State in our documentation

New Feature: Enhanced Debugging with Diagnosticable

We have improved debugging capabilities and the overall development experience. You can now check all attributes that a Mix widget holds.

Key Points:

Improved Visibility: Key classes now implement diagnosticable, providing deeper insights into object states.
Intelligent Introspection: Leverage Flutter's powerful diagnostic tools to inspect your Mix objects.
Design Tokens Support: DevTools can identify whether a value originated from a Design token or was directly applied.

Screen.Recording.2024-07-25.at.23.39.32.mov

Packages Updates

mix - v1.4.0

• FEAT: Code generation for Widget Modifiers (#396).
• FEAT: Ability to pass MixWidgetStateController to SpecBuilder (#391).
• FEAT: Interactive widget state by default (#384).
• FEAT: MixThemeData can alter default order of modifiers (#380).
• FEAT: Dto utility generation now adds constructor and static methods (#377).
• FEAT: ColorSwatchToken and other token improvements (#378).
• REFACTOR: Code gen more lint friendly dart code (#399).
• FIX: Gestures propagation for GestureMixStateWidget (#394).
• FIX: Normalization of order of modifier when applied to a Styled Widget (#389).
• FIX: Animations of Stack and Flex (#388).
• FIX: Review the order of modifiers adding FlexibleModifier, PaddingModifier, and RotatedModifier (#379).

mix_annotations - v0.2.1

• FEAT: MixableSpec now supports withCopyWith, withEquality, withLerp, and skipUtility (#396).

mix_generator - v0.2.2

• FEAT: Code generation for Widget Modifiers (#396).
• FEAT: Dto utility generation now adds constructor and static methods (#377).
• FEAT: ColorSwatchToken and other token improvements (#378).
• REFACTOR: Code gen more lint friendly dart code (#399) and (#395).
• FIX: Nullable merge expressions and updates debug properties (#392).

mix_lint - v0.1.1

• FEAT: Improvements for the "extract attributes" assist (#387).
• FEAT: implement quick fix for mix_attributes_ordering rule (#381).
• FEAT: ColorSwatchToken and other token improvements (#378).

remix - v0.0.2

• FEAT: Ability to pass MixWidgetStateController to SpecBuilder (#391).
• FEAT: Foundational components (#317).

What's Changed

• feat: ColorSwatchToken and other token improvements by @leoafarias in #378
• fix: add flexible as the first in the order of modifiers by @tilucasoli in #379
• feat: create an assist to extract attributes from a Style by @tilucasoli in #383
• feat: implement quick fix for mix_attributes_ordering rule by @tilucasoli in #381
• feat: Dto utility generation now adds constructor and static methods by @leoafarias in #377...

v1.3.0

Release Notes

mix

• REFACTOR: use timer instead of future (#374).
• REFACTOR: bump flutter version to 3.19.0 (#365).
• FEAT: modifiers in spec (#333).
• FEAT: add attribute to fontVariantion (#371).

mix_annotations

• REFACTOR: bump flutter version to 3.19.0 (#365).

mix_generator

• REFACTOR: bump flutter version to 3.19.0 (#365).
• FEAT: modifiers in spec (#333).

mix_lint

• REFACTOR: bump flutter version to 3.19.0 (#365).

What's Changed

• fix: website resposiveness by @tilucasoli in #350
• chore: rewrite publish pipeline to use Melos by @tilucasoli in #344
• ci: husky integration by @leoafarias in #367
• refactor: bump flutter version to 3.19.0 by @tilucasoli in #365
• docs: Update theming.mdx tutorial by @dluksza in #368
• feat: add attribute to fontVariantion by @tilucasoli in #371
• feat: modifiers in spec by @tilucasoli in #333
• refactor: use timer instead of future by @tilucasoli in #374
• feat: add support to debugFillProperties by @tilucasoli in #375
• chore: version packages by @github-actions in #376

New Contributors

• @dluksza made their first contribution in #368

Full Changelog: mix-v1.2.0...mix-v1.3.0

1.2.0

• FIX: Exception when there is no children on flex (#345).
• FIX: Added remaining params to callable specs and modifiers (#332).
• FIX: Gap resolve SpaceToken in flex attribute (#327).
• FIX: Improved merge behavior between ShapeDecoration and BoxDecoration (#316).
• FEAT: Pressable supports keyboard events (#346).

v1.1.3

What's Changed

• Fix: Improved merge behavior between ShapeDecoration and BoxDecoration by @leoafarias in #316
• Chore: Colors, Spacing, and Border cleanup and improvements by @leoafarias in #328
• Update melos, scripts, and pipeline by @tilucasoli in #324
• Updated pipeline to use fvm by @leoafarias in #329
• Chore: Cleaned up pressable and widget state by @leoafarias in #331
• Add utility methods for defining width, height, and square size in SizedBoxModifierUtility by @Maksimka101 in #323
• Fix: Gap resolve in flex attribute by @tilucasoli in #327
• Fix: callable specs and modifiers by @tilucasoli in #332

mix_generator Changes

• Fix: Get correct type override from MixableDto by @leoafarias in #315
• Enhancement: Improved Dto resolved type lookup logic by @leoafarias in #318
• Feature: Class and Enum utility generation by @leoafarias in #325
• Feature: Generate List of value extension of a Dto by @leoafarias in #330

New Contributors

• @Maksimka101 made their first contribution in #323

Full Changelog: v1.1.2...v1.1.3

v1.1.2

What's Changed

• Fix: Resolved conflict on generators when not configured on build.yaml by @leoafarias in #312

Full Changelog: v1.1.1...v1.1.2

1.1.1

What's Changed

• Fix/animated spec fix by @leoafarias in #308
• Added support for spec attributes by @leoafarias in #309
• Added spec call method by @leoafarias in #311

Full Changelog: v1.1.0...v1.1.1

1.1.0

Changelog

• Mix now uses mix_generator for Spec and Dto generation.
• Added missing utilities for IconSpec and ImageSpec.
• Added missing ShapeBorders.
• Improved ShapeBorderDto merge behavior.
• Bumped minimum Dart SDK to 3.0.6.
• Added animated utility to Spec.

New Contributors

• @techinpark made their first contribution in #303

Full Changelog: v1.0.0...v1.1.0

Mix 1.0

It's finally here! 🎉

A love letter to Flutter. Mix is meant to broaden the possibilities and bring proven ways of styling to the framework. We believe this helps create a more robust ecosystem for custom design systems and UI libraries.

An Expressive Styling System for Flutter

Mix is a simple and intuitive styling system for Flutter, enabling the creation of beautiful and consistent UIs with ease.

Mix brings industry-proven design system concepts to Flutter. It separates style semantics from widgets while maintaining an easy-to-understand and manageable relationship between them.

• Write cleaner, more maintainable styling definitions.
• Easily compose, merge, and apply styles across widgets, and files.
• Apply styles conditionally based on the BuildContext.

Why Mix?

Flutter developers often face challenges when it comes to styling widgets and maintaining a consistent look and feel across their apps. Flutter is heavily dependent on the Material Design System and theming, and that can be challenging, especially when creating your own design system.

Mix addresses these challenges by creating a styling system that uses utility functions for a more intuitive and composable way to style. This approach can be kept consistent across widgets and files.

Key Features

• Freedom to style: Define your widget's look outside the build method, no limitations.
• Consistency everywhere: Reuse styles across your app for a cohesive look and feel.
• Adapt to change: Modify your design system with ease using composable styles.
• Responsive by default: Create adaptive designs effortlessly with style variants.
• Safe and sound: Enjoy type-safe styling through utilities, catch errors early, and code with confidence.

Is Mix Right for Me?

Mix focuses on and is optimized for custom styling and the creation of reusable components and design systems. Our goal is not to replace existing Flutter theming for Material and Cupertino, but to provide a more flexible, composable, and intuitive way to design bespoke widgets.

Mix in Action

Mix is already being used in production by apps with millions of users, proving its effectiveness and reliability. Large teams working on custom design systems or multi-brand apps have found Mix particularly beneficial in maintaining consistent styling and reducing code complexity.

Excited about the future

We're continuously improving Mix and have exciting plans for the future. Some of the upcoming features include code generation and integration with other libraries, and the release of our headless widget library which are calling Remix.

We're excited to see what you'll create with Mix. Let's build beautiful apps together!

v1.0.0-beta.15

What's Changed

• update doc by @tilucasoli in #268
• Update theming.mdx by @tilucasoli in #269
• align lerp usage by @tilucasoli in #270
• Feat/last modifications by @tilucasoli in #272
• Group attributes by @tilucasoli in #271
• Added fallback for attribute animation by @leoafarias in #273
• Rename disable to enabled by @tilucasoli in #274
• Doc/interactions state event by @tilucasoli in #275
• Fix/doc updates by @tilucasoli in #276
• Doc updates by @leoafarias in #277
• Grammar corrections in the documentation by @tilucasoli in #278
• Compose workflows by @tilucasoli in #279
• Update Changelog by @tilucasoli in #281
• Update pubspec.yaml by @tilucasoli in #283
• Fix/enviroment bound by @tilucasoli in #284
• Update pubspec.yaml by @tilucasoli in #285

Full Changelog: v1.0.0-beta.14...v1.0.0-beta.15

v1.0.0-beta.14

What's Changed

• Remove deprecated code by @tilucasoli in #259
• Improvemnet/dto merge by @leoafarias in #264
• Rename decorators to modifiers by @tilucasoli in #265

Full Changelog: v1.0.0-beta.13...v1.0.0-beta.14