Skip to content

Mix 1.4 "Norman"
Compare
Choose a tag to compare
@tilucasoli tilucasoli released this 26 Jul 18:03
· 139 commits to main since this release
mix-v1.4.0
260144f

mix-norman-release

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

New Contributors

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

Contributors

leoafarias, oscarspalk, and tilucasoli
Assets 2
Loading