use-design-system-item

Same as use-design-system-item in Dart Code Metrics

Group
Style
Path
lint/style/use-design-system-item
Default
Off, opt in
Origin
Dart Code Metrics
Domain
flutter
Rule
486 of 512
flutter

Flags construction of a widget or type that should be replaced by its design-system equivalent.

Teams building on a Flutter design system often want to steer away from raw framework widgets (a bare Container, Text, or ElevatedButton) toward their own wrappers, which enforce spacing, theming, and accessibility. This rule flags a construction whose class name matches a configured entry, in either constructor form — implicit Foo(...), explicit new/const, and generic Foo<T>(...). It deliberately ignores named-constructor access like Foo.named(...) so static getters and factory helpers are not mistaken for plain construction. The rule is entirely config-driven: with no configured items it is a no-op, so it flags nothing until a design system is described.

Options

items (list of objects, default: []) — each entry maps a class-name (required) to steer away from, with an optional use-instead naming the design-system replacement to suggest in the message.

Checks constructions throughout the program, including initializers and annotations.

Invalid

example.dartdart
import 'package:flutter/material.dart';

// Direct construction of banned widgets must be flagged when the rule is
// configured (see config.json in this directory).

Widget buildPage(BuildContext context) {
  return Container(
    child: Text('hello'),
  );
}

Widget buildButton() {
  return ElevatedButton(
    onPressed: null,
    child: null,
  );
}

class HomePage {
  Widget make() {
    return new Container();
  }

  Widget scaffold() {
    return Scaffold();
  }
}
Use `AppContainer` from the design system instead of `Container`.
6Widget buildPage(BuildContext context) {
7 return Container(
Use `AppText` from the design system instead of `Text`.
7 return Container(
8 child: Text('hello'),
Use `AppButton` from the design system instead of `ElevatedButton`.
12Widget buildButton() {
13 return ElevatedButton(
Use `AppContainer` from the design system instead of `Container`.
20 Widget make() {
21 return new Container();
Use `AppScaffold` from the design system instead of `Scaffold`.
24 Widget scaffold() {
25 return Scaffold();

Valid

example.dartdart
import 'package:flutter/material.dart';

Widget build(BuildContext context) {
  return AppContainer(
    child: AppText('hello'),
  );
}

class MyWidget {
  Widget make() => AppButton(label: 'ok');
}

final namedConstructor = Container.named();
final prefixedCall = framework.Container();

class Initializers {
  final named = Container.named();
  final replacement = AppContainer();
}

Configure use-design-system-item

Set its severity in falcon.json. See the configuration guide.

falcon.jsonjson
{
  "linter": {
    "rules": {
      "style": {
        "use-design-system-item": "error"
      }
    }
  }
}

Or silence one occurrence with a suppression comment; the reason is required.

example.dartdart
// falcon-ignore lint/style/use-design-system-item: <reason>
  • use-enumsuse_enums

    Flags classes that emulate an enum and could be declared as one.

  • use-existing-destructuring

    Reuse or extend an existing record destructuring instead of rereading a field.

  • use-existing-variable

    Reuse a local for stable SDK arithmetic and String.length/int parity getters.

  • use-full-hex-values-for-flutter-colorsuse_full_hex_values_for_flutter_colorsrecommendedflutter

    Require an eight-digit hexadecimal integer for the canonical Flutter Color default constructor.

  • use-function-type-syntax-for-parametersuse_function_type_syntax_for_parametersrecommended

    Flags an old-style function-typed parameter written with inline parameter syntax.

  • use-if-null-to-convert-nulls-to-boolsuse_if_null_to_convert_nulls_to_boolsrecommended

    Prefers ?? to comparing a nullable bool against a boolean literal.

  • use-late-for-private-fields-and-variablesuse_late_for_private_fields_and_variables

    Flags a private nullable field or top-level variable that is only ever assigned non-null values and read through !, so it could be late with a non-nullable type.

  • use-named-constantsuse_named_constantsrecommended

    Prefers a class's predefined static constant to constructing an equal constant.