Add side to Radio (flutter#171217)

ValentinVignal · mboetger · commit 5903986478ec · 2025-07-18T10:38:36.000-07:00
Part of flutter#168787 This PR adds `side` parameter to `Radio` to be able to control its color and width. This allows me to implement something like: https://github.com/user-attachments/assets/8065df9b-4cea-48b6-ba34-21379a831a2e In order to make it non breaking, when absent, it uses the `fillColor` ## 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. If you need help, consider asking for advice on the #hackers-new channel on [Discord].  [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
diff --git a/examples/api/lib/material/radio/radio.1.dart b/examples/api/lib/material/radio/radio.1.dart
@@ -0,0 +1,99 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+
+/// Flutter code sample for [Radio] to showcase how to customize radio style.
+
+void main() => runApp(const RadioExampleApp());
+
+class RadioExampleApp extends StatelessWidget {
+  const RadioExampleApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: Scaffold(
+        appBar: AppBar(title: const Text('Radio Sample')),
+        body: const Center(child: RadioExample()),
+      ),
+    );
+  }
+}
+
+enum RadioType { fillColor, backgroundColor, side }
+
+class RadioExample extends StatefulWidget {
+  const RadioExample({super.key});
+
+  @override
+  State<RadioExample> createState() => _RadioExampleState();
+}
+
+class _RadioExampleState extends State<RadioExample> {
+  RadioType? _radioType = RadioType.fillColor;
+
+  @override
+  Widget build(BuildContext context) {
+    return RadioGroup<RadioType>(
+      groupValue: _radioType,
+      onChanged: (RadioType? value) {
+        setState(() {
+          _radioType = value;
+        });
+      },
+      child: Column(
+        children: <Widget>[
+          ListTile(
+            title: const Text('Fill color'),
+            leading: Radio<RadioType>(
+              value: RadioType.fillColor,
+              fillColor: WidgetStateColor.resolveWith((Set<WidgetState> states) {
+                if (states.contains(WidgetState.selected)) {
+                  return Colors.deepPurple;
+                } else {
+                  return Colors.deepPurple.shade200;
+                }
+              }),
+            ),
+          ),
+          ListTile(
+            title: const Text('Background color'),
+            leading: Radio<RadioType>(
+              value: RadioType.backgroundColor,
+              backgroundColor: WidgetStateColor.resolveWith((Set<WidgetState> states) {
+                if (states.contains(WidgetState.selected)) {
+                  return Colors.greenAccent.withOpacity(0.5);
+                } else {
+                  return Colors.grey.shade300.withOpacity(0.3);
+                }
+              }),
+            ),
+          ),
+          ListTile(
+            title: const Text('Side'),
+            leading: Radio<RadioType>(
+              value: RadioType.side,
+              side: WidgetStateBorderSide.resolveWith((Set<WidgetState> states) {
+                if (states.contains(MaterialState.selected)) {
+                  return const BorderSide(
+                    color: Colors.red,
+                    width: 4,
+                    strokeAlign: BorderSide.strokeAlignCenter,
+                  );
+                } else {
+                  return const BorderSide(
+                    color: Colors.grey,
+                    width: 1.5,
+                    strokeAlign: BorderSide.strokeAlignCenter,
+                  );
+                }
+              }),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/examples/api/test/material/radio/radio.1_test.dart b/examples/api/test/material/radio/radio.1_test.dart
@@ -0,0 +1,51 @@
+// Copyright 2014 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:flutter_api_samples/material/radio/radio.1.dart' as example;
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('Radio colors can be changed', (WidgetTester tester) async {
+    await tester.pumpWidget(const example.RadioExampleApp());
+
+    expect(find.widgetWithText(AppBar, 'Radio Sample'), findsOne);
+    expect(find.widgetWithText(ListTile, 'Fill color'), findsOne);
+    expect(find.widgetWithText(ListTile, 'Background color'), findsOne);
+    expect(find.widgetWithText(ListTile, 'Side'), findsOne);
+
+    final Radio<example.RadioType> radioFillColor = tester.widget<Radio<example.RadioType>>(
+      find.byType(Radio<example.RadioType>).first,
+    );
+    expect(
+      radioFillColor.fillColor!.resolve(const <WidgetState>{WidgetState.selected}),
+      Colors.deepPurple,
+    );
+    expect(radioFillColor.fillColor!.resolve(const <WidgetState>{}), Colors.deepPurple.shade200);
+
+    final Radio<example.RadioType> radioBackgroundColor = tester.widget<Radio<example.RadioType>>(
+      find.byType(Radio<example.RadioType>).at(1),
+    );
+    expect(
+      radioBackgroundColor.backgroundColor!.resolve(const <WidgetState>{WidgetState.selected}),
+      Colors.greenAccent.withOpacity(0.5),
+    );
+    expect(
+      radioBackgroundColor.backgroundColor!.resolve(const <WidgetState>{}),
+      Colors.grey.shade300.withOpacity(0.3),
+    );
+
+    final Radio<example.RadioType> radioSide = tester.widget<Radio<example.RadioType>>(
+      find.byType(Radio<example.RadioType>).last,
+    );
+    expect(
+      (radioSide.side! as WidgetStateBorderSide).resolve(const <WidgetState>{WidgetState.selected}),
+      const BorderSide(color: Colors.red, width: 4, strokeAlign: BorderSide.strokeAlignCenter),
+    );
+    expect(
+      (radioSide.side! as WidgetStateBorderSide).resolve(const <WidgetState>{}),
+      const BorderSide(color: Colors.grey, width: 1.5, strokeAlign: BorderSide.strokeAlignCenter),
+    );
+  });
+}
diff --git a/packages/flutter/lib/src/material/radio.dart b/packages/flutter/lib/src/material/radio.dart
@@ -64,6 +64,20 @@ const double _kInnerRadius = 4.5;
 /// ** See code in examples/api/lib/material/radio/radio.0.dart **
 /// {@end-tool}
 ///
+/// {@tool dartpad}
+/// Here is an example of how the you can override the default theme of a
+/// [Radio] with [WidgetStateProperty].
+///
+/// In this example:
+/// - The first [Radio] uses a custom [fillColor] that changes depending on whether
+///   the radio button is selected.
+/// - The second [Radio] applies a different [backgroundColor] based on its selection state.
+/// - The third [Radio] customizes the [side] property to display a different border color
+///   when selected or unselected.
+///
+/// ** See code in examples/api/lib/material/radio/radio.1.dart **
+/// {@end-tool}
+///
 /// See also:
 ///
 ///  * [RadioListTile], which combines this widget with a [ListTile] so that
@@ -107,6 +121,7 @@ class Radio<T> extends StatefulWidget {
     this.enabled,
     this.groupRegistry,
     this.backgroundColor,
+    this.side,
   }) : _radioType = _RadioType.material,
        useCupertinoCheckmarkStyle = false;
 
@@ -155,6 +170,7 @@ class Radio<T> extends StatefulWidget {
     this.enabled,
     this.groupRegistry,
     this.backgroundColor,
+    this.side,
   }) : _radioType = _RadioType.adaptive;
 
   /// {@macro flutter.widget.RawRadio.value}
@@ -411,6 +427,21 @@ class Radio<T> extends StatefulWidget {
   /// If null, then it is transparent in all states.
   final WidgetStateProperty<Color?>? backgroundColor;
 
+  /// The side for the circular border of the radio button, in all
+  /// [WidgetState]s.
+  ///
+  /// This property can be a [BorderSide] or a [WidgetStateBorderSide] to leverage
+  /// widget state resolution.
+  ///
+  /// Resolves in the following states:
+  ///  * [WidgetState.selected].
+  ///  * [WidgetState.hovered].
+  ///  * [WidgetState.focused].
+  ///  * [WidgetState.disabled].
+  ///
+  /// If null, then it defaults to a border using the fill color.
+  final BorderSide? side;
+
   @override
   State<Radio<T>> createState() => _RadioState<T>();
 }
@@ -517,6 +548,7 @@ class _RadioState<T> extends State<Radio<T>> {
           visualDensity: widget.visualDensity,
           materialTapTargetSize: widget.materialTapTargetSize,
           backgroundColor: widget.backgroundColor,
+          side: widget.side,
         );
       },
     );
@@ -553,6 +585,7 @@ class _RadioPaint extends StatefulWidget {
     required this.visualDensity,
     required this.materialTapTargetSize,
     required this.backgroundColor,
+    required this.side,
   });
 
   final ToggleableStateMixin toggleableState;
@@ -565,6 +598,7 @@ class _RadioPaint extends StatefulWidget {
   final VisualDensity? visualDensity;
   final MaterialTapTargetSize? materialTapTargetSize;
   final WidgetStateProperty<Color?>? backgroundColor;
+  final BorderSide? side;
 
   @override
   State<StatefulWidget> createState() => _RadioPaintState();
@@ -591,6 +625,16 @@ class _RadioPaintState extends State<_RadioPaint> {
     });
   }
 
