Mix 1.5.0 "Nielsen"

Jakob Nielsen, a leading figure in UI/UX design, transformed the field with his Ten Usability Heuristics and emphasis on user-centered design. His work highlights the importance of intuitive, efficient interfaces and usability testing. Nielsen’s mantra, “users are not like you,” serves as a reminder to prioritize real user needs, making his contributions essential in shaping modern digital experiences.

Release Notes

Highlights

New Feature: Fluent API

The fluent API allows for more expressive and readable code when working with Mix specifications and utilities. It enables chaining of method calls and provides a more intuitive way to configure and build Mix components.

Key Points:

• Simplified and more concise code when defining Mix specifications.
• Improved readability and maintainability of the codebase.
• Enhanced developer experience and productivity.

final style = Style(
  $text.chain
    ..uppercase()
    ..textAlign.center()
    ..style.color.blue()
    ..style.fontSize(20),
);

New Feature: Remove All Previous Spec Modifiers and Color Directives

This feature gives developers greater control over their Styles by allowing them to clear any spec modifier or color directive and start fresh with new ones.

Key Points:

• Added a method to remove all previously applied Spec Modifiers and Color Directives

final style = Style(
  $box.chain
    ..width(100)
    ..height(100)
    ..color.red()
    ..color.withHue(200)
    ..color.withSaturation(0.3)
    ..color.withLightness(0.3)
    ..color.resetDirectives()
    ..color.withAlpha(140)
);

In this example, all previous directives are ignored after the resetDirectives attribute.

Refactor: Generic Brightness Detection

Previously, $on.dark relied on Material design because it was using Theme.of(context), causing issues when using the Cupertino theme. With this update, brightness detection works consistently across different design systems, ensuring better compatibility and reliability.

Key Points:

• Replaced Theme.of(context) with MediaQuery for brightness detection.
• Ensures compatibility with both Material and Cupertino design systems.

What's Changed

• refactor: Rewrite all components in the new Archtecture by @tilucasoli in #467
• feat: Fold MixThemeData into single root by @Solido in #466
• chore: linting by @leoafarias in #474
• feat: create a theme for Remix by @leoafarias in #470
• fix: Style when merged with an AnimatedStyle should generate a AnimatedStyle by @tilucasoli in #472
• feat: Fluent API by @leoafarias in #475
• feat: implement a way to clear inline modifiers by @tilucasoli in #478
• feat: Add more directives to Colors by @tilucasoli in #477
• refactor: Remix was rewritten using Fluent API by @tilucasoli in #476
• feat: Accordion component by @tilucasoli in #433
• feat: Segmented control by @tilucasoli in #479
• chore: consolidate spec attribute and dto by @leoafarias in #480
• fix: Update OnBrightnessVariant to use MediaQuery instead of Theme by @doug-orchard in #471
• fix: reset modifiers and directives when using fluentAPI by @tilucasoli in #482
• feat: transform.translate by @tilucasoli in #484
• feat: remix-styling-configuration by @leoafarias in #483
• chore: version packages by @github-actions in #485
• chore: version packages by @github-actions in #486

New Contributors

• @doug-orchard made their first contribution in #471

Full Changelog: mix-1.4.6...mix-1.5.0

Mix 1.4.6 "Norman"

Pacakges Updates

mix - v1.4.6

