Flutter: Select single item in using Radio

Question

I have a widget who need to select a single item using Radio as dynamically. I already created that widget like below:

int number;
return Container(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Radio(
              value: index,
              groupValue: number,
              activeColor: Color(0xFFE91E63),
              onChanged: (int val) {
                setState(() {
                  number = val;
                  print('Show the Resumes $number');
                });
              },
            ),
            Text(
              'Show',
            ),
          ],
        ),
      );

I looping the above widget inside a ListView.builder. And the index in the value is from index from itemBuilder on ListView.builder. And when I run the code, it looks like this.

So how to make my Radio is only select a single item?

Answer 1

Maybe you can write like this, declare value and groupValue outside the loop (builder in ListView). And create value, groupValue, and onChanged in the constructor. And the result like this.

...

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<int> _numbers = List<int>.generate(5, (index) => index);
  int _groupNumber;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return HomeContent(
            value: _numbers[index],
            groupValue: _groupNumber,
            onChanged: (int value) {
              setState(() {
                _groupNumber = value;
              });
            },
          );
        },
        itemCount: _numbers.length,
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  final int value;
  final int groupValue;
  final ValueChanged<int> onChanged;

  const HomeContent({
    Key key,
    this.value,
    this.groupValue,
    this.onChanged,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return RadioListTile<int>(
      value: this.value,
      groupValue: this.groupValue,
      onChanged: this.onChanged,
      title: Text('Value $value On Group $groupValue'),
    );
  }
}