Flutter : Align radio in wrap widget in column

I found one duplicate question on this but that was not created dynamically as I do here which is using a List because I might want to add new items. So how do I align cause my 2nd column of radios arent vertically aligned.

Here’s my code:

List<OptionList> optList = [
    OptionList(name: "Super Fast", total: 20, index: 1, price: 50),
    OptionList(name: "Fast", total: 6, index: 2, price: 20),
    OptionList(name: "Regular", total: 5, index: 3, price: 10),
    OptionList(name: "Slow", total: 5, index: 3, price: 5),
  ];

Wrap(
    spacing: 20,
    runSpacing: 15,
    direction: Axis.horizontal,
    alignment: WrapAlignment.spaceBetween,
    runAlignment: WrapAlignment.spaceEvenly,
    children: optList.map((data) => Row(
                  mainAxisSize: MainAxisSize.min,
                   children: [
                        Radio(
                           value: data.name,
                           groupValue: data.index,
                           onChanged: (val) {
                               setState(() {
                                   speed = data.name;
                                   id = data.index;
                               });
                           }),
                           Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                 Text("${data.total}" ' ' "${data.name}"),
                                 Text('~'"${data.price}" ' ')
                              ],
                           ),
                       ],)).toList(),
    ),

>Solution :

Wrap children are different sizes and alignment: WrapAlignment.spaceBetween,, that why you are having this issue. You can provide fixed with that solves the issue but this also depend on text size. If you are fixed with these string 120 width is enough.

children: optList
    .map(
      (data) => SizedBox(
        width: 120,
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Radio(
                value: data.name,
                groupValue: data.index,
                onChanged: (val) {}),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("${data.total}" ' ' "${data.name}"),
                Text('~' "${data.price}" ' ')
              ],
            ),
          ],
        ),
      ),
    )
    .toList(),

If you have overflow with long text, you can wrap Column with Expanded widget.