Can Widgets have one "joint" state? - flutter

Question

I'd like to implement a custom radio button, but I can select all of them, and of course, the "radio" means, I can choose only one.
My code:
class RadioSelect extends StatefulWidget {
const RadioSelect(this.text, this.index, {Key key}) : super(key: key);
final String text;
final int index;
#override
_RadioSelectState createState() => _RadioSelectState();
}
class _RadioSelectState extends State<RadioSelect> {
int sizeIndex = 0;
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
setState(() {
sizeIndex = widget.index;
});
},
child: Container(
alignment: Alignment.center,
padding: EdgeInsets.fromLTRB(12, 8, 12, 8),
margin: EdgeInsets.only(right: 8, top: 8),
width: 70,
height: 55,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
width: 3,
color: sizeIndex == widget.index
? Color.fromARGB(255, 139, 195, 74)
: Colors.white,
),
borderRadius: BorderRadius.all(
Radius.circular(10) // <--- border radius here
)),
child: Text(
widget.text,
style: TextStyle(
fontSize: 18,
color: Colors.black,
),
textAlign: TextAlign.center,
),
),
);
}
}
I know this is because every RadioSelect() is a different instance, but how can I make it work?

Answer 1

You can do it based on the Radio widget:
Change your widget to a StatelessWidget.
class RadioSelect extends StatelessWidget {
#override
Widget build(BuildContext context) {
// ...
}
}
Create a isSelected property and set your widget layout based on this property.
class RadioSelect extends StatelessWidget {
final bool isSelected;
const RadioSelect({this.isSelected});
#override
Widget build(BuildContext context) {
return Container(
// Some logic based on isSelected
color: isSelected ? Colors.red : Colors.white,
);
}
}
Create a onChanged property and, every time the user clicks on it, call this property.
class RadioSelect extends StatelessWidget {
final void Function() onChanged;
final bool isSelected;
const RadioSelect({this.isSelected, this.onChanged});
#override
Widget build(BuildContext context) {
return GestureDetector(
// Use onChanged as callback
onTap: () => onChanged(),
child: Container(
color: isSelected ? Colors.red : Colors.white,
),
);
}
}
Now, when you have to use multiple instances of it, you can use a index to keep track of what radio is currently selected:
class _MainWidgetState extends State<MainWidget> {
// Keeping track of the number of ratios you are using
final int _numRadios = 10;
int _currentIndex;
#override
Widget build(BuildContext context) {
return Column(
children: [
for (int i = 0; i < _numRatios; i++)
RadioSelect(
// The radio is select if the current index of this widget
// is equal to the current index of this child in the Column
isSelected: _currentIndex == i,
// When the user taps one ratio, updte the current index
// of this widget and set a new state
onChanged: () => setState(() => _currentIndex = i),
)
]
);
}
}
Note: The code above considers the layout of all ratios are equal. If each ratio must have its own text, for example, you can replace _numRatios with a list of strings or a more descriptive data object:
class _MainWidgetState extends State<MainWidget> {
final List<String> texts = ["radio1", "radio2", "radio3", "radio4"];
int _currentIndex;
#override
Widget build(BuildContext context) {
return Column(
children: [
for (int i = 0; i < texts.length; i++)
RadioSelect(
// Supposing you have a text property in your RadioSelect
// Access the text of the current child in the list of strings
text: texts[i],
isSelected: _currentIndex == i,
onChanged: () => setState(() => _currentIndex = i),
)
]
);
}
}