dartdoc lumps all of the classes together without any distinction. Same with functions, constants, etc.

These need to organized under header by type, category, etc.

Not straightforward. Investigating.

I'm investing in Mix and work on real designs so I'm trying to see how far I can implement a design lang. Thx!

A linear 2 colors with start/end position would already cover most of the cases.

Some very basics reflections:

TopLeft, BottomRight gradient(tl, br, Colors.white, Colors.blue, .0, .72);

vGradient(Colors.white, Colors.blue) top to bottom .0 => 1

hGradient(Colors.white, Colors.blue) left to right .0 => 1

Hello mix team. Is there any way how to detect onHover, onMouseDown, onMouseUp from Pressable? I need to highlight specific a range of cells in a grid, starting from the one over which user has pressed mouse down and end on another where mouse up.

There is a need to create components that can be interacted with but easily styled. Right now this is not a problem as you can style all the components and wrap them in an InkWell or a GestureDetector, however, the creation of a Pressable component opens up some other possibilities.

• Ability to provide styling for interactions, tap, hover, disabled etc.
• Clean syntax for creating buttons and other pressable components using Mix

Add macro benchmarks

Addiontal reference

• https://api.flutter.dev/flutter/flutter_test/benchmarkWidgets.html
• https://api.flutter.dev/flutter/flutter_test/WidgetTester/pumpBenchmark.html
• https://docs.flutter.dev/cookbook/testing/integration/profiling
• https://github.com/flutter/flutter/blob/master/dev/benchmarks/macrobenchmarks/test/util.dart

Would love to have:

bgColor -> bgc
border -> br
borderColor -> brc
borderWidth -> brw
borderStyle -> brs
rounded -> rd
squared -> sq
shadow -> sh

and similar to others.

Makes the following syntax possible:

final mix = Mix(
  (true)( // [condition]
    bgColor(Colors.blue), // this is only executed if [condition] is true
  ),
);

Face a problem with Pressable - when click/press on the button with onPressed: null it freezes within press state.

Mix (mix different colors):

  final mixButton = Mix(
    p(4),
    rounded(4),
    (hover)(
      bgColor(Colors.red.withOpacity(0.1))
    ),
    (press)(
      bgColor(Colors.red.lighten())
    ),
  );

Main updates

• Removed .default getters where possible and replaced them with factory constructors
• Removed .merge where it was irrelevant and replaced it with .copyWith
• Replace ._ constructors with .raw constructors

Other updates

• Added equality and toString when relevant

I've worked over primarily the 'Concepts' page, for starters. Also changed some of the header styling to something I think works better.

Might have gotten carried away.

Look it over and we can discuss.

Do you have a git Project set up for this?

thanx, rickb

Fixes #102

Basic usage:

// in a stateful widget

bool hasError = false;

void fetch() {
  try {
    // perform the fetch
    setState(() => hasError = false);
  } catch (e) {
    // handle the error
    setState(() => hasError = true);
  }
}

final mix = Mix(
  when(hasError)(
    rounded(5),
  )(
    // this would be the `else` case
    rounded(10),
  ),
);

Accorded to the documentation I should be able to customize spaces with the MixThemeSpace. However it seems that the theme/tokens/space.dart are not being exported from mix package.

library mix;

export 'src/attributes/attribute.dart';
export 'src/attributes/helpers/helper.utils.dart';
export 'src/attributes/shared/shared.attributes.dart';
export 'src/attributes/shared/shared.utils.dart';
export 'src/helpers/color.utils.dart';
export 'src/helpers/extensions.dart';
export 'src/mixer/mix_context.dart';
export 'src/mixer/mix_factory.dart';
export 'src/mixer/mix_values.dart';
export 'src/theme/material_theme/color_scheme_tokens.dart';
export 'src/theme/material_theme/material_tokens.dart';
export 'src/theme/material_theme/text_theme_tokens.dart';
export 'src/theme/mix_theme.dart';
export 'src/theme/refs/color_token.dart';
export 'src/theme/refs/text_style_token.dart';
export 'src/theme/tokens/size.dart';
export 'src/utilities/box_decorator_utilities.dart';
export 'src/utilities/box_utilities.dart';
export 'src/utilities/dynamic_variants_utilities.dart';
export 'src/utilities/flex_utilities.dart';
export 'src/utilities/helper_utilities.dart';
export 'src/utilities/icon_utilities.dart';
export 'src/utilities/image_utilities.dart';
export 'src/utilities/shared_utilities.dart';
export 'src/utilities/text_utilities.dart';
export 'src/utilities/zbox_utilities.dart';
export 'src/variants/dynamic_variants/dynamic_variants.utils.dart';
export 'src/variants/variant.dart';
export 'src/widgets/box/box.attributes.dart';
export 'src/widgets/box/box.utils.dart';
export 'src/widgets/box/box.widget.dart';
export 'src/widgets/box/box_decorators/aspect_ratio.dart';
export 'src/widgets/box/box_decorators/clip_decorator.dart';
export 'src/widgets/box/box_decorators/flexible.dart';
export 'src/widgets/box/box_decorators/opacity.dart';
export 'src/widgets/box/box_decorators/rotate.dart';
export 'src/widgets/box/box_decorators/scale.dart';
export 'src/widgets/flex/flex.attributes.dart';
export 'src/widgets/flex/flex.utils.dart';
export 'src/widgets/flex/flex.widget.dart';
export 'src/widgets/gap.widget.dart';
export 'src/widgets/icon/icon.attributes.dart';
export 'src/widgets/icon/icon.utils.dart';
export 'src/widgets/icon/icon.widget.dart';
export 'src/widgets/image/image.attributes.dart';
export 'src/widgets/image/image.utils.dart';
export 'src/widgets/mix_context_builder.dart';
export 'src/widgets/mixable.widget.dart';
export 'src/widgets/pressable/gesture_box.widget.dart';
export 'src/widgets/pressable/pressable.widget.dart';
export 'src/widgets/pressable/pressable.widget.dart';
export 'src/widgets/text/text.attributes.dart';
export 'src/widgets/text/text.utils.dart';
export 'src/widgets/text/text.widget.dart';
export 'src/widgets/zbox/zbox.attributes.dart';
export 'src/widgets/zbox/zbox.utils.dart';
export 'src/widgets/zbox/zbox.widget.dart';

