Skip to content

Commit ae8d051

Browse files
authored
[M3] Update checkbox shape value (flutter#120976)
* update m3 values * update test formatting * update crswap * update test * update token value * update tests
1 parent 8d305b6 commit ae8d051

File tree

3 files changed

+53
-5
lines changed

3 files changed

+53
-5
lines changed

dev/tools/gen_defaults/lib/checkbox_template.dart

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,11 @@ class _${blockName}DefaultsM3 extends CheckboxThemeData {
110110
111111
@override
112112
VisualDensity get visualDensity => _theme.visualDensity;
113+
114+
@override
115+
OutlinedBorder get shape => RoundedRectangleBorder(
116+
borderRadius: BorderRadius.circular(${tokens['md.comp.checkbox.unselected.outline.width']}),
117+
);
113118
}
114119
''';
115120
}

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

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -305,7 +305,7 @@ class Checkbox extends StatefulWidget {
305305
///
306306
/// If this property is null then [CheckboxThemeData.shape] of [ThemeData.checkboxTheme]
307307
/// is used. If that's null then the shape will be a [RoundedRectangleBorder]
308-
/// with a circular corner radius of 1.0.
308+
/// with a circular corner radius of 1.0 in Material 2, and 2.0 in Material 3.
309309
final OutlinedBorder? shape;
310310

311311
/// {@template flutter.material.checkbox.side}
@@ -522,9 +522,7 @@ class _CheckboxState extends State<Checkbox> with TickerProviderStateMixin, Togg
522522
..checkColor = effectiveCheckColor
523523
..value = value
524524
..previousValue = _previousValue
525-
..shape = widget.shape ?? checkboxTheme.shape ?? const RoundedRectangleBorder(
526-
borderRadius: BorderRadius.all(Radius.circular(1.0)),
527-
)
525+
..shape = widget.shape ?? checkboxTheme.shape ?? defaults.shape!
528526
..side = _resolveSide(widget.side) ?? _resolveSide(checkboxTheme.side),
529527
),
530528
);
@@ -759,6 +757,11 @@ class _CheckboxDefaultsM2 extends CheckboxThemeData {
759757

760758
@override
761759
VisualDensity get visualDensity => _theme.visualDensity;
760+
761+
@override
762+
OutlinedBorder get shape => const RoundedRectangleBorder(
763+
borderRadius: BorderRadius.all(Radius.circular(1.0)),
764+
);
762765
}
763766

764767
// BEGIN GENERATED TOKEN PROPERTIES - Checkbox
@@ -869,6 +872,11 @@ class _CheckboxDefaultsM3 extends CheckboxThemeData {
869872

870873
@override
871874
VisualDensity get visualDensity => _theme.visualDensity;
875+
876+
@override
877+
OutlinedBorder get shape => RoundedRectangleBorder(
878+
borderRadius: BorderRadius.circular(2.0),
879+
);
872880
}
873881

874882
// END GENERATED TOKEN PROPERTIES - Checkbox

packages/flutter/test/material/checkbox_test.dart

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1698,7 +1698,7 @@ void main() {
16981698
paints
16991699
..drrect(
17001700
color: borderColor,
1701-
outer: RRect.fromLTRBR(15, 15, 33, 33, const Radius.circular(1)),
1701+
outer: RRect.fromLTRBR(15, 15, 33, 33, const Radius.circular(2)),
17021702
inner: RRect.fromLTRBR(19, 19, 29, 29, Radius.zero),
17031703
),
17041704
);
@@ -1735,6 +1735,41 @@ void main() {
17351735
await gestureLongPress.up();
17361736
await tester.pump();
17371737
});
1738+
1739+
testWidgets('Checkbox has correct default shape - M3', (WidgetTester tester) async {
1740+
final ThemeData themeData = ThemeData(useMaterial3: true);
1741+
1742+
Widget buildApp() {
1743+
return MaterialApp(
1744+
theme: themeData,
1745+
home: Material(
1746+
child: Center(
1747+
child: StatefulBuilder(builder: (BuildContext context, StateSetter setState) {
1748+
return Checkbox(
1749+
value: false,
1750+
onChanged: (bool? newValue) {},
1751+
1752+
);
1753+
}),
1754+
),
1755+
),
1756+
);
1757+
}
1758+
1759+
await tester.pumpWidget(buildApp());
1760+
await tester.pumpAndSettle();
1761+
1762+
final OutlinedBorder? expectedShape = themeData.checkboxTheme.shape;
1763+
expect(tester.widget<Checkbox>(find.byType(Checkbox)).shape, expectedShape);
1764+
expect(
1765+
Material.of(tester.element(find.byType(Checkbox))),
1766+
paints
1767+
..drrect(
1768+
outer: RRect.fromLTRBR(15.0, 15.0, 33.0, 33.0, const Radius.circular(2)),
1769+
inner: RRect.fromLTRBR(17.0, 17.0, 31.0, 31.0, Radius.zero),
1770+
),
1771+
);
1772+
});
17381773
}
17391774

17401775
class _SelectedGrabMouseCursor extends MaterialStateMouseCursor {

0 commit comments

Comments
 (0)