• FIX(docs): fix fn level docs for Style::applyVariants (#460).
• FIX: Shadow list animation (#445).
• FIX: SpecModifiers were taking a long time to animate. (#457).
• FEAT: Create mouse cursor Decorator (#263).
• FEAT: Add parameter onEnd for AnimatedStyle (#458).
• FEAT: SingleChildScrollView widget modifier (#427).
• FEAT: Remix improvements and further improvements (#410).

mix_annotations - v0.3.0

• FIX: SpecModifiers were taking a long time to animate. (#457).

mix_generator - v0.3.0

• FIX: SpecModifiers were taking a long time to animate. (#457).
• FIX: Shadow list animation (#445).

What's Changed

• fix: Shadow list animation by @tilucasoli in #445
• chore: Remove example by @tilucasoli in #449
• chore: Update google fonts by @tilucasoli in #450
• refactor: Create a new Architecture for remix's components by @tilucasoli in #446
• ci: Fix lint by @tilucasoli in #451
• feat: SingleChildScrollView widget modifier by @Maksimka101 in #427
• fix: Transform.rotate couldn't be applied as specModifiers by @tilucasoli in #455
• fix: SpecModifiers were taking a long time to animate. by @tilucasoli in #457
• feat: Add parameter onEnd for AnimatedStyle by @tilucasoli in #458
• docs: Fix an outdated comment by @m-sadegh-sh in #456
• docs: Adding $ sign in dart code example by @withden in #459
• fix(docs): Fix fn level docs for Style::applyVariants by @canewsin in #460
• feat: Create Select component by @tilucasoli in #448
• feat: Create mouse cursor Decorator by @tilucasoli in #263
• feat: Add group feature to Radio by @tilucasoli in #435
• chore: version packages by @github-actions in #464

New Contributors

• @m-sadegh-sh made their first contribution in #456
• @withden made their first contribution in #459
• @canewsin made their first contribution in #460

Full Changelog: mix-1.4.5...mix-1.4.6

Mix 1.4.5 "Norman"

Packages Updates

mix - v1.4.5

• FIX: HitTestBehavior when there is an Interectable in the tree (#437).
• FEAT: Create a specific utility to Transform.rotate (#434).
• FEAT: TargetPlatform and web variants (#431).

What's Changed

• feat: Refactor Remix components by @tilucasoli in #428
• docs: review the theming documentation by @tilucasoli in #430
• docs: remove the custom component doc by @tilucasoli in #432
• feat: TargetPlatform and web variants by @leoafarias in #431
• refactor: Remix progress by @tilucasoli in #429
• fix: HitTestBehavior when there is a Interectable in the tree by @tilucasoli in #437
• feat: Create a specific utility to Transform.rotate by @tilucasoli in #434
• chore: version packages by @github-actions in #438
• feat: button supports component builder by @tilucasoli in #444
• chore: Support to Flutter 3.24.0 by @tilucasoli in #440

Full Changelog: mix-1.4.4...mix-1.4.5

Mix 1.4.4 "Norman"

Packages Updates

mix - v1.4.4

• FIX: Pressable disposes controller only if it creates it (#424).

What's Changed

• fix: Pressable disposes controller only if it creates it by @tilucasoli in #424
• chore: version packages by @github-actions in #426

Full Changelog: mix-1.4.3...mix-1.4.4

Mix 1.4.3 "Norman"

Packages Updates

mix - v1.4.3

• FIX: Breakpoint utility merge exception (#421).

What's Changed

• ci: analysis improvements by @leoafarias in #412
• fix: breakpoint utility merge exception by @leoafarias in #421

Full Changelog: mix-1.4.2...mix-1.4.3

Mix 1.4.2 "Norman"

Packages Updates

mix - v1.4.2

• FIX: FlexSpecWidget prioritizes the direction in spec (#414).

What's Changed

• fix: FlexSpecWidget prioritizes the direction in spec by @tilucasoli in #414
• chore: version packages by @github-actions in #418

Full Changelog: mix-1.4.1...mix-1.4.2

Mix 1.4.1 "Norman"

Packages Updates

mix - v1.4.1

• FIX: Added missing widget state utilities (#411).
• FIX: Correct handling of individual border sides (#408).
• DOCS: improve mix theme data features explanations (#404).

mix_generator - v0.2.2+1

• DOCS: improve mix theme data features explanations (#404).

remix - v0.0.2+1

• DOCS: improve mix theme data features explanations (#404).

What's Changed

• chore: version packages by @github-actions in #402
• ci: improvements for publish pipeline by @tilucasoli in #405
• docs: improve mix theme data features explanations by @tilucasoli in #404
• chore: Removed base keyword from attributes by @leoafarias in #406
• docs: Add documentation for extract attributes by @tilucasoli in #403
• fix: Correct handling of individual border sides by @tilucasoli in #408
• refactor: Added missing utilities by @leoafarias in #409
• fix: Added missing widget state utilities by @leoafarias in #411
• chore: version packages by @github-actions in #413

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

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).