[Material Cross Imports] Clean up Material Divider usages#187300
[Material Cross Imports] Clean up Material Divider usages#187300navaronbracke wants to merge 2 commits into
Conversation
There was a problem hiding this comment.
Code Review
This pull request replaces the Divider widget with custom divider implementations using Container across various examples, tests, and documentation, and updates some imports from material.dart to widgets.dart. The review feedback recommends optimizing these custom dividers by replacing Container with a combination of SizedBox and ColoredBox inside a const Padding to enable compile-time evaluation and improve performance. Additionally, it is suggested to instantiate ExampleWidget with const where applicable.
| return const MaterialApp(home: ExampleWidget()); | ||
| return WidgetsApp( | ||
| color: const Color(0xFFFFFFFF), | ||
| home: ExampleWidget(), |
| Widget buildDivider() { | ||
| return Padding( | ||
| padding: const EdgeInsets.all(4), | ||
| child: Container( | ||
| color: const Color(0xFF000000), | ||
| height: 4, | ||
| width: double.infinity, | ||
| ), | ||
| ); | ||
| } |
There was a problem hiding this comment.
Using Container with only color, height, and width is less efficient than using a combination of SizedBox and ColoredBox. Additionally, Container does not have a const constructor, which prevents the entire helper method's returned widget tree from being evaluated at compile time. Refactoring this to use const Padding with SizedBox and ColoredBox improves performance and allows the widget tree to be const.
| Widget buildDivider() { | |
| return Padding( | |
| padding: const EdgeInsets.all(4), | |
| child: Container( | |
| color: const Color(0xFF000000), | |
| height: 4, | |
| width: double.infinity, | |
| ), | |
| ); | |
| } | |
| Widget buildDivider() { | |
| return const Padding( | |
| padding: EdgeInsets.all(4), | |
| child: SizedBox( | |
| height: 4, | |
| width: double.infinity, | |
| child: ColoredBox( | |
| color: Color(0xFF000000), | |
| ), | |
| ), | |
| ); | |
| } |
References
- The style guide suggests assessing whether the code can be made simpler or refactored to enhance readability and maintainability. (link)
| separatorBuilder: (_, _) => Padding( | ||
| padding: const EdgeInsets.all(4), | ||
| child: Container( | ||
| color: const Color(0xFF000000), | ||
| height: 4, | ||
| width: double.infinity, | ||
| ), | ||
| ), |
There was a problem hiding this comment.
Using Container with only color, height, and width is less efficient than using a combination of SizedBox and ColoredBox. Additionally, Container does not have a const constructor, which prevents the returned widget tree from being evaluated at compile time. Refactoring this to use const Padding with SizedBox and ColoredBox improves performance and allows the widget tree to be const.
| separatorBuilder: (_, _) => Padding( | |
| padding: const EdgeInsets.all(4), | |
| child: Container( | |
| color: const Color(0xFF000000), | |
| height: 4, | |
| width: double.infinity, | |
| ), | |
| ), | |
| separatorBuilder: (_, _) => const Padding( | |
| padding: EdgeInsets.all(4), | |
| child: SizedBox( | |
| height: 4, | |
| width: double.infinity, | |
| child: ColoredBox( | |
| color: Color(0xFF000000), | |
| ), | |
| ), | |
| ), |
References
- The style guide suggests assessing whether the code can be made simpler or refactored to enhance readability and maintainability. (link)
| Widget buildDivider() { | ||
| return Padding( | ||
| padding: const EdgeInsets.all(4), | ||
| child: Container( | ||
| color: const Color(0xFF000000), | ||
| height: 4, | ||
| width: double.infinity, | ||
| ), | ||
| ); | ||
| } |
There was a problem hiding this comment.
Using Container with only color, height, and width is less efficient than using a combination of SizedBox and ColoredBox. Additionally, Container does not have a const constructor, which prevents the entire helper method's returned widget tree from being evaluated at compile time. Refactoring this to use const Padding with SizedBox and ColoredBox improves performance and allows the widget tree to be const.
| Widget buildDivider() { | |
| return Padding( | |
| padding: const EdgeInsets.all(4), | |
| child: Container( | |
| color: const Color(0xFF000000), | |
| height: 4, | |
| width: double.infinity, | |
| ), | |
| ); | |
| } | |
| Widget buildDivider() { | |
| return const Padding( | |
| padding: EdgeInsets.all(4), | |
| child: SizedBox( | |
| height: 4, | |
| width: double.infinity, | |
| child: ColoredBox( | |
| color: Color(0xFF000000), | |
| ), | |
| ), | |
| ); | |
| } |
References
- The style guide suggests assessing whether the code can be made simpler or refactored to enhance readability and maintainability. (link)
| void main() { | ||
| testWidgets('shows font features', (WidgetTester tester) async { | ||
| await tester.pumpWidget(const MaterialApp(home: example.ExampleWidget())); | ||
| await tester.pumpWidget(example.ExampleWidget()); |
There was a problem hiding this comment.
| Widget _buildDivider() { | ||
| return Padding( | ||
| padding: const EdgeInsets.all(4), | ||
| child: Container(color: const Color(0xFF000000), height: 4, width: double.infinity), | ||
| ); | ||
| } |
There was a problem hiding this comment.
Using Container with only color, height, and width is less efficient than using a combination of SizedBox and ColoredBox. Additionally, Container does not have a const constructor, which prevents the entire helper method's returned widget tree from being evaluated at compile time. Refactoring this to use const Padding with SizedBox and ColoredBox improves performance and allows the widget tree to be const.
Widget _buildDivider() {
return const Padding(
padding: EdgeInsets.all(4),
child: SizedBox(
height: 4,
width: double.infinity,
child: ColoredBox(color: Color(0xFF000000)),
),
);
}References
- The style guide suggests assessing whether the code can be made simpler or refactored to enhance readability and maintainability. (link)
| Padding( | ||
| padding: const EdgeInsets.all(4), | ||
| child: Container( | ||
| color: const Color(0xFF000000), | ||
| height: 5, | ||
| width: double.infinity, | ||
| ), | ||
| ), |
There was a problem hiding this comment.
Using Container with only color, height, and width is less efficient than using a combination of SizedBox and ColoredBox. Additionally, Container does not have a const constructor, which prevents the returned widget tree from being evaluated at compile time. Refactoring this to use const Padding with SizedBox and ColoredBox improves performance and allows the widget tree to be const.
| Padding( | |
| padding: const EdgeInsets.all(4), | |
| child: Container( | |
| color: const Color(0xFF000000), | |
| height: 5, | |
| width: double.infinity, | |
| ), | |
| ), | |
| const Padding( | |
| padding: EdgeInsets.all(4), | |
| child: SizedBox( | |
| height: 5, | |
| width: double.infinity, | |
| child: ColoredBox(color: Color(0xFF000000)), | |
| ), | |
| ), |
References
- The style guide suggests assessing whether the code can be made simpler or refactored to enhance readability and maintainability. (link)
This PR cleans up usages of the Material
Dividerin areas where it was used for convenience. (i.e. examples/api which didn't have anything to do withexamples/api/material)This was left over from when we discussed it specifically for tests that used it.
See #177415
Fixes #180501
For the desktop reviewers: There is a replacement of
Dividerin the multiple windows example, although the test for it does not assert on finding the divider.If you had to change anything in the flutter/tests repo, include a link to the migration guide as per the breaking change policy.
Pre-launch Checklist
///).If you need help, consider asking for advice on the #hackers-new channel on Discord.
If this change needs to override an active code freeze, provide a comment explaining why. The code freeze workflow can be overridden by code reviewers. See pinned issues for any active code freezes with guidance.
Note: The Flutter team is currently trialing the use of Gemini Code Assist for GitHub. Comments from the
gemini-code-assistbot should not be taken as authoritative feedback from the Flutter team. If you find its comments useful you can update your code accordingly, but if you are unsure or disagree with the feedback, please feel free to wait for a Flutter team member's review for guidance on which automated comments should be addressed.