Skip to content

Releases: btwld/mix

mix-v2.0.1

30 Mar 13:27
@tilucasoli tilucasoli
mix-v2.0.1
b714ecb

Choose a tag to compare

View all tags
mix-v2.0.1 Latest
Latest
image

Mix 2.0.1: The Next Chapter in Flutter Styling

Mix 2.0 introduces a fluent, type-safe styling system for Flutter with first-class variants, built-in animation APIs, and token-based theming. This release modernizes the developer experience by separating style semantics from widget structure while keeping composition ergonomic.

tl;dr

  • New fluent Styler API (BoxStyler, TextStyler, IconStyler, FlexBoxStyler, ImageStyler)
  • Inline dynamic variants (onHovered, onPressed, onDark, breakpoints, platform, and more)
  • Three animation models: implicit, phase, and keyframe
  • Typed design tokens with MixScope
  • Expanded widget and modifier ecosystem

What's Changed

Fluent Styler API

Mix 2.0 replaces prefix-heavy utility declarations with chainable, strongly typed stylers that are easier to discover in IDE autocomplete and safer to refactor.

final card = BoxStyler()
    .color(Colors.white)
    .paddingAll(16)
    .borderRounded(12)
    .onHovered(.color(Colors.grey.shade50))
    .onDark(.color(Colors.grey.shade900));

Box(style: card, child: child);

Callable Stylers

Stylers can be invoked directly as widget factories:

final box = BoxStyler().color(Colors.blue).size(100, 100)

box(child: child); // returns a Box

New Animation APIs

Mix now supports three animation types directly in style definitions, from simple state transitions to full timeline control:

  • Implicit animations for simple state transitions
  • Phase animations for ordered multi-step sequences
  • Keyframe animations for timeline-driven parallel tracks

Implicit (state/variant-driven)

final style = BoxStyler()
    .color(Colors.blue)
    .size(100, 100)
    .animate(.easeInOut(300.ms))
    .onHovered(.color(Colors.deepPurple).size(120, 120));

Phase (event-triggered multi-step flow)

final controller = PhaseAnimationController();
final base = BoxStyler().color(Colors.blue).size(100, 100);

PhaseAnimationBuilder(
  controller: controller,
  phases: [
    PhaseConfig(base.size(80, 80), duration: 150.ms, curve: .easeIn),
    PhaseConfig(base.size(120, 120), duration: 250.ms, curve: .bounceOut),
    PhaseConfig(base, duration: 180.ms, curve: .easeOut),
  ],
  builder: (context, phaseStyle) => Box(style: phaseStyle),
);

Keyframe (timeline + multiple tracks)

KeyframeAnimationBuilder(
  duration: 1200.ms,
  repeat: true,
  keyframes: {
    KeyframeTrack<double>(
      property: KeyframeProperty.iconSize,
      keyframes: [Keyframe(0.0, 40), Keyframe(0.5, 56), Keyframe(1.0, 40)],
    ),
    KeyframeTrack<Color>(
      property: KeyframeProperty.iconColor,
      keyframes: [Keyframe(0.0, Colors.red), Keyframe(1.0, Colors.red.shade800)],
    ),
  },
  builder: (context, keyframeStyle) => StyledIcon(style: baseIcon.merge(keyframeStyle)),
);

See the Animations Guide for full concepts, API details, and additional examples.

Breaking Changes

Mix 2.0 is a major API evolution. Migration from 1.x requires updates.

  • Prefix-based APIs like $box, $text, $on, and $with are replaced by fluent stylers
  • Widget names and style composition patterns may differ from 1.x conventions
  • Existing style declarations must be rewritten to the new chained method format

Migration reference:

Before / After Snapshot

// Before (1.x)
final style = Style(
  $box.color.blue(),
  $box.padding(16),
  $on.hover($box.color.red()),
);
// After (2.0)
final style = BoxStyler()
    .color(Colors.blue)
    .paddingAll(16)
    .onHovered(.color(Colors.red));

Ecosystem

  • mix: Core styling framework
  • mix_annotations: Annotation package for generation
  • mix_generator: build_runner generator for specs/stylers
  • mix_lint: Custom lint rules for Mix best practices

More ecosystem packages and updates are coming soon.

Full Docs

See fluttermix.com for complete guides, widget references, and migration resources.

What's Changed

Read more

Contributors

leoafarias, vercel, and 4 other contributors
Assets 2
Loading

Mix 1.7.0

02 Jul 23:29
@tilucasoli tilucasoli
mix-1.7.0
add08c4
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Choose a tag to compare

View all tags
Mix 1.7.0

image

Highlights

Repository Update: Mix Ecosystem Reorganization

We’ve made an architectural decision to reorganize the Mix ecosystem for better clarity, scalability, and maintenance.

Remix and Naked have been moved to separate repositories, allowing them to evolve independently as standalone design system layers.

The Mix repository will continue to host:

  • mix (core)
  • mix_lint
  • mix_generator
  • mix_annotations

