Skip to content

Update OutlinedButton default outline geometry to be backwards compatible#70393

Merged
HansMuller merged 1 commit intoflutter:masterfrom
HansMuller:update_outlined_button_border
Nov 12, 2020
Merged

Update OutlinedButton default outline geometry to be backwards compatible#70393
HansMuller merged 1 commit intoflutter:masterfrom
HansMuller:update_outlined_button_border

Conversation

@HansMuller
Copy link
Contributor

@HansMuller HansMuller commented Nov 12, 2020 •
edited
Loading

Small change to the way the new OutlinedButton draws its outline for the sake of backwards compatibility with original OutlineButton. The change is not easy to see but it has had an impact on some golden image tests.

In the screenshot below, the original button is on the left, new button on the right, and the diff is in the middle.

Screen Shot 2020-11-12 at 10 28 31 AM

The original OutlineButton class includes a custom (private) RoundedRectangleBorder subclass that paints its outline like this:

void paint(Canvas canvas, Rect rect, { TextDirection? textDirection }) {
  switch (side.style) {
    case BorderStyle.none:
      break;
    case BorderStyle.solid:
      if (side.width == 0.0) {
        super.paint(canvas, rect, textDirection: textDirection);
      } else {
        canvas.drawPath(getOuterPath(rect, textDirection: textDirection), side.toPaint()); // !!!
      }
  }
}

Only the line marked with a !!! differs from RoundedRectangleBorder which draws the outline like this:

void paint(Canvas canvas, Rect rect, { TextDirection? textDirection }) {
  switch (side.style) {
    case BorderStyle.none:
      break;
    case BorderStyle.solid:
      final double width = side.width;
      if (width == 0.0) {
        canvas.drawRRect(_adjustBorderRadius(rect, textDirection)!.toRRect(_adjustRect(rect)), side.toPaint());
      } else {
        final RRect outer = _adjustBorderRadius(rect, textDirection)!.toRRect(_adjustRect(rect));
        final RRect inner = outer.deflate(width);
        final Paint paint = Paint()
          ..color = side.color;
        canvas.drawDRRect(outer, inner, paint);
      }
  }
}

This slight difference causes many golden image tests to fail, so the original version has been restored.

@flutter-dashboard flutter-dashboard bot added f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. labels Nov 12, 2020
@google-cla google-cla bot added the cla: yes label Nov 12, 2020
@HansMuller HansMuller requested a review from rami-a November 12, 2020 17:52
rami-a
rami-a approved these changes Nov 12, 2020
View reviewed changes
Copy link
Contributor

@rami-a rami-a left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@HansMuller HansMuller merged commit c6d4a6e into flutter:master Nov 12, 2020
@HansMuller HansMuller deleted the update_outlined_button_border branch November 12, 2020 18:36
@HansMuller HansMuller mentioned this pull request Nov 21, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@rami-a rami-a rami-a approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@HansMuller @rami-a