Skip to content

Releases: conceptadev/mix

Mix 1.5.2 "Nielsen"

02 Oct 20:45
cc18c6f
Compare
Choose a tag to compare

Packages Updates

mix - v1.5.2

  • REFACTOR: ShapeBorder merge (#490).
  • FEAT: Improve error messages (#491).
  • FEAT: add error state to MixWidgetState (#489).

What's Changed

Full Changelog: mix-1.5.1...mix-1.5.2

Mix 1.5.1 "Nielsen"

26 Sep 13:24
a7a0fcc
Compare
Choose a tag to compare

Packages Updates

mix - v1.5.1

  • FEAT: Add MixOutlinedBorder (#487).

What's Changed

  • feat: Add MixOutlinedBorder by @tilucasoli in #487
  • chore: version packages by @github-actions in #488

Full Changelog: mix-1.5.0...mix-1.5.1

Mix 1.5.0 "Nielsen"

17 Sep 17:52
Compare
Choose a tag to compare
Frame 37@2x

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

New Contributors

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

Mix 1.4.6 "Norman"

27 Aug 12:57
46c351b
Compare
Choose a tag to compare

Packages 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

New Contributors

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

Mix 1.4.5 "Norman"

09 Aug 22:25
0d9bc96
Compare
Choose a tag to compare

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

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

Mix 1.4.4 "Norman"

02 Aug 23:24
92923c6
Compare
Choose a tag to compare

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"

01 Aug 16:35
06e8b62
Compare
Choose a tag to compare

Packages Updates

mix - v1.4.3

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

What's Changed

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

Mix 1.4.2 "Norman"

01 Aug 00:24
2f9c46f
Compare
Choose a tag to compare

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"

30 Jul 14:44
87e009e
Compare
Choose a tag to compare

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"

26 Jul 18:03
Compare
Choose a tag to compare

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

  • 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...
Read more