I found
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(),
    ),

CodePudding user response：

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.

CodePudding user response：

By using GridView, you can convert your code to something like this:

return GridView.builder(
  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    childAspectRatio: 4,
  ),
  itemCount: optList.length,
  itemBuilder: (context, index) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Radio<dynamic>(
            value: data.name,
            groupValue: data.index,
            onChanged: (val) {
              setState(() {
                speed = data.name;
                id = data.index;
              });
            }),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Text("${data.total}" ' ' "${data.name}"),
            Text('~' "${data.price}" ' ')
          ],
        ),
      ],
    );