Form validation breaks widgets alignment-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

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