Hello,

Thank you for this awesome library. Im still a beginner developer so sorry if I misunderstood something...

I tried a sample app to use your pressable widget

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:mix/mix.dart';

Mix get pressableMix => Mix(
      elevation(8),
      padding(20),
      rounded(30),
      bgColor(Colors.white),
      border(
        color: Colors.black,
        width: 2,
      ),
      hover(
        border(
          color: Colors.green,
        ),
      ),
      press(
        elevation(1),
        border(
          color: Colors.green,
          width: 4,
        ),
      ),
    );

class BaseStyleButton extends StatelessWidget {
  const BaseStyleButton({super.key});

  @override
  Widget build(BuildContext context) {
    return Pressable(
      onPressed: () {
        stdout.write("BaseStyleButton pressed");
      },
      child: Box(
        mix: pressableMix,
        child: const TextMix('Button'),
      ),
    );
  }
}

and implement it in a sample app, along to a TextButton

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:ultrashot_design_system/component.dart';

void main() {
  runApp(const UltrashotApp());
}

class UltrashotApp extends StatelessWidget {
  const UltrashotApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ultrashot ALPHA',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const DesignSystemShowCase(),
    );
  }
}

class DesignSystemShowCase extends StatelessWidget {
  const DesignSystemShowCase({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Ultrashot Design System'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const BaseStyleButton(),
            TextButton(
              onPressed: () {
                stdout.write("BaseStyleButton pressed");
              },
              child: const Text('Button'),
            )
          ],
        ),
      ),
    );
  }
}

On my ANDROID 9 / SAMSUNG S8 (SM-G950F)

It seems that the press variant is applied on a longer press than the press effect of the material button. I can see the debug message by pressing the button without be able to see the press variant applied. However the material button press effect is instant when I press it with the same tap pression.

We can take advantage of Material's theme extensions to replace the current mix theming. Currently, we define global variables and attach value to them in a MixThemeData, so that we can use globally.

Proposal

A callback based function theme<T extends ThemeExtension>((T)) that can be called inside a Mix. The mixer will look into every attribute for a theme and perform the operation based on the current context.

Something like:

final mix = Mix(
  bgColor(theme<MyColors>((myColors) => myColors.brandColor)),
  textColor(theme<MyColors>((myColors) => myColors.danger))),
);

// This is from the official example. Link attached below
@immutable
class MyColors extends ThemeExtension<MyColors> {
  const MyColors({
    required this.brandColor,
    required this.danger,
  });

  final Color? brandColor;
  final Color? danger;

  ...
}

Other things I have considered Making theme more readable and usable with something like

final mix = Mix(
  bgColor(theme<MyColors>().brandColor),
  textColor(theme<MyColors>().danger),
);

But I can't seem to find a way where theme would have access to the current context

Additional context https://api.flutter.dev/flutter/material/ThemeData/extensions.html

This would be a variant that would react to a keyboard key press. It'd be something like:

final mix = Mix(
  key(LogicalKeyboardKey.enter)(
    bgColor(Colors.red),
  ),
);

The key(<LogicalKeyboardKey>) would make the following possible:

Mix(
  (hover & key(LogicalKeyboardKey.enter) & ...)(
  ),
);

Pressable could be used to handle this, or maybe a new widget could also be created

See also:

• https://api.flutter.dev/flutter/services/KeyDownEvent-class.html

Reading the documentation

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

My understanding is that a mix passed as parameters will override any other inherited value but this is not reflected in my code. Not sure if it is a bug.

Thx!