falconGitHub

use-colored-box

Same as use_colored_box in Dart lints

Group
Style
Path
lint/style/use-colored-box
Default
On (recommended)
Origin
Dart lints
Domain
flutter
Rule
484 of 512
recommendedflutter

Prefers ColoredBox over a Container that only paints a color behind its child.

A Container whose only arguments are color and child (plus an optional key) can be replaced by the lighter, const-capable ColoredBox. Only invocations that resolve to Flutter's Container are considered. Matching the analyzer's nullability-suffix check, a color with a nullable static type is excluded, but dynamic and Null still qualify. When the type is unknown, a constructor invocation or a Flutter Colors.<name> access also qualifies. The diagnostic covers the constructor name, excluding new and arguments.

Container(color: Colors.blue, child: child);  // BAD
ColoredBox(color: Colors.blue, child: child); // GOOD

Invalid

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

Widget namedColor(Widget child) {
  return Container(
    color: Colors.blue,
    child: child,
  );
}

Widget constructedColor(Widget child) {
  return Container(color: const Color(0xFF00FF00), child: child);
}

Widget nonNullableParameter(Color color, Widget child) {
  return Container(key: const Key('k'), color: color, child: child);
}

Widget dynamicColor(dynamic color, Widget child) {
  return Container(child: child, color: color);
}

Widget prefixedContainer(Widget child) {
  return m.Container(color: Colors.red, child: child);
}

Widget explicitNew(Widget child) {
  return new Container(color: Colors.transparent, child: child);
}

Widget explicitNullColor(Widget child) {
  return Container(color: null, child: child);
}
Use a `ColoredBox` rather than a `Container` with only a `Color`.
4Widget namedColor(Widget child) {
5 return Container(
Use a `ColoredBox` rather than a `Container` with only a `Color`.
11Widget constructedColor(Widget child) {
12 return Container(color: const Color(0xFF00FF00), child: child);
Use a `ColoredBox` rather than a `Container` with only a `Color`.
15Widget nonNullableParameter(Color color, Widget child) {
16 return Container(key: const Key('k'), color: color, child: child);
Use a `ColoredBox` rather than a `Container` with only a `Color`.
19Widget dynamicColor(dynamic color, Widget child) {
20 return Container(child: child, color: color);
Use a `ColoredBox` rather than a `Container` with only a `Color`.
23Widget prefixedContainer(Widget child) {
24 return m.Container(color: Colors.red, child: child);
Use a `ColoredBox` rather than a `Container` with only a `Color`.
27Widget explicitNew(Widget child) {
28 return new Container(color: Colors.transparent, child: child);
Use a `ColoredBox` rather than a `Container` with only a `Color`.
31Widget explicitNullColor(Widget child) {
32 return Container(color: null, child: child);

Valid

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

Widget alreadyColored(Widget child) {
  return ColoredBox(color: Colors.blue, child: child);
}

Widget nullableColor(Color? color, Widget child) {
  return Container(color: color, child: child);
}

Widget shadeLookupIsNullable(Widget child) {
  return Container(color: Colors.blue[100], child: child);
}

Widget noChild() {
  return Container(color: Colors.blue);
}

Widget extraPadding(Widget child) {
  return Container(
    padding: const EdgeInsets.all(4),
    color: Colors.blue,
    child: child,
  );
}

Widget unprovenColor(BuildContext context, Widget child) {
  return Container(color: Theme.of(context).primaryColor, child: child);
}

Widget decorated(Widget child) {
  return Container(
    color: Colors.blue,
    alignment: Alignment.center,
    child: child,
  );
}

Configure use-colored-box

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

falcon.jsonjson
{
  "linter": {
    "rules": {
      "style": {
        "use-colored-box": "error"
      }
    }
  }
}

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

example.dartdart
// falcon-ignore lint/style/use-colored-box: <reason>
  • use-decorated-boxuse_decorated_boxrecommendedflutter

    Prefers DecoratedBox over a Container that only decorates its child.

  • use-design-system-itemuse-design-system-itemflutter

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

  • 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.