[Linter] `use_padding` lint rule

[ricardodalarme]

Proposal for New Dart Lint Rule

TLDR

Add lint rule to avoid using Container with only a margin property.

Motivation

Using Container with only a margin property introduces an unnecessary widget in the widget tree, as Container adds a range of unused functionalities (decoration, padding, alignment) in this case. Replacing Container with Padding improves performance and makes the widget tree more readable. Padding is also a constant widget, which tends to be more performative.

Alternatives

Instead of creating a new rule, this could be added as an enhancement to the existing avoid_unnecessary_containers rule.

Lint Rule Implementation

• Rule Name: use_padding
• Description: Warns when a Container is used with only a margin property, suggesting the use of Padding instead.
• Severity Level: WARNING (since it is a performance and readability improvement, not a breaking issue)

Code Examples

Bad

Container(
  margin: EdgeInsets.all(8),
  child: Text("Hello, World!"),
);

Good

Padding(
  padding: EdgeInsets.all(8),
  child: Text("Hello, World!"),
);

[dart-github-bot]

Summary: This issue proposes a new Dart lint rule, prefer_padding_over_margin_container, to warn developers when using Container with only a margin property, suggesting the use of Padding instead. This is because Padding is more performant and results in a cleaner widget tree.

[srawlins]

CC @gspencergoog what do you think of this suggested lint rule? Would flutter recommend this rule?

[gspencergoog]

It's just another type of unnecessary Container, so my first inclination was to add it to avoid_unnecessary_containers.

However, it looks like we already have one for Containers that only have a color (ColoredBox) (use_colored_box) or only have a decoration (replace with DecoratedBox)(use_decorated_box), so maybe the granularity of the lint messages is finer than I thought. In that case, we should probably add one for each of these cases too:

• use_padding
  • For Containers that only have a margin (replace with Padding) (as OP suggests)
  • For Containers that only have a padding (replace with Padding)
  • I suppose you could suggest/fix it if it has only either or both of margin and padding.
• use_align
  • For Containers that only have an alignment (replace with Align, or Center when the alignment is Alignment.center)

[ricardodalarme]

We could also extend this behavior to other props as well:

• Container with only alignment -> Align widget
• Container with only transform -> Transform widget
• Container with only constraints -> ConstrainedBox widget

[gspencergoog]

We also have sized_box_for_whitespace, but we should probably also recommend SizedBox if the container only has width and/or height set. (called use_sized_box?)