This structure keeps the core styling engine unified, while encouraging modular growth across the ecosystem.

Introducing ComputedStyle: Smarter, Faster Widget Rebuilds in Mix

This update brings a breakthrough performance improvement to the Mix framework:
ComputedStyle and ComputedStyleProvider – a new system that rebuilds only what’s needed, using InheritedModel under the hood.

🚀 What it solves:

Traditional rebuilds could affect entire widget subtrees. With ComputedStyle, we now get:
• Up to 70% fewer unnecessary rebuilds
• O(1) style resolution

This change makes Mix significantly more scalable for large apps.

Cleaner Style API: No More .chain

We’ve simplified the way you write styles in Mix.
You no longer need .chain to compose multiple style elements. 🎉
👇 Before:

Style(
  $box.chain
    ..padding.all(12)
    ..color.red()
    ..border.all.color.redAccent(),
)

✅ Now:

Style(
  $box
    ..padding.all(12)
    ..color.red()
    ..border.all.color.redAccent(),
)

This is part of our ongoing effort to make Mix more intuitive, predictable, and joyful to use.

What's Changed

Read more

Contributors

leoafarias and tilucasoli
Loading

Mix 1.6.0 "Nielsen"

19 Jun 15:03
@tilucasoli tilucasoli
mix-1.6.0
5039c17

Choose a tag to compare

View all tags
Mix 1.6.0 "Nielsen"

Packages Updates

