How to vertically center widgets in a Row and separate them with dots in Flutter?

How to make the middle text centered vertically?

my current approach is like this:

Row _text2Value(
  {required String title,
  required String value1,
  required String uom,
  required String value2}) {
return Row(children: [
  Text(title, style: TextStyle(fontSize: 8)),
  Expanded(
      child: Text('.' * 100, maxLines: 1, style: TextStyle(fontSize: 8))),
  Text("$value1 $uom", style: TextStyle(fontSize: 8)),
  Expanded(
      child: Text('.' * 100, maxLines: 1, style: TextStyle(fontSize: 8))),
  Text(value2, style: TextStyle(fontSize: 8))
]);
}

The below code should work for you.

  Row _text2Value({
    required String title,
    required String value1,
    required String uom,
    required String value2,
  }) {
    return Row(
      children: [
        Expanded(
          child: Row(
            children: [
              Text(
                title,
                style: const TextStyle(fontSize: 8),
              ),
              Expanded(
                child: Text(
                  '.' * 100,
                  maxLines: 1,
                  style: const TextStyle(fontSize: 8),
                ),
              ),
            ],
          ),
        ),
        Text(
          "$value1 $uom",
          style: const TextStyle(fontSize: 8),
        ),
        Expanded(
          child: Row(
            children: [
              Expanded(
                child: Text(
                  '.' * 100,
                  maxLines: 1,
                  style: const TextStyle(fontSize: 8),
                ),
              ),
              Text(
                value2,
                style: const TextStyle(fontSize: 8),
              ),
            ],
          ),
        ),
      ],
    );
  }

The top-level Expanded makes the same width of the left and the right panel, so that the value uom text aligns in the center always. And the sub-level of the Expanded makes ... to fill in the remaining space.