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
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
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();
}
}Widget buildPage(BuildContext context) { return Container( return Container( child: Text('hello'),Widget buildButton() { return ElevatedButton( Widget make() { return new Container(); Widget scaffold() { return Scaffold();Valid
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.
{
"linter": {
"rules": {
"style": {
"use-design-system-item": "error"
}
}
}
}Or silence one occurrence with a suppression comment; the reason is required.
// falcon-ignore lint/style/use-design-system-item: <reason>More style rules
- use-enums
use_enumsFlags 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-colors
use_full_hex_values_for_flutter_colorsrecommendedflutterRequire an eight-digit hexadecimal integer for the canonical Flutter Color default constructor.
- use-function-type-syntax-for-parameters
use_function_type_syntax_for_parametersrecommendedFlags an old-style function-typed parameter written with inline parameter syntax.
- use-if-null-to-convert-nulls-to-bools
use_if_null_to_convert_nulls_to_boolsrecommendedPrefers
??to comparing a nullableboolagainst a boolean literal. - use-late-for-private-fields-and-variables
use_late_for_private_fields_and_variablesFlags a private nullable field or top-level variable that is only ever assigned non-null values and read through
!, so it could belatewith a non-nullable type. - use-named-constants
use_named_constantsrecommendedPrefers a class's predefined static constant to constructing an equal constant.