mix - v1.6.0

  • REFACTOR: Rename MixableProperty to MixableType (#574)
  • REFACTOR: mix generator clean up and mix semantic changes (#569)
  • CHORE: Update min version compatibility (#572)

mix_annotations - v0.4.0

  • REFACTOR: Rename MixableProperty to MixableType (#574).
  • REFACTOR: mix generator clean up and mix semantic changes (#569).

mix_generator - v0.4.0

  • REFACTOR: Rename MixableProperty to MixableType (#574)
  • REFACTOR: mix generator clean up and mix semantic changes (#569)
  • CHORE: Update min version compatibility (#572)

What's Changed

  • feat: Accordion interaction based on open variable by @tilucasoli in #546
  • feat: improve Fortaleza Theme Customization by @tilucasoli in #547
  • feat: Support header on scaffold by @tilucasoli in #554
  • chore: version packages by @github-actions in #556
  • fix: Add ToastLayer on RemixAPp by @tilucasoli in #557
  • docs: formatting for widget modifiers guide by @kbtz in #567
  • refactor: mix generator clean up and mix semantic changes by @leoafarias in #569
  • chore: Update min version compatibility by @tilucasoli in #572
  • refactor: Rename MixableProperty to MixableType by @tilucasoli in #574
  • chore: version packages by @github-actions in #575
  • chore: version packages by @github-actions in #576

New Contributors

  • @kbtz made their first contribution in #567

Full Changelog: mix-1.5.3...mix-1.6.0

Contributors

leoafarias, bykbtzr, and tilucasoli
Loading

Mix 1.5.3 "Nielsen"

06 Dec 13:48
@tilucasoli tilucasoli
mix-1.5.3
8cc7d4a
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Choose a tag to compare

View all tags
Mix 1.5.3 "Nielsen"

Highlights

FlexBox Gets a Dedicated Spec and Utility

In this release, FlexBox now has its own dedicated utility: $flexbox. Previously, you styled FlexBox using either $flex or $box. With $flexbox, you get a utility that combines attributes from both, offering a more intuitive and efficient way to handle a common use case in most applications.

This enhancement simplifies your code by reducing the need to use both box and any flex widget, making it easier to define layouts with different children.

FlexBox(
  direction: Axis.vertical,
  style: Style(
    $flexbox.chain
      ..flex.mainAxisAlignment.center()
      ..flex.crossAxisAlignment.center()
      ..flex.gap(12)
      ..padding.all(12)
      ..color.red()
      ..border.all.color.redAccent(),
  ),
  children: const [
    Text('Hello'),
    Text('World'),
  ],
),

Important Note: Starting with the next major version, FlexBox will exclusively use $flexbox. This change ensures that FlexBox styling is fully aligned with the existing API conventions in Mix, offering a more consistent developer experience.

Introducing the Remix Playground

Remix now includes a fully interactive playground, allowing you to explore and preview all available components in one place.

Widgetbook

Try out the playground today to get hands-on with Remix components and unlock new possibilities for your UI design!

Introducing Design Token Support in mix_generator

The mix_generator and mix_annotation now include full support for design token generation. With this update, you can effortlessly define your design tokens and let the generator handle creating everything needed to integrate them into your MixThemeData.

Simply annotate a class with @MixableToken, specifying the token type, and the generator will do the rest. This feature supports all design token categories: Radius, Color, Space, and TextStyle.

@MixableToken(Color)
class CustomColors {
  final Color primary;
  final Color surface;

  const CustomColors({
    required this.primary,
    required this.surface,
  });

  Map<ColorToken, Color> toMap() => _$CustomColorsToMap(this);
}

Directly in Styles:

The generated code supports you reference tokens directly in your styles for a cleaner, more declarative approach:

$box.color.$primary()

Access from Context:

You can also access tokens dynamically through the context

context.$color.primary()

This update ensure consistency across your app while reducing boilerplate. The added utilities make tokens easier to use, improving developer productivity.

Packages Updates

mix - v1.5.3

  • REFACTOR: Solve dcm lint issues (#519).
  • FIX: Order of modifiers implementation on Box, Image and Text (#529).
  • FIX: reset modifiers and directives when using fluentAPI (#482).
  • FEAT: Add spring curve (#503).
  • FEAT: Create StrokeAlignUtility (#496).
  • FEAT: Utilities for text height behavior (#495).
  • FEAT: Rewrite FlexBox as a Mix's primitive component (#517).
  • FEAT: Add SpecConfiguration (#483).
  • DOCS: Add section for TokenResolver (#537).

remix - v0.0.3

  • REFACTOR: Create a new Architecture for remix's components (#446).
  • REFACTOR(remix): improve widgetbook navigation (#524).
  • REFACTOR: Add in code documentation and rename params for each component (#514).
  • REFACTOR: Remix progress (#429).
  • REFACTOR: small fixes on remix (#512).
  • REFACTOR: Rewrite Fortaleza theme using the new code gen for tokens (#528).
  • REFACTOR: Remix was rewritten using Fluent API (#476).
  • REFACTOR: Rewrite all components in the new Archtecture (#467).
  • FIX: Textfield helper Text (#531).
  • FIX: Toast animation trigger (#530).
  • FEAT: Create Textfield (#511).
  • FEAT: Chip component (#504).
  • FEAT: implement toast component (#503).
  • FEAT: Card has child instead of children parameter (#499).
  • FEAT: Create dark base theme for Remix (#498).
  • FEAT: remix-styling-configuration (#483).
  • FEAT: Segmented control (#479).
  • FEAT: Accordion component (#433).
  • FEAT: Slider component (#509).
  • FEAT: Add more directives to Colors (#477).
  • FEAT: Menu Item Component (#508).
  • FEAT: Add group feature to Radio (#435).
  • FEAT: Create Select component (#448).
  • FEAT: Add parameter onEnd for AnimatedStyle (#458).
  • FEAT: button supports component builder (#444).
  • FEAT: Create a theme for Remix (#470).
  • FEAT: Refactor Remix components (#428).
  • FEAT: Remix improvements and further improvements (#410).
  • FEAT: Rewrite FlexBox as a Mix's primitive component (#517).

mix_annotations - v0.3.1

  • FEAT: Create code gen for design tokens (#521).

mix_generator - v0.3.2

  • REFACTOR: Rewrite Fortaleza theme using the new code gen for tokens (#528).
  • FIX: Shadow list animation (#445).
  • FEAT: Create code gen for design tokens (#521).
  • FEAT: Rewrite FlexBox as a Mix's primitive component (#517).
  • FEAT: Fluent API (#475).
  • FEAT: Remix improvements and further improvements (#410).
  • DOCS: improve mix theme data features explanations (#404).

mix_lint - v0.1.2

  • FEAT: Rewrite FlexBox as a Mix's primitive component (#517).

What's Changed

New Contributors

Full Changelog: mix-1.5.2...mix-1.5.3

Contributors

yousinix, tilucasoli, and 2 other contributors
Loading

Mix 1.5.2 "Nielsen"

02 Oct 20:45
@tilucasoli tilucasoli
mix-1.5.2
cc18c6f
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Choose a tag to compare

View all tags
Mix 1.5.2 "Nielsen"

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

Contributors

tilucasoli
Loading

Mix 1.5.1 "Nielsen"

26 Sep 13:24
@tilucasoli tilucasoli
mix-1.5.1
a7a0fcc
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Choose a tag to compare

View all tags
Mix 1.5.1 "Nielsen"

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

Contributors

tilucasoli
Loading

Mix 1.5.0 "Nielsen"

17 Sep 17:52
@tilucasoli tilucasoli
mix-1.5.0
8f064be

Choose a tag to compare

View all tags
Mix 1.5.0 "Nielsen"
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

Contributors

leoafarias, Solido, and 2 other contributors
Loading

Mix 1.4.6 "Norman"

27 Aug 12:57
@tilucasoli tilucasoli
mix-1.4.6
46c351b
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Choose a tag to compare

View all tags
Mix 1.4.6 "Norman"

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

Contributors

m-sadegh-sh, canewsin, and 3 other contributors
Loading

Mix 1.4.5 "Norman"

09 Aug 22:25
@tilucasoli tilucasoli
mix-1.4.5
0d9bc96
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Choose a tag to compare

View all tags
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

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

Contributors

leoafarias and tilucasoli
Loading

Mix 1.4.4 "Norman"

02 Aug 23:24
@tilucasoli tilucasoli
mix-1.4.4
92923c6
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

Choose a tag to compare

View all tags
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

Contributors

tilucasoli
Loading