How to $on.selected apply variant?

[lvsecoto]

$on.selected(
      Style().applyVariants(selectedVariant)(),
)

but not working...

[tilucasoli]

Hey @lvsecoto, please check this doc it will help you to understand how it works

https://www.fluttermix.com/docs/tutorials/controlling-widget-state

[lvsecoto]

I have found a solution, but I don't know is this a good idea?

  var variants = [LabelVariantSize.big, LabelVariantStyle.color];
  final selectedVariants = [LabelVariantStyle.dark];

  if (selected) {
      variants = [
        ...[...variants]..removeWhere(
            (it) => selectedVariants.any((selected) {
              // If there are the same variant category, we will give priority to the selected variant
              return it.runtimeType == selected.runtimeType;
            }),
          ),
        ...selectedVariants
      ];
  } else {
      variants = variants;
  }

 return Style(
     LabelVariantSize.big(_bigStyle()),
     LabelVariantStyle.color(_colorStyle()),
     LabelVariantStyle.dark(_darkStyle()),
  ).apply(variants);

[tilucasoli]

It do works. But why not use the context variant $on.selected

[tilucasoli]

If you would like, we can schedule a call to discuss your use case. Please join us on Discord and send me a message.

[lvsecoto]

Sorry~ My English is not well T.T~~

In ours design-sketch.

There are a lots of variants to Chip.

We want to config a variant when selected and other not selected.

So I define a Widget

  const JUILabel({
    super.key,
    super.style,
    this.variants = const [
      JUILabelVariantStyle.dark,
      JUILabelVariantSize.middle,
    ],
    this.selectedVariants = const [
      JUILabelVariantStyle.color,
    ],
)

[tilucasoli]

@lvsecoto We are creating a design system called remix. You can find it in this repository. A few months ago, we developed a Chip widget; look and see if you would like something similar. It has the same behavior you are describing.

[tilucasoli]

However, as a quick answer, you will need to do it manually. Take a look at this example code it's a real case usage

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

void main() {
  testWidgets(
    'description',
    (WidgetTester tester) async {
      TextStyle style = const TextStyle(color: Color(0xFF000000));
      await tester.pumpWidget(
        MaterialApp(
          home: MyWidget(
            (textStyle) => style = textStyle,
          ),
        ),
      );

      expect(style.color, equals(Colors.blue));

      await tester.tap(find.text('Selected'));
      await tester.pumpAndSettle();

      expect(style.color, equals(Colors.red));
    },
  );
}

class MyWidget extends StatefulWidget {
  const MyWidget(
    this.callback, {
    super.key,
  });

  final TextStyle Function(TextStyle) callback;

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  late MixWidgetStateController _controller;

  @override
  void initState() {
    super.initState();
    _controller = MixWidgetStateController();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Pressable(
      onPress: () => _controller.selected = true,
      controller: _controller,
      child: Box(
        style: Style(
          $text.style.color.blue(),
          $on.selected(
            $text.style.color.red(),
          ),
        ),
        child: Builder(
          builder: (context) {
            final textStyle = TextSpec.of(context).style;

            widget.callback(textStyle!);
            return const StyledText('Selected');
          },
        ),
      ),
    );
  }
}