development/flutter
development/flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter synced 2024-10-13 11:42:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update OutlinedButton default outline geometry to be backwards compatible (#70393)

Browse source
This commit is contained in:
Hans Muller 2020-11-12 10:36:39 -08:00 committed by GitHub
parent 0436886ed5
commit c6d4a6ef5c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 101 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
packages/flutter/lib/src/material/outlined_button.dart
View file

@ -242,7 +242,7 @@ class OutlinedButton extends ButtonStyleButton {
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.12),
width: 1,
),
shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(4))),
shape: const _Outline(borderRadius: BorderRadius.all(Radius.circular(4))),
enabledMouseCursor: SystemMouseCursors.click,
disabledMouseCursor: SystemMouseCursors.forbidden,
visualDensity: theme.visualDensity,
@ -349,3 +349,69 @@ class _OutlinedButtonWithIconChild extends StatelessWidget {
);
}
}
// This subclass only exists for the sake of backwards compatibility with the
// outline drawn by the original OutlineButton widget. The paint override
// draws a Path that's stroked with BorderSide, rather than filling a rounded
// rect whose inner path is the outer path inset by the BorderSide's width.
class _Outline extends RoundedRectangleBorder {
const _Outline({
BorderSide side = BorderSide.none,
required BorderRadiusGeometry borderRadius,
}) : super(side: side, borderRadius: borderRadius);
@override
ShapeBorder scale(double t) {
return _Outline(
side: side.scale(t),
borderRadius: borderRadius * t,
);
}
@override
ShapeBorder? lerpFrom(ShapeBorder? a, double t) {
assert(t != null);
if (a is _Outline) {
return _Outline(
side: BorderSide.lerp(a.side, side, t),
borderRadius: BorderRadiusGeometry.lerp(a.borderRadius, borderRadius, t)!,
);
}
return super.lerpFrom(a, t);
}
@override
ShapeBorder? lerpTo(ShapeBorder? b, double t) {
assert(t != null);
if (b is _Outline) {
return _Outline(
side: BorderSide.lerp(side, b.side, t),
borderRadius: BorderRadiusGeometry.lerp(borderRadius, b.borderRadius, t)!,
);
}
return super.lerpTo(b, t);
}
@override
_Outline copyWith({ BorderSide? side, BorderRadius? borderRadius }) {
return _Outline(
side: side ?? this.side,
borderRadius: borderRadius ?? this.borderRadius,
);
}
@override
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());
}
}
}
}

60
packages/flutter/test/material/outlined_button_test.dart
View file

