Container used only to size whitespace
ID |
dart.performance.sized_box_for_whitespace |
Severity |
low |
Remediation Complexity |
trivial |
Remediation Risk |
low |
Remediation Effort |
low |
Resource |
Inefficient Api Usage |
Language |
Dart |
Description
Reports a Container whose only configuration is width and/or height, optionally around a single child, where SizedBox expresses exactly the same layout.
Rationale
Container is a composite widget: it inspects the arguments it was given and builds a chain of ConstrainedBox, Padding, DecoratedBox and Align around its child. When only a width and a height are set, all that machinery resolves to a single constraint, so the extra layout nodes are built, laid out and painted on every rebuild for no effect. SizedBox is the primitive for that one job, and because its constructor is const it can also be hoisted out of build entirely, which Container never can.
The following code illustrates the pattern detected by this rule:
class Header extends StatelessWidget {
const Header({super.key});
@override
Widget build(BuildContext context) {
return Column(
children: [
// FLAGGED: Container used only to size whitespace
Container(
width: 4,
height: 8,
child: const Text('title'),
),
// FLAGGED: Container used only to size whitespace
const Container(height: 8, width: 4, child: Text('subtitle')),
// FLAGGED: Container used only to size whitespace
Container(width: 4, child: const Text('gap')),
// FLAGGED: Container used only to size whitespace
Container(height: 8, child: const Text('gap')),
// FLAGGED: Container used only to size whitespace
const Container(width: 4, height: 8),
// FLAGGED: Container used only to size whitespace
const Container(width: 4),
// FLAGGED: Container used only to size whitespace
const Container(height: 8),
Container(padding: EdgeInsets.zero, width: 4, child: const Text('pad')),
Container(color: Colors.red, width: 4, height: 8, child: const Text('bg')),
Container(child: const Text('bare')),
const SizedBox(width: 4, height: 8, child: Text('good')),
const SizedBox(width: 4),
],
);
}
}Remediation
Replace the Container with SizedBox, keeping the width, height and child arguments as they are, and mark it const when the child allows. For a fixed square gap, SizedBox.square reads better; for a gap that should fill the free space of a Row or Column, use Spacer instead of a hard-coded size.