Misalignment when FormBuilderTouchSpin() is in a Row() next to a FormBuilderDropdown()

[mgalgs]

Hello, I'd like to have some horizontal form elements in my form. It works great for some widgets, like a FormBuilderDropdown next to a FormBuilderTextField, as in this example:

  return Row(
    children: [
      Expanded(child: FormBuilderDropdown(
        name: "size",
        decoration: const InputDecoration(labelText: "Size"),
        items: [...],
      ),
      const SizedBox(width: 10),
      Expanded(
        child: FormBuilderTextField(
          name: "quantity",
          decoration: const InputDecoration(labelText: "Quantity"),
        ),
      ),
    ],
  );

but if I try to lay out a FormBuilderDropdown next to a FormBuilderTouchSpin, the bottom field borders don't line up:

  return Row(
    children: [
      Expanded(child: FormBuilderDropdown(
        name: "size",
        decoration: const InputDecoration(labelText: "Size"),
        items: [...],
      ),
      const SizedBox(width: 10),
      Expanded(
        child: FormBuilderTouchSpin(
          name: 'quantity',
          decoration: const InputDecoration(labelText: 'Quantity'),
        ),
      ),
    ],
  );

Is there an easy way to fix this?

[mgalgs]

All right, I ended up putting OutlineInputBorder()s around both widgets and shoving the Size dropdown to the top via Row cross axis alignment, and it's looking good enough for me!

  return Row(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Expanded(child: FormBuilderDropdown(
        name: "size",
        decoration: const InputDecoration(labelText: "Size"),
        items: [...],
      ),
      const SizedBox(width: 10),
      Expanded(
        child: FormBuilderTouchSpin(
          name: 'quantity',
          decoration: const InputDecoration(labelText: 'Quantity'),
        ),
      ),
      // ... eliding another SizedBox and Flexible(IconButton()) here
    ],
  );

[mgalgs]

Got it looking even nicer by adjusting padding (decoration.contentPadding and iconPadding):

  return Row(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Expanded(child: FormBuilderDropdown(
        name: "size",
        decoration: const InputDecoration(labelText: "Size"),
        items: [...],
      ),
      const SizedBox(width: 10),
      Expanded(
        child: FormBuilderTouchSpin(
          name: 'quantity',
          decoration: const InputDecoration(labelText: 'Quantity', contentPadding: EdgeInsets.all(8.0)),
          iconPadding: EdgeInsets.zero,
        ),
      ),
    ],
  );