Layout inconsistencies between platforms when using Wrap, Positioned, Chip

I am developing a widget for "Badges" for my app and have discovered that it lays out as intended on some platforms but not on others. For example, here is a screen shot for Chrome where the badge layout is what I want:

But the layout is not correct in the iOS simulator:

As you can see, the stars are no longer aligned within the Chip and the spacing between "rows" has increased.

I have created a simple Flutter app which you can use to reproduce this problem. The README provides more details on the issue:

<https://github.com/philipmjohnson/fluttermonarchlayout>

Any suggestions on how to proceed with this issue would be highly appreciated!

The label parameter in the Chip widget accepts a Widget. You can wrap your Text widget with a Row and place the dots before your Text.

Example:

class BadgeIcon extends StatelessWidget {
  const BadgeIcon({Key? key, required this.name, required this.level})
      : super(key: key);
  final String name;
  final int level;

  @override
  Widget build(BuildContext context) {
    const Color selectedColor = Colors.black;
    BadgeDot dot = const BadgeDot(color: selectedColor);

    List<Widget> dots = [];
    if (level == 1) {
      dots = [dot];
    } else if (level == 2) {
      dots = [dot, dot];
    } else if (level == 3) {
      dots = [dot, dot, dot];
    }

    return Padding(
      padding: const EdgeInsets.all(3.0),
      child: Chip(
        label: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: dots,
            ),
            const SizedBox(width: 4),
            Text(name),
          ],
        ),
      ),
    );
  }
}

I received a few suggestions and have summarized the approaches and the solution I decided upon here:

https://github.com/philipmjohnson/fluttermonarchlayout/tree/main#solutions