-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Add non uniform TableBorder #175773
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add non uniform TableBorder #175773
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code Review
This pull request extends TableBorder to support borderRadius for outer borders with uniform colors but non-uniform widths. The changes include moving inflateRRect and deflateRRect logic to EdgeInsets, refactoring TableBorder to handle different painting scenarios for uniform, color-uniform, and non-uniform borders, and adding associated tests. My feedback primarily focuses on enhancing test coverage for the new painting logic.
| test('TableBorder with non-uniform widths but uniform colors applies border radius', () { | ||
| const TableBorder borderWithRadius = TableBorder( | ||
| top: BorderSide(width: 3.0, color: Color(0xFF0000FF)), | ||
| right: BorderSide(color: Color(0xFF0000FF)), | ||
| bottom: BorderSide(width: 2.0, color: Color(0xFF0000FF)), | ||
| left: BorderSide(width: 1.5, color: Color(0xFF0000FF)), | ||
| borderRadius: BorderRadius.all(Radius.circular(8.0)), | ||
| ); | ||
|
|
||
| expect(borderWithRadius.top.width, isNot(equals(borderWithRadius.bottom.width))); | ||
| expect(borderWithRadius.left.width, isNot(equals(borderWithRadius.right.width))); | ||
|
|
||
| final Color topColor = borderWithRadius.top.color; | ||
| expect(borderWithRadius.right.color, equals(topColor)); | ||
| expect(borderWithRadius.bottom.color, equals(topColor)); | ||
| expect(borderWithRadius.left.color, equals(topColor)); | ||
|
|
||
| expect(borderWithRadius.borderRadius, const BorderRadius.all(Radius.circular(8.0))); | ||
| }); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This test verifies the properties of the TableBorder object, which is a good start. However, it doesn't test the new painting logic in _paintTableBorder, which is the core of this change. To ensure the feature works as expected, please consider adding a test that calls the paint method and verifies that the correct drawing commands are issued on the canvas. This would provide stronger guarantees that the non-uniform border radius rendering is correct. You could use a mock canvas to check that drawDRRect is called with the expected RRects and Paint.
Piinks
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for putting up another PR! Sorry the rebase went poorly. This LGTM - again! :)
justinmc
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Reland LGTM 👍
Recreates the implementation from PR flutter#172441 on a clean branch after resolving rebase issues. Enables border radius when outer border sides have uniform colors but different widths/styles. Also adds inflateRRect and deflateRRect methods to EdgeInsets for consistent handling of rounded rectangles.
3aa8efc to
fa04ffa
Compare
|
autosubmit label was removed for flutter/flutter/175773, because - The status or check suite Google testing has failed. Please fix the issues identified (or deflake) before re-applying this label. |
Re-implementation of PR flutter#172441 <!-- Thanks for filing a pull request! Reviewers are typically assigned within a week of filing a request. To learn more about code review, see our documentation on Tree Hygiene: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md --> ## Add non-uniform border radius support to TableBorder This PR extends TableBorder to support border radius even when the outer border sides have different widths but the same color, similar to the non-uniform border support added to Border in flutter#121921. ### Changes - Enhanced border rendering logic: TableBorder can now apply border radius when outer border sides have uniform colors but non-uniform widths/styles - New helper methods: Added `outerBorderIsUniform` property and `distinctVisibleOuterColors()` method to determine border uniformity - Optimized paint method: Refactored the paint logic to handle three scenarios: 1. Fully uniform borders (existing optimized path) 2. Outer borders with uniform colors but non-uniform widths (new non-uniform border radius support) 3. Completely non-uniform borders (fallback to standard border painting) ### Before/After - Before: TableBorder with border radius required all sides (including inner borders) to be completely identical. - After: TableBorder with border radius only requires outer border colors to be the same, allowing different widths per side. ### Example Usage ```dart TableBorder( top: BorderSide(color: Colors.blue, width: 3.0), right: BorderSide(color: Colors.blue, width: 1.0), // Different width bottom: BorderSide(color: Colors.blue, width: 2.0), // Different width left: BorderSide.none, // No border horizontalInside: BorderSide(color: Colors.red, width: 1.0), // Different color OK verticalInside: BorderSide(color: Colors.red, width: 1.0), // Different color OK borderRadius: BorderRadius.circular(8), // ✅ Now works! ) ``` Fixes: flutter#173193 ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. <!-- Links --> [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md
Roll Flutter from 4a042046a0f1 to b1a28bc065b0 (44 revisions) flutter/flutter@4a04204...b1a28bc 2025-09-25 [email protected] web_ui: avoid crash for showPerformanceOverlay; log 'not supported' once (flutter/flutter#173518) 2025-09-25 [email protected] Ignore upcoming `experimental_member_use` warnings. (flutter/flutter#175969) 2025-09-25 [email protected] Roll Skia from 753ce2221ce7 to 55436d87e414 (16 revisions) (flutter/flutter#176004) 2025-09-25 [email protected] Add google_fonts to team-framework triage guidelines (flutter/flutter#175675) 2025-09-25 [email protected] Add tests for InputDecoration borders (M3 and theme normalization) (flutter/flutter#175838) 2025-09-24 [email protected] Update Flutter's templates to use dot shorthands (flutter/flutter#175891) 2025-09-24 [email protected] In Gradle Flutter task, correctly replace '\ ' with ' '. (flutter/flutter#175815) 2025-09-24 [email protected] Cleans up navigator pop and remove logic (flutter/flutter#175612) 2025-09-24 [email protected] Fix docs in `EditableText` (flutter/flutter#175787) 2025-09-24 [email protected] Fixes SemanticsFlags.isLink mis-translated in dart ui ffi (flutter/flutter#175812) 2025-09-24 [email protected] Update AGP/Java/Gradle comparison when using analyze --suggestions (flutter/flutter#175808) 2025-09-24 [email protected] Fix SliverMainAxisGroup SliverEnsureSemantics support (flutter/flutter#175671) 2025-09-24 [email protected] Migrate to `WidgetStateColor` (flutter/flutter#175573) 2025-09-24 [email protected] Make sure that a FlexibleSpaceBar doesn't crash in 0x0 environment (flutter/flutter#175228) 2025-09-24 [email protected] Roll Fuchsia Test Scripts from BWj3yYC74ud58QhN0... to APSBP-sS-3FX69Ihf... (flutter/flutter#175944) 2025-09-24 [email protected] Make sure that a MaterialApp doesn't crash in 0x0 environment (flutter/flutter#173090) 2025-09-24 [email protected] feat(cupertino): Add selectableDayPredicate parameter to CupertinoDatePicker for selectable day control #171332 (flutter/flutter#171334) 2025-09-24 [email protected] Refactor `FlutterInjectorTest` to use lambdas/method reference (flutter/flutter#175777) 2025-09-24 [email protected] Replace curly braces with lambdas in `KeyEventChannelTest` (flutter/flutter#175729) 2025-09-24 [email protected] [ Widget Preview ] Fix filter by file on Windows (flutter/flutter#175783) 2025-09-24 [email protected] use lambda expressions /method reference to fix linter issue in `DartMessengerTest.java` (flutter/flutter#175733) 2025-09-24 [email protected] Roll Packages from 3413b65 to 117bf63 (9 revisions) (flutter/flutter#175935) 2025-09-24 [email protected] refactor code to use method reference and lambdas in `DartMessengerTest.java` (flutter/flutter#175731) 2025-09-24 [email protected] Simplify/fix ordering of asserts in `TextInputPluginTest` (flutter/flutter#175784) 2025-09-24 [email protected] Introduce a getter for `Project` to get `gradle-wrapper.properties` directly (flutter/flutter#175485) 2025-09-24 [email protected] Change the arguments order in `assertEquals` to fix linter issues (flutter/flutter#175719) 2025-09-24 [email protected] Broken link in NavigationRail documentation (flutter/flutter#175852) 2025-09-24 [email protected] Updates to flutter web triage links (flutter/flutter#175791) 2025-09-24 [email protected] Do not present textures in FlutterMetalLayer if the drawable size changed and the texture's size does not match the new drawable size (flutter/flutter#175450) 2025-09-24 [email protected] Remove comment about trailing commas from templates (flutter/flutter#175864) 2025-09-24 [email protected] Roll Skia from 1c1b19f2ffc3 to 753ce2221ce7 (4 revisions) (flutter/flutter#175909) 2025-09-24 [email protected] Roll Skia from 3191a822cf10 to 1c1b19f2ffc3 (2 revisions) (flutter/flutter#175896) 2025-09-24 [email protected] Roll Skia from cabeab8cb22c to 3191a822cf10 (14 revisions) (flutter/flutter#175894) 2025-09-24 [email protected] Roll Dart SDK from 14b4ced3022a to 899c7340cc4c (4 revisions) (flutter/flutter#175893) 2025-09-24 [email protected] Roll `package:analyzer` forward to `8.2.0`. (flutter/flutter#175849) 2025-09-24 [email protected] Make sure that a VerticalDivider doesn't crash at 0x0 environment (flutter/flutter#174761) 2025-09-24 [email protected] Make sure that Drawer & DrawerHeader don't crash in 0x0 environment (flutter/flutter#174772) 2025-09-24 [email protected] Add an assertion for the relationship between `Visibility.maintainState` and `Visibility.maintainFocusability` (flutter/flutter#175552) 2025-09-24 [email protected] fix: remove final class modifier on MenuController (flutter/flutter#174490) 2025-09-24 [email protected] fix: cupertino sheet broken example with programatic pop (flutter/flutter#175709) 2025-09-24 [email protected] [web] Fix assertion thrown when hot restarting during animation (flutter/flutter#175856) 2025-09-24 [email protected] Add non uniform TableBorder (flutter/flutter#175773) 2025-09-23 [email protected] fix small typo in test docs (flutter/flutter#175776) 2025-09-23 [email protected] Use `assertNull` to simplify code (flutter/flutter#175720) If this roll has caused a breakage, revert this CL and stop the roller ...
Re-implementation of PR flutter#172441 <!-- Thanks for filing a pull request! Reviewers are typically assigned within a week of filing a request. To learn more about code review, see our documentation on Tree Hygiene: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md --> ## Add non-uniform border radius support to TableBorder This PR extends TableBorder to support border radius even when the outer border sides have different widths but the same color, similar to the non-uniform border support added to Border in flutter#121921. ### Changes - Enhanced border rendering logic: TableBorder can now apply border radius when outer border sides have uniform colors but non-uniform widths/styles - New helper methods: Added `outerBorderIsUniform` property and `distinctVisibleOuterColors()` method to determine border uniformity - Optimized paint method: Refactored the paint logic to handle three scenarios: 1. Fully uniform borders (existing optimized path) 2. Outer borders with uniform colors but non-uniform widths (new non-uniform border radius support) 3. Completely non-uniform borders (fallback to standard border painting) ### Before/After - Before: TableBorder with border radius required all sides (including inner borders) to be completely identical. - After: TableBorder with border radius only requires outer border colors to be the same, allowing different widths per side. ### Example Usage ```dart TableBorder( top: BorderSide(color: Colors.blue, width: 3.0), right: BorderSide(color: Colors.blue, width: 1.0), // Different width bottom: BorderSide(color: Colors.blue, width: 2.0), // Different width left: BorderSide.none, // No border horizontalInside: BorderSide(color: Colors.red, width: 1.0), // Different color OK verticalInside: BorderSide(color: Colors.red, width: 1.0), // Different color OK borderRadius: BorderRadius.circular(8), // ✅ Now works! ) ``` Fixes: flutter#173193 ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. <!-- Links --> [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md
Re-implementation of PR #172441
Add non-uniform border radius support to TableBorder
This PR extends TableBorder to support border radius even when the outer border sides have different widths but the same color, similar to the non-uniform border support added to Border in #121921.
Changes
outerBorderIsUniformproperty anddistinctVisibleOuterColors()method to determine border uniformityBefore/After
Example Usage
Fixes: #173193
Pre-launch Checklist
///).