mix_lint

Mix Lint is a powerful tool that helps you enforce coding standards and best practices in your Flutter apps using Mix.

Getting Started

Run this command in the root of your Flutter project:

flutter pub add -d mix_lint custom_lint

Then edit your analysis_options.yaml file and add these lines of code:

analyzer:
  plugins:
    - custom_lint

Then run:

flutter clean
flutter pub get
dart run custom_lint

Customize rules

Some rules have their own configuration. You can customize them in the analysis_options.yaml file. For example, you can customize the rules for the mix_max_number_of_attributes_per_style rule.

custom_lint:
  rules:
    - mix_max_number_of_attributes_per_style:
      max_number: 11

Rules

mix_attributes_ordering

Ensure that the attributes are ordered in groups of the same category in the Style constructor. It makes the code easier to read and understand the Style.

Don't

Style (
    $box.color.red(),
    $text.color.blue(),
    $box.height(200),
    $text.style.fontSize(10),
)

Do

Style (
    $box.color.red(),
    $box.height(200),
    $text.color.blue(),
    $text.style.fontSize(10),
)

mix_avoid_defining_tokens_or_variants_within_style

Ensure that Variant and MixToken instances are not created directly inside Style constructors. Instead, instantiate Variant and MixToken outside of Style constructors.

Variants and MixTokens should be shared across the application. If they are created inside a Style, it means that they are local to the Style, and it will be harder to reuse them.

Don't

Style(
    const Variant('example')(
        $text.textAlign.center(),
        $box.height(200),
        $box.width(200),
    ),
)

Style(
    $box.color.ref(ColorToken('primary')),
)

Do

final example = Variant('example');
 
Style(
    example(
        $text.textAlign.center(),
        $box.height(200),
        $box.width(200),
    ),
)

final primary = ColorToken('primary');
 
Style(
    $box.color.ref(primary),
)

mix_avoid_defining_tokens_within_theme_data

Ensure that Tokens instances are not created directly inside MixThemeData constructors.

When you create tokens within a MixThemeData, you're essentially creating a localized scope that may not be easily accessible elsewhere in your application. This can lead to unnecessary token recreation or, worse, duplicated efforts to reuse them.

Don't

MixThemeData(
    colors: {
        const ColorToken('a'): Colors.black12,
    }
)

Do

final primary = ColorToken('a');
 
MixThemeData(
    colors: {
        primary: Colors.black12,
    }
)

mix_avoid_empty_variants

Avoid creating empty variants directly inside Style. Empty variants are essentially useless and can make the code harder to read and understand.

Don't

final a = Variant('a');
 
final wrong_case = Style(
  a(),
);

Do

final correct_case = Style(
  a(
    $box.color.amber(),
  ),
);

mix_avoid_variant_inside_context_variant

ContextVariant and the standard Variant are applied at different moments during the Style lifecycle. Because of this, we strongly recommend that you don't create a Variant inside the ContextVariant's scope. Instead, you can combine the Variants using the & and | operators.

Don't

final variantTest = Variant('test');
 
Style (
    $box.color.red(),
    $on.hover(
        $box.color.green(),
        variantTest(
            $box.color.blue(),
        )
    ),
)

Do

final variantTest = Variant('test');
 
Style (
    $box.color.red(),
    $on.hover(
        $box.color.green(),
    ),
    ($on.hover & variantTest)(
        $box.color.blue(),
    ),
)

mix_max_number_of_attributes_per_style

Limit the number of attributes per style. The default value is 10. This rule aims to encourage developers to keep their styles concise and focused on a few key aspects.

Don't

final style = Style (
    $attribute1(),
    $attribute2(),
    $attribute3(),
    $attribute4(),
    $attribute5(),
    $attribute6(),
    $attribute7(),
    $attribute8(),
    $attribute9(),
    $attribute10(),
    $attribute11(),
);

Do

final auxStyle = Style(
    $attribute1(),
    $attribute2(),
    $attribute3(),
    $attribute4(),
    $attribute5(),
);
 
final mainStyle = Style(
    auxStyle(),
    $attribute6(),
    $attribute7(),
    $attribute8(),
    $attribute9(),
    $attribute10(),
    $attribute11(),
);

Parameters

max_number (int)

The maximum number of attributes allowed per style. The default value is 10.

Assists

Extract Attributes

It is a powerful refactoring tool designed to improve the structure and maintainability of your Mix code by extracting style attributes from a Style instance into a separate Style instance.

Usage

This assist automatically becomes available when you move your cursor into a Style's constructor scope. It will be suggested as an assist option.

The assistant can extract attributes even when the style is in different code structures.

• Field declarations
• Method declarations (getters)
• Top-level variable declarations
• Function declarations (getters)