Skip to content

Commit c386acc

Browse files
authored
Fix MaterialStateBorderSide lerp in the Checkbox and chips (flutter#148124)
fixes [`Checkbox` and Chips side with `MaterialStateBorderSide` doesn't lerp in their theme](flutter#135136) ### Code sample <details> <summary>expand to view the code sample</summary> ```dart import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; void main() { testWidgets('test', (WidgetTester tester) async { late ColorScheme colorScheme; Widget buildCheckbox({required Color seedColor}) { colorScheme = ColorScheme.fromSeed(seedColor: seedColor); return MaterialApp( theme: ThemeData( colorScheme: colorScheme, checkboxTheme: CheckboxThemeData( side: MaterialStateBorderSide.resolveWith( (Set<MaterialState> states) { return BorderSide( color: colorScheme.primary, width: 4.0, ); }), ), ), home: Scaffold( body: Center( child: Checkbox( value: false, onChanged: (_) {}, ), ), ), ); } await tester.pumpWidget(buildCheckbox(seedColor: Colors.red)); await tester.pumpAndSettle(); RenderBox getCheckboxRenderer() { return tester.renderObject<RenderBox>(find.byType(Checkbox)); } expect(getCheckboxRenderer(), paints..drrect(color: colorScheme.primary)); await Future<void>.delayed(const Duration(seconds: 3)); await tester.pumpWidget(buildCheckbox(seedColor: Colors.blue)); await tester.pump(); await Future<void>.delayed(const Duration(seconds: 3)); expect(getCheckboxRenderer(), paints..drrect(color: colorScheme.primary)); }); } ``` </details> | Before | After | | --------------- | --------------- | | <img src="https://github.com/flutter/flutter/assets/48603081/6df34104-37ba-4a82-b5cb-7ed4f887992a" /> | <img src="https://github.com/flutter/flutter/assets/48603081/44359248-a101-46eb-a85a-77f976da5f0f" /> |
1 parent 3e14f18 commit c386acc

File tree

4 files changed

+92
-1
lines changed

4 files changed

+92
-1
lines changed

packages/flutter/lib/src/material/checkbox_theme.dart

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,13 @@ class CheckboxThemeData with Diagnosticable {
201201
if (identical(a, b)) {
202202
return a;
203203
}
204-
return BorderSide.lerp(a, b, t);
204+
if (a is MaterialStateBorderSide) {
205+
a = a.resolve(<WidgetState>{});
206+
}
207+
if (b is MaterialStateBorderSide) {
208+
b = b.resolve(<WidgetState>{});
209+
}
210+
return BorderSide.lerp(a!, b!, t);
205211
}
206212
}
207213

packages/flutter/lib/src/material/chip_theme.dart

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -546,6 +546,12 @@ class ChipThemeData with Diagnosticable {
546546
if (a == null && b == null) {
547547
return null;
548548
}
549+
if (a is MaterialStateBorderSide) {
550+
a = a.resolve(<WidgetState>{});
551+
}
552+
if (b is MaterialStateBorderSide) {
553+
b = b.resolve(<WidgetState>{});
554+
}
549555
if (a == null) {
550556
return BorderSide.lerp(BorderSide(width: 0, color: b!.color.withAlpha(0)), b, t);
551557
}

packages/flutter/test/material/checkbox_theme_test.dart

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -471,6 +471,47 @@ void main() {
471471
expect(lerped.shape, const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(2.5))));
472472
expect(lerped.side, const BorderSide(width: 3.5));
473473
});
474+
475+
testWidgets('MaterialStateBorderSide properly lerp in CheckboxThemeData.side', (WidgetTester tester) async {
476+
late ColorScheme colorScheme;
477+
478+
Widget buildCheckbox({ required Color seedColor }) {
479+
colorScheme = ColorScheme.fromSeed(seedColor: seedColor);
480+
return MaterialApp(
481+
theme: ThemeData(
482+
colorScheme: colorScheme,
483+
checkboxTheme: CheckboxThemeData(
484+
side: MaterialStateBorderSide.resolveWith((Set<MaterialState> states) {
485+
return BorderSide(
486+
color: colorScheme.primary,
487+
width: 4.0,
488+
);
489+
}),
490+
),
491+
),
492+
home: Scaffold(
493+
body: Checkbox(
494+
value: false,
495+
onChanged: (_) { },
496+
),
497+
),
498+
);
499+
}
500+
501+
await tester.pumpWidget(buildCheckbox(seedColor: Colors.red));
502+
await tester.pumpAndSettle();
503+
504+
RenderBox getCheckboxRendeBox() {
505+
return tester.renderObject<RenderBox>(find.byType(Checkbox));
506+
}
507+
508+
expect(getCheckboxRendeBox(), paints..drrect(color: colorScheme.primary));
509+
510+
await tester.pumpWidget(buildCheckbox(seedColor: Colors.blue));
511+
await tester.pump(kPressTimeout);
512+
513+
expect(getCheckboxRendeBox(), paints..drrect(color: colorScheme.primary));
514+
});
474515
}
475516

476517
Future<void> _pointGestureToCheckbox(WidgetTester tester) async {

packages/flutter/test/material/chip_theme_test.dart

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1483,6 +1483,44 @@ void main() {
14831483
expect(getIconStyle(tester, deleteIcon)?.color, deleteIconColor);
14841484
});
14851485

1486+
// This is a regression test for https://github.com/flutter/flutter/issues/135136.
1487+
testWidgets('MaterialStateBorderSide properly lerp in ChipThemeData.side', (WidgetTester tester) async {
1488+
late ColorScheme colorScheme;
1489+
1490+
Widget buildChip({ required Color seedColor }) {
1491+
colorScheme = ColorScheme.fromSeed(seedColor: seedColor);
1492+
return MaterialApp(
1493+
theme: ThemeData(
1494+
colorScheme: colorScheme,
1495+
chipTheme: ChipThemeData(
1496+
side: MaterialStateBorderSide.resolveWith((Set<MaterialState> states) {
1497+
return BorderSide(
1498+
color: colorScheme.primary,
1499+
width: 4.0,
1500+
);
1501+
}),
1502+
),
1503+
),
1504+
home: const Scaffold(
1505+
body: RawChip(label: Text('Chip')),
1506+
),
1507+
);
1508+
}
1509+
1510+
await tester.pumpWidget(buildChip(seedColor: Colors.red));
1511+
await tester.pumpAndSettle();
1512+
1513+
RenderBox getChipRenderBox() {
1514+
return tester.renderObject<RenderBox>(find.byType(RawChip));
1515+
}
1516+
1517+
expect(getChipRenderBox(), paints..drrect(color: colorScheme.primary));
1518+
1519+
await tester.pumpWidget(buildChip(seedColor: Colors.blue));
1520+
await tester.pump(kPressTimeout);
1521+
1522+
expect(getChipRenderBox(), paints..drrect(color: colorScheme.primary));
1523+
});
14861524
}
14871525

14881526
class _MaterialStateOutlinedBorder extends StadiumBorder implements MaterialStateOutlinedBorder {

0 commit comments

Comments
 (0)