use_decorated_box seems to be wrong: Its fix is not equivalent and changes UI #58683
Description
Hi thanks for the linter! I use linter a lot, and when the use_decorated_box suggests me to replace Container with DecoratedBox I did that. Later I realized it has bugs.
A very simple reproducible sample is like:
Container(
decoration: BoxDecoration(
border: Border.all(width: 1),
),
child: MyChildWidget(),
)
With its auto-fixed DecoratedBox version:
DecoratedBox(
decoration: BoxDecoration(
border: Border.all(width: 1),
),
child: MyChildWidget(),
)
Suppose originally the page is 100x100 pixel. Then, the MyChildWidget in Container version will be 99x99, while that in DecoratedBox version will be 100x100 - no padding is automatically added to avoid the children to collide with the decoration! This caused some of my UI to have subtle bugs later on.
By the way, we can confirm this when looking at source code of Container:
EdgeInsetsGeometry? get _paddingIncludingDecoration {
if (decoration == null || decoration!.padding == null)
return padding;
final EdgeInsetsGeometry? decorationPadding = decoration!.padding;
if (padding == null)
return decorationPadding;
return padding!.add(decorationPadding!);
}
Widget build() {
...
final EdgeInsetsGeometry? effectivePadding = _paddingIncludingDecoration;
if (effectivePadding != null)
current = Padding(padding: effectivePadding, child: current);
if (decoration != null)
current = DecoratedBox(decoration: decoration!, child: current);
...
}
So, if Container.decoration exists, it will automatically extra pad itself.