falconGitHub

use-decorated-box

Same as use_decorated_box in Dart lints

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

Prefers DecoratedBox over a Container that only decorates its child.

A Container whose only arguments are decoration and child (plus an optional key) builds the same tree as a DecoratedBox, which is lighter and has a const constructor. Only invocations that resolve to Flutter's Container are considered, including declarations indexed while analyzing Flutter itself. Any positional or other named argument keeps the Container.

Container(decoration: BoxDecoration(), child: child);    // BAD
DecoratedBox(decoration: BoxDecoration(), child: child); // GOOD

Invalid

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

Widget decorationAndChild(Widget child) {
  return Container(
    decoration: const BoxDecoration(),
    child: child,
  );
}

Widget childFirst(Widget child) {
  return Container(child: child, decoration: BoxDecoration());
}

Widget withKey(Widget child) {
  return Container(
    key: const Key('box'),
    decoration: BoxDecoration(color: Colors.red),
    child: child,
  );
}

Widget prefixed(Widget child) {
  return m.Container(decoration: m.BoxDecoration(), child: child);
}

Widget explicitNew(Widget child) {
  return new Container(decoration: BoxDecoration(), child: child);
}

Widget nested(Widget child) {
  return Center(
    child: Container(decoration: BoxDecoration(), child: child),
  );
}

Widget widgetLibraryContainer(Widget child) {
  return widgets.Container(decoration: const BoxDecoration(), child: child);
}
Use `DecoratedBox` rather than a `Container` with only a `Decoration`.
5Widget decorationAndChild(Widget child) {
6 return Container(
Use `DecoratedBox` rather than a `Container` with only a `Decoration`.
12Widget childFirst(Widget child) {
13 return Container(child: child, decoration: BoxDecoration());
Use `DecoratedBox` rather than a `Container` with only a `Decoration`.
16Widget withKey(Widget child) {
17 return Container(
Use `DecoratedBox` rather than a `Container` with only a `Decoration`.
24Widget prefixed(Widget child) {
25 return m.Container(decoration: m.BoxDecoration(), child: child);
Use `DecoratedBox` rather than a `Container` with only a `Decoration`.
28Widget explicitNew(Widget child) {
29 return new Container(decoration: BoxDecoration(), child: child);
Use `DecoratedBox` rather than a `Container` with only a `Decoration`.
33 return Center(
34 child: Container(decoration: BoxDecoration(), child: child),
Use `DecoratedBox` rather than a `Container` with only a `Decoration`.
38Widget widgetLibraryContainer(Widget child) {
39 return widgets.Container(decoration: const BoxDecoration(), child: child);

Valid

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

Widget alreadyDecorated(Widget child) {
  return DecoratedBox(decoration: const BoxDecoration(), child: child);
}

Widget noChild() {
  return Container(decoration: const BoxDecoration());
}

Widget noDecoration(Widget child) {
  return Container(child: child);
}

Widget extraPadding(Widget child) {
  return Container(
    padding: const EdgeInsets.all(8),
    decoration: const BoxDecoration(),
    child: child,
  );
}

Widget extraForeground(Widget child) {
  return Container(
    foregroundDecoration: const BoxDecoration(),
    decoration: const BoxDecoration(),
    child: child,
  );
}

Widget sized(Widget child) {
  return Container(width: 10, decoration: const BoxDecoration(), child: child);
}

Configure use-decorated-box

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

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

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

example.dartdart
// falcon-ignore lint/style/use-decorated-box: <reason>
  • 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.

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