Apply Style on specific boolean value?

[AlexanderThiele]

Hey!

i need to apply some styles depending on custom boolean. I created my own Variant for it, but i wonder if it already exist in any form in this plugin? Maybe i missed a part.

Just imagine you have 2 Boolean and depending on that boolean, you want to apply a different color. This use case seems so simple, but i could not find a good solution.

Style(
  $box.color.ref(ColorTokens().foregroundPrimary),
  
  $onBool(shouldMerge: !isFilled, name: "filledVariant")(
    $box.color.ref(ColorTokens().foregroundSecondary),
  ),
  
  $onBool(shouldMerge: hasError, name: "ErrorVariant")(
      $box.color.ref(ColorTokens().foregroundAccentError),
  ),
),

[tilucasoli]

If I understand you correctly, this may help resolve your issue.

class CustomContainer extends StatelessWidget {
  const CustomContainer({
    super.key,
    this.hasError = false,
    this.isFilled = false,
  });

  final bool hasError;
  final bool isFilled;

  @override
  Widget build(BuildContext context) {
    return Box(
      style: Style(
        $box.color(m.Colors.grey),
        isFilled ? $box.color(m.Colors.blue) : null,
        hasError ? $box.color(m.Colors.red) : null,
      ),
    );
  }
}

[AlexanderThiele]

Hey @tilucasoli,

yes, I had something similar before, but I don't like to pass a null value for each attribute.

Especially if you want to apply more than 1 style attribute for a certain case.

[tilucasoli]

For apply more than one attribute you can create a Style and use it as attribute.

@override
Widget build(BuildContext context) {
  final filledStyle = Style(
    $box.color(m.Colors.blue),
  );

  final errorStyle = Style(
    $box.color(m.Colors.red),
  );

  return Box(
    style: Style(
      $box.color(m.Colors.grey),
      isFilled ? filledStyle() : null,
      hasError ? errorStyle() : null,
    ),
  );
}

[AlexanderThiele]

Right, this is also possible!

Thanks for the explanation!