Container used only to apply a decoration
ID |
dart.performance.use_decorated_box |
Severity |
info |
Remediation Complexity |
trivial |
Remediation Risk |
low |
Remediation Effort |
low |
Resource |
Inefficient Api Usage |
Language |
Dart |
Description
Reports a Container whose only configuration is a decoration around a single child, where DecoratedBox applies the same decoration.
Rationale
Container composes its result from the arguments it was given: a decoration alone resolves to a single DecoratedBox, and everything else in the chain is built, laid out and painted for no effect. Container’s constructor is also not `const, so the widget is reallocated on every rebuild, whereas a const DecoratedBox can be hoisted out of build and short-circuited when the element tree is diffed. Naming the primitive also makes the paint order explicit, instead of leaving a reader to recall whether Container paints its decoration before or behind the child.
The following code illustrates the pattern detected by this rule:
class Card extends StatelessWidget {
const Card({super.key});
@override
Widget build(BuildContext context) {
return Column(
children: [
// FLAGGED: Container used only to apply a decoration
Container(
decoration: const BoxDecoration(color: Colors.blue),
child: const Text('framed'),
),
// FLAGGED: Container used only to apply a decoration
Container(child: const Text('framed'), decoration: myDecoration),
Container(
decoration: const BoxDecoration(color: Colors.blue),
padding: const EdgeInsets.all(8),
child: const Text('padded'),
),
Container(decoration: myDecoration, width: 4, child: const Text('sized')),
Container(child: const Text('bare')),
const DecoratedBox(
decoration: BoxDecoration(color: Colors.blue),
child: Text('good'),
),
],
);
}
}Remediation
Replace the Container with DecoratedBox, passing the same decoration and child, and mark it const where the decoration and child allow. Use position: DecorationPosition.foreground when the decoration must paint over the child. When padding, alignment or a size are needed as well, keep Container - it exists precisely to combine those.