Add `side` to `Radio` by ValentinVignal · Pull Request #171217 · flutter/flutter

ValentinVignal · 2025-06-26T08:51:31Z

Part of #168787

This PR adds side parameter to Radio to be able to control its color and width.

This allows me to implement something like:

Screen.Recording.2025-06-26.at.4.50.19.PM.mov

In order to make it non breaking, when absent, it uses the fillColor

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
I followed the breaking change policy and added Data Driven Fixes where supported.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

chunhtai

LGTM, will you add a example for the new feature added to the radio? either now or after all the features are added

chunhtai · 2025-06-26T17:07:29Z

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

+  ///  * [WidgetState.focused].
+  ///  * [WidgetState.disabled].
+  ///
+  /// If null, then it defaults to a border using the fill color.


somewhere in the doc should mention this can use WidgetStateBorderSide in order to leverage widgetstate

Good point, I updated it in Add better documentation

chunhtai · 2025-06-26T17:10:10Z

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

  /// If null, then it is transparent in all states.
  final WidgetStateProperty<Color?>? backgroundColor;

+  /// The side of the radio button, in all [WidgetState]s.


Suggested change

/// The side of the radio button, in all [WidgetState]s.

/// The side for the circular border of the radio button, in all [WidgetState]s.

I updated it in Add better documentation

ValentinVignal · 2025-06-27T16:11:38Z

LGTM, will you add a example for the new feature added to the radio? either now or after all the features are added

Yes, you are right! I think it is good if I include it in this PR. That way I can keep updating it with the future PRs
I created the example in Add example
Here is how it looks like, I did my best not to make it too ugly... 😅 What do you think about it?

Screen.Recording.2025-06-27.at.11.58.36.PM.mov

chunhtai

LGTM

chunhtai · 2025-06-27T16:13:43Z

examples/api/lib/material/radio/radio.1.dart

+
+import 'package:flutter/material.dart';
+
+/// Flutter code sample for [Radio].


Suggested change

/// Flutter code sample for [Radio].

/// Flutter code sample for [Radio] to showcase how to customize radio style.

Thanks, I added it in
Improve comment in example

Part of #168787 Continuation of #171217 ## 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

Part of flutter#168787 Continuation of flutter#171217 ## 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

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

Part of flutter#168787 Continuation of flutter#171217 ## 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

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

Part of flutter#168787 Continuation of flutter#171217 ## 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

ValentinVignal requested review from chunhtai and justinmc June 26, 2025 08:51

github-actions bot added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Jun 26, 2025

ValentinVignal mentioned this pull request Jun 26, 2025

Add ways to customise Radio #168787

Closed

ValentinVignal force-pushed the flutter/add-side-to-radio branch from 62909b1 to 836b96f Compare June 26, 2025 08:57

chunhtai approved these changes Jun 26, 2025

View reviewed changes

github-actions bot added d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos labels Jun 27, 2025

chunhtai approved these changes Jun 27, 2025

View reviewed changes

ValentinVignal added 6 commits June 28, 2025 01:08

Add side to radio

ca247e8

Add test for radio's side

90cbb33

Add better documentation

9ba191d

Add example

5686ca2

Add test for the example

c506168

Improve comment in example

b03a3bd

ValentinVignal force-pushed the flutter/add-side-to-radio branch from c6da1f3 to b03a3bd Compare June 27, 2025 17:08

ValentinVignal added the autosubmit Merge PR when tree becomes green via auto submit App label Jun 27, 2025

auto-submit bot added this pull request to the merge queue Jun 27, 2025

Merged via the queue into flutter:master with commit f83d842 Jun 27, 2025
71 checks passed

flutter-dashboard bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Jun 27, 2025

engine-flutter-autoroll mentioned this pull request Jun 27, 2025

Roll Flutter from 2773c0c8e15e to f83d84234775 (46 revisions) flutter/packages#9514

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jun 27, 2025

