70 lines
2.4 KiB
Plaintext
70 lines
2.4 KiB
Plaintext
Use `SizedBox` instead of `Container`, when need to add a whitespace to layout.
|
|
|
|
== Why is this an issue?
|
|
|
|
In Flutter https://api.flutter.dev/flutter/widgets/SizedBox-class.html[`SizedBox`] represents a widget of a specified size. It is used to control the dimensions of the child widget. https://api.flutter.dev/flutter/widgets/Container-class.html[`Container`] is another Flutter widget, that doesn't only provide width and height, but also applies additional constraints, decorations, transformations, etc. Thus `Container` is a more advanced and at the same time a much heavier widget. It is recommended to not use it, if the only need is to add a whitespace. `SizedBox` is a better option for such simple cases. You can even benefit from a const constructor of a `SizedBox`, if applicable in your case.
|
|
|
|
The rule reports issue on the `Container` instance creation, if:
|
|
|
|
* both `width` and `heigh` are specified and there are no other parameters except optional `key`
|
|
* `child` is specified, at least one of `width` or `heigh` is specified and there are no other parameters except optional `key`
|
|
|
|
=== What is the potential impact?
|
|
|
|
A misuse of a `Container` widget may affect you performance and make the layout overly complicated.
|
|
|
|
== How to fix it
|
|
|
|
Replace `Container` with `SizedBox`
|
|
|
|
=== Code examples
|
|
|
|
==== Noncompliant code example
|
|
|
|
[source,dart,diff-id=1,diff-type=noncompliant]
|
|
----
|
|
List<Widget> widgets(){
|
|
return [
|
|
Container(width: 4, height: 5),
|
|
Container(key: Key("MyWidget"), child: MyWidget(), height: 5)
|
|
];
|
|
}
|
|
----
|
|
|
|
==== Compliant solution
|
|
|
|
[source,dart,diff-id=1,diff-type=compliant]
|
|
----
|
|
List<Widget> widgets(){
|
|
return [
|
|
SizedBox(width: 4, height: 5),
|
|
SizedBox(key: Key("MyWidget"), child: MyWidget(), height: 5)
|
|
];
|
|
}
|
|
----
|
|
|
|
== Resources
|
|
|
|
=== Documentation
|
|
|
|
* Dart Docs - https://dart.dev/tools/linter-rules/sized_box_for_whitespace[Dart Linter rule - sized_box_for_whitespace]
|
|
* Flutter API Reference - https://api.flutter.dev/flutter/widgets/Container-class.html[widgets - Container class]
|
|
* Flutter API Reference - https://api.flutter.dev/flutter/widgets/SizedBox-class.html[widgets - SizedBox class]
|
|
|
|
ifdef::env-github,rspecator-view[]
|
|
|
|
'''
|
|
== Implementation Specification
|
|
(visible only on this page)
|
|
|
|
=== Message
|
|
|
|
Use a 'SizedBox' to add whitespace to a layout.
|
|
|
|
=== Highlighting
|
|
|
|
`Container` constructor invocation without parameters.
|
|
|
|
|
|
endif::env-github,rspecator-view[]
|