+  BorderSide? _resolveSide(BorderSide? side, Set<MaterialState> states) {
+    if (side is WidgetStateProperty) {
+      return WidgetStateProperty.resolveAs<BorderSide?>(side, states);
+    }
+    if (!states.contains(WidgetState.selected)) {
+      return side;
+    }
+    return null;
+  }
+
   @override
   Widget build(BuildContext context) {
     final RadioThemeData radioTheme = RadioTheme.of(context);
@@ -678,6 +722,21 @@ class _RadioPaintState extends State<_RadioPaint> {
       ),
     };
     size += effectiveVisualDensity.baseSizeAdjustment;
+    // TODO(ValentinVignal): Add side to RadioThemeData.
+    final BorderSide activeSide =
+        _resolveSide(widget.side, activeStates) ??
+        BorderSide(
+          color: effectiveActiveColor,
+          width: 2.0,
+          strokeAlign: BorderSide.strokeAlignCenter,
+        );
+    final BorderSide inactiveSide =
+        _resolveSide(widget.side, inactiveStates) ??
+        BorderSide(
+          color: effectiveInactiveColor,
+          width: 2.0,
+          strokeAlign: BorderSide.strokeAlignCenter,
+        );
 
     return CustomPaint(
       size: size,
@@ -698,7 +757,9 @@ class _RadioPaintState extends State<_RadioPaint> {
             ..activeColor = effectiveActiveColor
             ..inactiveColor = effectiveInactiveColor
             ..activeBackgroundColor = activeBackgroundColor
-            ..inactiveBackgroundColor = inactiveBackgroundColor,
+            ..inactiveBackgroundColor = inactiveBackgroundColor
+            ..activeSide = activeSide
+            ..inactiveSide = inactiveSide,
     );
   }
 }
