Docs
/
Concepts
/
Mixable widgets

Mixable Widgets

package:mix/mix.dart defines a set of widget primitives that can use Mix Attributes and allow them to be rendered with those Attributes.

At first glance it might seem these widgets are doing a lot — in reality, they are simply wrapping basic Flutter widgets and allowing their visual properties to be defined through a Mix.

The fundamental widget primitive defined in Mix is a Box. A Box can contain other widgets and a set of BoxAttributes to define it's visual properties.

An easy misconception would be to think that Box is like a Container, but that would be incorrect: Box is a Container.

That means that this:

Box(mix: Mix(height(100)));

will become the following:

Container(height: 100);

You can think of Utilities as shortcuts to defining visual properties. Thus:

Box(mix: Mix(rounded(100)));

will become the following:

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(100),
  ),
)

Mixable catalog

Built-in mixable widgets that you can use right-away in your app.

Box

Box is, basically, a Container. A mixable that will usually be the base widget to create most of your layouts.

Box(
  mix: Mix(
    height(100),
    width(300),
    rounded(15),
    bgColor(Colors.amber),
    align(Alignment.center),
    elevation(4), // can be 0, 1, 2, 3, 4, 6, 8, 9, 12, 16, 24
  ),
),

FlexBox

A flex box is a widget that takes a list of children and displays them according to its axis.

FlexBox(
  mix: Mix(gap(6.0)),
  axis: Axis.horizontal,
  children: [
    IconMix(icon: Icons.search),
    TextMix('Click to search'),
  ],
)

HBox and VBox

HBox and VBox are helper widgets that are, basically, a FlexBox under the hood. axis is, respectively, Axis.horizontal and Axis.vertical

Hbox(
  mix: Mix(gap(6)),
  children: [
    Image.fromAsset('assets/image.png'),
    VBox(
      children: [
        TextMix('Title', variant: title),
        TextMix("""...description...""", variant: paragraph),
      ],
    ),
  ],
),

IconMix

It's capable of displaying icons and inherit data from parent mixes

IconMix(
  mix: Mix(
    iconSize(30),
    iconColor(Colors.grey),
  ),
  icon: Icons.add,
),

Pressable

A Pressable is a mixable widget that can provide the following information for its descendants:

  • hovering
  • pressing
  • disabled
  • focused

Here's how you can create a text button with it:

Pressable(
  onPressed: () => debugPrint('my awesome button was pressed'),
  child: Box(
    mix: Mix(
      // when nothing's happening, bg color is the default grey
      bgColor(Colors.grey),
      (hover)(
        // when hovering, bg color is a lighter grey
        bgColor(Colors.grey.shade300),
      ),
      (press)(
        // when pressing, bg color is a darker grey
        bgColor(Colors.grey.shade600),
      ),
      rounded(8),
      padding(10),
      alignment(Alignment.center),
    ),
    child: TextMix(
      'PRESS ME',
      mix: Mix(
        fontSize(18.0),
        (disabled)(
          textColor(Colors.grey.shade900),
        ),
        textColor(Colors.black),
        bold(),
      ),
    ),
  ),
),

TextMix

It's capable of rendering text and inherit data from parent mixes

TextMix(
  'Mix is AWESOME!'
  mix: Mix(
    fontSize(16.0),
    textColor(Colors.black),
    bold(),
    textShadow(
      offset: const Offset(2.0, 2.0),
    ),
  ),
),