package:mix/mix.dart defines a set of widget primitives that can use Mix
Attributes and allow them to be rendered with those
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 can contain other widgets and a set of
BoxAttributes to define it's visual properties.
An easy misconception would be to think that
Boxis like a
Container, but that would be incorrect:
That means that this:
will become the following:
You can think of
Utilities as shortcuts to defining visual properties. Thus:
will become the following:
Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(100), ), )
Built-in mixable widgets that you can use right-away in your app.
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 ), ),
A flex box is a widget that takes a list of children and displays them according to its
FlexBox( mix: Mix(gap(6.0)), axis: Axis.horizontal, children: [ IconMix(icon: Icons.search), TextMix('Click to search'), ], )
VBox are helper widgets that are, basically, a
FlexBox under the hood.
axis is, respectively,
Hbox( mix: Mix(gap(6)), children: [ Image.fromAsset('assets/image.png'), VBox( children: [ TextMix('Title', variant: title), TextMix("""...description...""", variant: paragraph), ], ), ], ),
It's capable of displaying icons and inherit data from parent mixes
IconMix( mix: Mix( iconSize(30), iconColor(Colors.grey), ), icon: Icons.add, ),
Pressable is a mixable widget that can provide the following information for its descendants:
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(), ), ), ), ),
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), ), ), ),