@@ -724,11 +785,36 @@ class _RadioPainter extends ToggleablePainter {
     notifyListeners();
   }
 
+  BorderSide get inactiveSide => _inactiveSide!;
+  BorderSide? _inactiveSide;
+  set inactiveSide(BorderSide? value) {
+    if (_inactiveSide == value) {
+      return;
+    }
+    _inactiveSide = value;
+    notifyListeners();
+  }
+
+  BorderSide get activeSide => _activeSide!;
+  BorderSide? _activeSide;
+  set activeSide(BorderSide? value) {
+    if (_activeSide == value) {
+      return;
+    }
+    _activeSide = value;
+    notifyListeners();
+  }
+
   @override
   void paint(Canvas canvas, Size size) {
     paintRadialReaction(canvas: canvas, origin: size.center(Offset.zero));
 
-    final Offset center = (Offset.zero & size).center;
+    final Rect rect = Offset.zero & size;
+    final Offset center = rect.center;
+    final Rect effectiveRect = (center & const Size.square(_kOuterRadius * 2)).translate(
+      -_kOuterRadius,
+      -_kOuterRadius,
+    );
 
     // Background
     final Paint backgroundPaint =
@@ -738,12 +824,8 @@ class _RadioPainter extends ToggleablePainter {
     canvas.drawCircle(center, _kOuterRadius, backgroundPaint);
 
     // Outer circle
-    final Paint outerCirclePaint =
-        Paint()
-          ..color = Color.lerp(inactiveColor, activeColor, position.value)!
-          ..style = PaintingStyle.stroke
-          ..strokeWidth = 2.0;
-    canvas.drawCircle(center, _kOuterRadius, outerCirclePaint);
+    final BorderSide side = BorderSide.lerp(inactiveSide, activeSide, position.value);
+    CircleBorder(side: side).paint(canvas, effectiveRect);
 
     // Inner circle
     if (!position.isDismissed) {
diff --git a/packages/flutter/test/material/radio_test.dart b/packages/flutter/test/material/radio_test.dart
