Reputation: 1
I aligned TextFormField
and DropdownButtonFormField
successfully before the validation message, but after the message the alignment goes wrong.
Before
And After
)
I know why this happens, I just didn't figure out the right approach.
Here is my code:
Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
child: TextFormField(
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(6.0),
label: Text("Quantity"),
),
keyboardType: TextInputType.number,
initialValue: "1",
validator: (value) {
if (value == null ||
value.isEmpty ||
int.tryParse(value) == null ||
int.tryParse(value)! <= 0) {
return "Must be a valid positive number";
} else {
return null;
}
},
onSaved: (value) {
_enteredQuantity = int.parse(value!);
},
),
),
const SizedBox(
width: 8,
),
Expanded(
child: DropdownButtonFormField(
hint: const Text("Category"),
items: [
for (final category in categories.entries)
DropdownMenuItem(
value: category.value,
child: Row(
children: [
Icon(Icons.square, color: category.value.color),
const SizedBox(
width: 8,
height: 8,
),
Text(category.value.category),
],
),
),
],
onChanged: (value) {
if (value != null) {
setState(() {
_enteredCategory = value;
});
}
},
),
)
],
),
Upvotes: 0
Views: 28
Reputation: 63769
You can change crossAxisAlignment: CrossAxisAlignment.end
to crossAxisAlignment: CrossAxisAlignment.start
on Row.
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
Upvotes: 0