mkuzayez
mkuzayez

Reputation: 1

How to align TextFormField and DropdownButtonFormField before and after validator returning Text?

I aligned TextFormField and DropdownButtonFormField successfully before the validation message, but after the message the alignment goes wrong.

Before

before

And After

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

Answers (1)

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63769

You can change crossAxisAlignment: CrossAxisAlignment.end to crossAxisAlignment: CrossAxisAlignment.start on Row.

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisSize: MainAxisSize.max,

Upvotes: 0

Related Questions