f83d842 Add side to Radio (flutter/flutter#171217)

44d6c86

ValentinVignal mentioned this pull request Jun 28, 2025

Add radioSide to RadioListTile #171318

Merged

9 tasks

engine-flutter-autoroll mentioned this pull request Jun 28, 2025

Roll Flutter from 2773c0c8e15e to 02da4cc00db9 (61 revisions) flutter/packages#9518

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jun 28, 2025

f83d842 Add side to Radio (flutter/flutter#171217)

5e90b52

engine-flutter-autoroll mentioned this pull request Jun 28, 2025

Roll Flutter from 2773c0c8e15e to 771b631eae0a (62 revisions) flutter/packages#9519

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jun 28, 2025

f83d842 Add side to Radio (flutter/flutter#171217)

f054d1b

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 3, 2025

f83d842 Add side to Radio (flutter/flutter#171217)

e3de127

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 3, 2025

f83d842 Add side to Radio (flutter/flutter#171217)

2e163b7

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 3, 2025

f83d842 Add side to Radio (flutter/flutter#171217)

7a85984

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 3, 2025

f83d842 Add side to Radio (flutter/flutter#171217)

684c999

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 3, 2025

f83d842 Add side to Radio (flutter/flutter#171217)

c94864b

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 4, 2025

f83d842 Add side to Radio (flutter/flutter#171217)

3be196b

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 4, 2025

f83d842 Add side to Radio (flutter/flutter#171217)

d0a38a3

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 4, 2025

f83d842 Add side to Radio (flutter/flutter#171217)

f186748

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 5, 2025

f83d842 Add side to Radio (flutter/flutter#171217)

3e5449e

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 5, 2025

f83d842 Add side to Radio (flutter/flutter#171217)

a9315ba

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 6, 2025

f83d842 Add side to Radio (flutter/flutter#171217)

282e64b

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 6, 2025

f83d842 Add side to Radio (flutter/flutter#171217)

3c99536

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 6, 2025

f83d842 Add side to Radio (flutter/flutter#171217)

5b75d8a

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 7, 2025

f83d842 Add side to Radio (flutter/flutter#171217)

bed53b8

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 7, 2025

f83d842 Add side to Radio (flutter/flutter#171217)

65458ec

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 7, 2025

f83d842 Add side to Radio (flutter/flutter#171217)

8de384b

Piinks mentioned this pull request Jul 19, 2025

Flutter Notable Commits - 2025 #161460

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 14, 2025

f83d842 Add side to Radio (flutter/flutter#171217)

940b1ef

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 14, 2025

f83d842 Add side to Radio (flutter/flutter#171217)

713027f

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 15, 2025

f83d842 Add side to Radio (flutter/flutter#171217)

dec70fc

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 15, 2025

f83d842 Add side to Radio (flutter/flutter#171217)

cb250fc

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 16, 2025

f83d842 Add side to Radio (flutter/flutter#171217)

599248f

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `side` to `Radio`#171217

Add `side` to `Radio`#171217
auto-submit[bot] merged 6 commits intoflutter:masterfrom
ValentinVignal:flutter/add-side-to-radio

ValentinVignal commented Jun 26, 2025

Uh oh!

chunhtai left a comment

Uh oh!

chunhtai Jun 26, 2025

Uh oh!

ValentinVignal Jun 27, 2025

Uh oh!

chunhtai Jun 26, 2025

Uh oh!

ValentinVignal Jun 27, 2025

Uh oh!

ValentinVignal commented Jun 27, 2025

Uh oh!

chunhtai left a comment

Uh oh!

chunhtai Jun 27, 2025

Uh oh!

ValentinVignal Jun 27, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	/// The side of the radio button, in all [WidgetState]s.
	/// The side for the circular border of the radio button, in all [WidgetState]s.


		import 'package:flutter/material.dart';

		/// Flutter code sample for [Radio].

	/// Flutter code sample for [Radio].
	/// Flutter code sample for [Radio] to showcase how to customize radio style.

Conversation

ValentinVignal commented Jun 26, 2025

Pre-launch Checklist

Uh oh!

chunhtai left a comment

Choose a reason for hiding this comment

Uh oh!

chunhtai Jun 26, 2025

Choose a reason for hiding this comment

Uh oh!

ValentinVignal Jun 27, 2025

Choose a reason for hiding this comment

Uh oh!

chunhtai Jun 26, 2025

Choose a reason for hiding this comment

Uh oh!

ValentinVignal Jun 27, 2025

Choose a reason for hiding this comment

Uh oh!

ValentinVignal commented Jun 27, 2025

Uh oh!

chunhtai left a comment

Choose a reason for hiding this comment

Uh oh!

chunhtai Jun 27, 2025

Choose a reason for hiding this comment

Uh oh!

ValentinVignal Jun 27, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants