Form validation breaks widgets alignment

Question

I've implemented simple form with Flutter and also form validation with message is implemented. There's TextFormField with IconButton next to it

Row(
                children: [
                  Expanded(
                    child: TextFormField(
                      key: Key('new_event_address'),
                      autofocus: false,
                      initialValue: widget.address,
                      decoration: InputDecoration(
                        hintText: "",
                        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
                        border: OutlineInputBorder(borderRadius: BorderRadius.circular(5.0)),
                        focusedBorder: OutlineInputBorder(
                          borderSide: const BorderSide(color: Colors.black26, width: 2.0),
                          borderRadius: BorderRadius.circular(5.0),
                        ),
                      ),
                      onSaved: (value) => setState(() => _address = value),
                      validator: (val) => val.length == 0 ? CustomResources.strings["add_event_validation_address_required"] : null,
                    ),
                  ),
                  Padding(padding: EdgeInsets.only(right: 5)),
                  IconButton(
                    icon: const Icon(Icons.add_location_outlined),
                    onPressed: () {},
                  )
                ],
              )

It looks as it should - Text field with icon button:

But when validation error occurs, icon button is aligned incorrectly:

I think that's because TextFormField changes its position to show validation error message, but IconButton position remains the same, so it's not aligned correctly anymore, even if placed in the same Row container.

How to fix that? Do you have any ideas?

Solution 1

Add mainAxisAlignment: MainAxisAlignment.start, in your Row and plays on the padding for the icon.

Solution 2

You can only add crossAxisAlignment: CrossAxisAlignment.start, in your Row. It will look like this:

Comments

[Ravindra S. Patil]

Why not add this icon inside textformfield?

[user1209216]

First, I want visible error message, second - it's default validation layout, is it possible to change it?