@ -40,13 +40,12 @@ void main() {
expect(material.color, Colors.transparent);
expect(material.elevation, 0.0);
expect(material.shadowColor, const Color(0xff000000));
expect(material.shape, RoundedRectangleBorder(
side: BorderSide(
width: 1,
color: colorScheme.onSurface.withOpacity(0.12),
),
borderRadius: BorderRadius.circular(4.0),
));
expect(material.shape, isInstanceOf<RoundedRectangleBorder>());
RoundedRectangleBorder materialShape = material.shape! as RoundedRectangleBorder;
expect(materialShape.side, BorderSide(width: 1, color: colorScheme.onSurface.withOpacity(0.12)));
expect(materialShape.borderRadius, BorderRadius.circular(4.0));
expect(material.textStyle!.color, colorScheme.primary);
expect(material.textStyle!.fontFamily, 'Roboto');
expect(material.textStyle!.fontSize, 14);
@ -71,13 +70,12 @@ void main() {
expect(material.color, Colors.transparent);
expect(material.elevation, 0.0);
expect(material.shadowColor, const Color(0xff000000));
expect(material.shape, RoundedRectangleBorder(
side: BorderSide(
width: 1,
color: colorScheme.onSurface.withOpacity(0.12),
),
borderRadius: BorderRadius.circular(4.0),
));
expect(material.shape, isInstanceOf<RoundedRectangleBorder>());
materialShape = material.shape! as RoundedRectangleBorder;
expect(materialShape.side, BorderSide(width: 1, color: colorScheme.onSurface.withOpacity(0.12)));
expect(materialShape.borderRadius, BorderRadius.circular(4.0));
expect(material.textStyle!.color, colorScheme.primary);
expect(material.textStyle!.fontFamily, 'Roboto');
expect(material.textStyle!.fontSize, 14);
@ -113,13 +111,12 @@ void main() {
expect(material.color, Colors.transparent);
expect(material.elevation, 0.0);
expect(material.shadowColor, const Color(0xff000000));
expect(material.shape, RoundedRectangleBorder(
side: BorderSide(
width: 1,
color: colorScheme.onSurface.withOpacity(0.12),
),
borderRadius: BorderRadius.circular(4.0),
));
expect(material.shape, isInstanceOf<RoundedRectangleBorder>());
materialShape = material.shape! as RoundedRectangleBorder;
expect(materialShape.side, BorderSide(width: 1, color: colorScheme.onSurface.withOpacity(0.12)));
expect(materialShape.borderRadius, BorderRadius.circular(4.0));
expect(material.textStyle!.color, colorScheme.primary);
expect(material.textStyle!.fontFamily, 'Roboto');
expect(material.textStyle!.fontSize, 14);
@ -147,13 +144,12 @@ void main() {
expect(material.color, Colors.transparent);
expect(material.elevation, 0.0);
expect(material.shadowColor, const Color(0xff000000));
expect(material.shape, RoundedRectangleBorder(
side: BorderSide(
width: 1,
color: colorScheme.onSurface.withOpacity(0.12),
),
borderRadius: BorderRadius.circular(4.0),
));
expect(material.shape, isInstanceOf<RoundedRectangleBorder>());
materialShape = material.shape! as RoundedRectangleBorder;
expect(materialShape.side, BorderSide(width: 1, color: colorScheme.onSurface.withOpacity(0.12)));
expect(materialShape.borderRadius, BorderRadius.circular(4.0));
expect(material.textStyle!.color, colorScheme.onSurface.withOpacity(0.38));
expect(material.textStyle!.fontFamily, 'Roboto');
expect(material.textStyle!.fontSize, 14);
@ -546,12 +542,12 @@ void main() {
final Finder outlinedButton = find.byType(OutlinedButton);
// Default, not disabled.
expect(outlinedButton, paints..drrect(color: defaultColor));
expect(outlinedButton, paints..path(color: defaultColor));
// Focused.
focusNode.requestFocus();
await tester.pumpAndSettle();
expect(outlinedButton, paints..drrect(color: focusedColor));
expect(outlinedButton, paints..path(color: focusedColor));
// Hovered.
final Offset center = tester.getCenter(find.byType(OutlinedButton));
@ -562,12 +558,12 @@ void main() {
addTearDown(gesture.removePointer);
await gesture.moveTo(center);
await tester.pumpAndSettle();
expect(outlinedButton, paints..drrect(color: hoverColor));
expect(outlinedButton, paints..path(color: hoverColor));
// Highlighted (pressed).
await gesture.down(center);
await tester.pumpAndSettle();
expect(outlinedButton, paints..drrect(color: pressedColor));
expect(outlinedButton, paints..path(color: pressedColor));
});
testWidgets('OutlinedButton onPressed and onLongPress callbacks are correctly called when non-null', (WidgetTester tester) async {

10
packages/flutter/test/material/outlined_button_theme_test.dart
View file

@ -34,10 +34,12 @@ void main() {
expect(material.color, Colors.transparent);
expect(material.elevation, 0.0);
expect(material.shadowColor, Colors.black);
expect(material.shape, RoundedRectangleBorder(
side: BorderSide(width: 1, color: colorScheme.onSurface.withOpacity(0.12)),
borderRadius: BorderRadius.circular(4.0),
));
expect(material.shape, isInstanceOf<RoundedRectangleBorder>());
final RoundedRectangleBorder materialShape = material.shape! as RoundedRectangleBorder;
expect(materialShape.side, BorderSide(width: 1, color: colorScheme.onSurface.withOpacity(0.12)));
expect(materialShape.borderRadius, BorderRadius.circular(4.0));
expect(material.textStyle!.color, colorScheme.primary);
expect(material.textStyle!.fontFamily, 'Roboto');
expect(material.textStyle!.fontSize, 14);