falcon

Rules / Style / use-design-system-item

use-design-system-item

lint/style/use-design-system-item
recommendedflutter
Same as use-design-system-item · Dart Code Metrics

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.

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');
}

How to configure

Set the severity of use-design-system-item in your falcon.json:

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

Related